diff --git a/apps/browser/src/popup/images/eu-flag.png b/apps/browser/src/popup/images/eu-flag.png
deleted file mode 100644
index 592bc95e0ce..00000000000
Binary files a/apps/browser/src/popup/images/eu-flag.png and /dev/null differ
diff --git a/apps/browser/src/popup/images/flag-eu.svg b/apps/browser/src/popup/images/flag-eu.svg
new file mode 100644
index 00000000000..bbfefd6b47a
--- /dev/null
+++ b/apps/browser/src/popup/images/flag-eu.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
+  <defs>
+    <g id="eu-d">
+      <g id="eu-b">
+        <path id="eu-a" d="m0-1-.3 1 .5.1z"/>
+        <use xlink:href="#eu-a" transform="scale(-1 1)"/>
+      </g>
+      <g id="eu-c">
+        <use xlink:href="#eu-b" transform="rotate(72)"/>
+        <use xlink:href="#eu-b" transform="rotate(144)"/>
+      </g>
+      <use xlink:href="#eu-c" transform="scale(-1 1)"/>
+    </g>
+  </defs>
+  <path fill="#039" d="M0 0h640v480H0z"/>
+  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
+    <use xlink:href="#eu-d" width="100%" height="100%" y="-6"/>
+    <use xlink:href="#eu-d" width="100%" height="100%" y="6"/>
+    <g id="eu-e">
+      <use xlink:href="#eu-d" width="100%" height="100%" x="-6"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
+    </g>
+    <use xlink:href="#eu-e" width="100%" height="100%" transform="scale(-1 1)"/>
+  </g>
+</svg>
diff --git a/apps/browser/src/popup/images/flag-us.svg b/apps/browser/src/popup/images/flag-us.svg
new file mode 100644
index 00000000000..615946d4b59
--- /dev/null
+++ b/apps/browser/src/popup/images/flag-us.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+  <path fill="#bd3d44" d="M0 0h640v480H0"/>
+  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
+  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
+  <marker id="us-a" markerHeight="30" markerWidth="30">
+    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
+  </marker>
+  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
+</svg>
diff --git a/apps/browser/src/popup/images/us-flag.png b/apps/browser/src/popup/images/us-flag.png
deleted file mode 100644
index 543dc133247..00000000000
Binary files a/apps/browser/src/popup/images/us-flag.png and /dev/null differ
diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss
index cf25aa2ebfb..19d39655f2a 100644
--- a/apps/browser/src/popup/scss/environment.scss
+++ b/apps/browser/src/popup/scss/environment.scss
@@ -93,16 +93,15 @@ html.browser_safari {
 
   img {
     margin-bottom: -2px;
-    width: 22px;
     height: 14px;
   }
 
   .img-us {
-    content: url("../images/us-flag.png");
+    content: url("../images/flag-us.svg");
   }
 
   .img-eu {
-    content: url("../images/eu-flag.png");
+    content: url("../images/flag-eu.svg");
   }
 }
 
diff --git a/apps/desktop/src/images/eu-flag.png b/apps/desktop/src/images/eu-flag.png
deleted file mode 100644
index 592bc95e0ce..00000000000
Binary files a/apps/desktop/src/images/eu-flag.png and /dev/null differ
diff --git a/apps/desktop/src/images/flag-eu.svg b/apps/desktop/src/images/flag-eu.svg
new file mode 100644
index 00000000000..bbfefd6b47a
--- /dev/null
+++ b/apps/desktop/src/images/flag-eu.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
+  <defs>
+    <g id="eu-d">
+      <g id="eu-b">
+        <path id="eu-a" d="m0-1-.3 1 .5.1z"/>
+        <use xlink:href="#eu-a" transform="scale(-1 1)"/>
+      </g>
+      <g id="eu-c">
+        <use xlink:href="#eu-b" transform="rotate(72)"/>
+        <use xlink:href="#eu-b" transform="rotate(144)"/>
+      </g>
+      <use xlink:href="#eu-c" transform="scale(-1 1)"/>
+    </g>
+  </defs>
+  <path fill="#039" d="M0 0h640v480H0z"/>
+  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
+    <use xlink:href="#eu-d" width="100%" height="100%" y="-6"/>
+    <use xlink:href="#eu-d" width="100%" height="100%" y="6"/>
+    <g id="eu-e">
+      <use xlink:href="#eu-d" width="100%" height="100%" x="-6"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
+    </g>
+    <use xlink:href="#eu-e" width="100%" height="100%" transform="scale(-1 1)"/>
+  </g>
+</svg>
diff --git a/apps/desktop/src/images/flag-us.svg b/apps/desktop/src/images/flag-us.svg
new file mode 100644
index 00000000000..615946d4b59
--- /dev/null
+++ b/apps/desktop/src/images/flag-us.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+  <path fill="#bd3d44" d="M0 0h640v480H0"/>
+  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
+  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
+  <marker id="us-a" markerHeight="30" markerWidth="30">
+    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
+  </marker>
+  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
+</svg>
diff --git a/apps/desktop/src/images/us-flag.png b/apps/desktop/src/images/us-flag.png
deleted file mode 100644
index 543dc133247..00000000000
Binary files a/apps/desktop/src/images/us-flag.png and /dev/null differ
diff --git a/apps/desktop/src/scss/environment.scss b/apps/desktop/src/scss/environment.scss
index d2bdfeeb66d..b9e3eaa7b23 100644
--- a/apps/desktop/src/scss/environment.scss
+++ b/apps/desktop/src/scss/environment.scss
@@ -86,15 +86,14 @@
 
   img {
     margin-bottom: -2px;
-    width: 22px;
     height: 14px;
   }
 
   .img-us {
-    content: url("../images/us-flag.png");
+    content: url("../images/flag-us.svg");
   }
 
   .img-eu {
-    content: url("../images/eu-flag.png");
+    content: url("../images/flag-eu.svg");
   }
 }
diff --git a/apps/web/src/app/components/environment-selector/environment-selector.component.html b/apps/web/src/app/components/environment-selector/environment-selector.component.html
index 9fb954f008d..2984d6a6a3b 100644
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@@ -10,7 +10,11 @@
         aria-hidden="true"
         [style.visibility]="isUsServer ? 'visible' : 'hidden'"
       ></i>
-      <img src="../../images/us_flag.png" alt="{{ 'usFlag' | i18n }}" class="pb-1 mr-1" />
+      <img
+        src="../../images/flag-us.svg"
+        alt="{{ 'usFlag' | i18n }}"
+        class="tw-mr-1 tw-w-6 tw-pb-1"
+      />
       {{ "usDomain" | i18n }}
     </a>
     <a
@@ -24,7 +28,11 @@
         aria-hidden="true"
         [style.visibility]="isEuServer ? 'visible' : 'hidden'"
       ></i>
-      <img src="../../images/eu_flag.png" alt="{{ 'euFlag' | i18n }}" class="pb-1 mr-1" />
+      <img
+        src="../../images/flag-eu.svg"
+        alt="{{ 'euFlag' | i18n }}"
+        class="tw-mr-1 tw-w-6 tw-pb-1"
+      />
       {{ "euDomain" | i18n }}
     </a>
   </bit-menu>
@@ -36,9 +44,9 @@
       class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-2"
     >
       <img
-        [src]="'../../images/' + selectedRegionImageName + '.png'"
+        [src]="'../../images/' + selectedRegionImageName + '.svg'"
         alt="{{ 'selectedRegionFlag' | i18n }}"
-        class="pb-1 mr-1 tw-ml-1"
+        class="tw-mx-1 tw-pb-1"
       /><label class="tw-cursor-pointer !tw-font-normal"
         >{{ isEuServer ? ("euDomain" | i18n) : ("usDomain" | i18n) }}
         <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i
diff --git a/apps/web/src/app/components/environment-selector/environment-selector.component.ts b/apps/web/src/app/components/environment-selector/environment-selector.component.ts
index 9f736a72e4e..f9c06bbdd3d 100644
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.ts
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.ts
@@ -35,9 +35,9 @@ export class EnvironmentSelectorComponent implements OnInit {
 
   getRegionImage(): string {
     if (this.isEuServer) {
-      return "eu_flag";
+      return "flag-eu";
     } else {
-      return "us_flag";
+      return "flag-us";
     }
   }
 }
diff --git a/apps/web/src/images/eu_flag.png b/apps/web/src/images/eu_flag.png
deleted file mode 100644
index 592bc95e0ce..00000000000
Binary files a/apps/web/src/images/eu_flag.png and /dev/null differ
diff --git a/apps/web/src/images/flag-eu.svg b/apps/web/src/images/flag-eu.svg
new file mode 100644
index 00000000000..bbfefd6b47a
--- /dev/null
+++ b/apps/web/src/images/flag-eu.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
+  <defs>
+    <g id="eu-d">
+      <g id="eu-b">
+        <path id="eu-a" d="m0-1-.3 1 .5.1z"/>
+        <use xlink:href="#eu-a" transform="scale(-1 1)"/>
+      </g>
+      <g id="eu-c">
+        <use xlink:href="#eu-b" transform="rotate(72)"/>
+        <use xlink:href="#eu-b" transform="rotate(144)"/>
+      </g>
+      <use xlink:href="#eu-c" transform="scale(-1 1)"/>
+    </g>
+  </defs>
+  <path fill="#039" d="M0 0h640v480H0z"/>
+  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
+    <use xlink:href="#eu-d" width="100%" height="100%" y="-6"/>
+    <use xlink:href="#eu-d" width="100%" height="100%" y="6"/>
+    <g id="eu-e">
+      <use xlink:href="#eu-d" width="100%" height="100%" x="-6"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
+      <use xlink:href="#eu-d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
+    </g>
+    <use xlink:href="#eu-e" width="100%" height="100%" transform="scale(-1 1)"/>
+  </g>
+</svg>
diff --git a/apps/web/src/images/flag-us.svg b/apps/web/src/images/flag-us.svg
new file mode 100644
index 00000000000..615946d4b59
--- /dev/null
+++ b/apps/web/src/images/flag-us.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480">
+  <path fill="#bd3d44" d="M0 0h640v480H0"/>
+  <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
+  <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
+  <marker id="us-a" markerHeight="30" markerWidth="30">
+    <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
+  </marker>
+  <path fill="none" marker-mid="url(#us-a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
+</svg>
diff --git a/apps/web/src/images/us_flag.png b/apps/web/src/images/us_flag.png
deleted file mode 100644
index 543dc133247..00000000000
Binary files a/apps/web/src/images/us_flag.png and /dev/null differ
diff --git a/libs/angular/src/auth/components/environment-selector.component.html b/libs/angular/src/auth/components/environment-selector.component.html
index f1ea36d76ff..c7307edce90 100644
--- a/libs/angular/src/auth/components/environment-selector.component.html
+++ b/libs/angular/src/auth/components/environment-selector.component.html
@@ -81,7 +81,7 @@
         ></i>
         <i
           class="bwi bwi-fw bwi-md bwi-pencil-square"
-          style="padding-bottom: 1px; margin-right: 5px"
+          style="padding-bottom: 1px"
           aria-hidden="true"
         ></i>
         <span>{{ "selfHosted" | i18n }}</span>