diff --git a/src/components/Client/Address.vue b/src/components/Client/Address.vue
index 2a9719a8..ca3e8dc4 100644
--- a/src/components/Client/Address.vue
+++ b/src/components/Client/Address.vue
@@ -30,20 +30,9 @@
         nextTick(() => clientAddressInput?.select());
       "
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
+      <IconsEdit
         class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-        />
-      </svg>
+      />
     </span>
   </span>
 </template>
diff --git a/src/components/Client/Avatar.vue b/src/components/Client/Avatar.vue
index 25f64669..3afb0fb1 100644
--- a/src/components/Client/Avatar.vue
+++ b/src/components/Client/Avatar.vue
@@ -1,17 +1,6 @@
 <template>
   <div class="h-10 w-10 mt-2 self-start rounded-full bg-gray-50 relative">
-    <svg
-      class="w-6 m-2 text-gray-300"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsAvatar class="w-6 m-2 text-gray-300" />
     <img
       v-if="client.avatar"
       :src="client.avatar"
diff --git a/src/components/Client/Config.vue b/src/components/Client/Config.vue
index 1acd2185..daaa71a5 100644
--- a/src/components/Client/Config.vue
+++ b/src/components/Client/Config.vue
@@ -16,20 +16,7 @@
       }
     "
   >
-    <svg
-      class="w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-      />
-    </svg>
+    <IconsDownload class="w-5" />
   </a>
 </template>
 
diff --git a/src/components/Client/Delete.vue b/src/components/Client/Delete.vue
index 91a8cce0..d0e962e0 100644
--- a/src/components/Client/Delete.vue
+++ b/src/components/Client/Delete.vue
@@ -4,18 +4,7 @@
     :title="$t('deleteClient')"
     @click="modalStore.clientDelete = client"
   >
-    <svg
-      class="w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsDelete class="w-5" />
   </button>
 </template>
 
diff --git a/src/components/Client/InlineTransfer.vue b/src/components/Client/InlineTransfer.vue
index a0e1539b..7d62348f 100644
--- a/src/components/Client/InlineTransfer.vue
+++ b/src/components/Client/InlineTransfer.vue
@@ -6,18 +6,7 @@
     :title="$t('totalDownload') + bytes(client.transferTx)"
   >
     ·
-    <svg
-      class="align-middle h-3 inline"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsArrowDown class="align-middle h-3 inline" />
     {{ bytes(client.transferTxCurrent) }}/s
   </span>
 
@@ -28,18 +17,7 @@
     :title="$t('totalUpload') + bytes(client.transferRx)"
   >
     ·
-    <svg
-      class="align-middle h-3 inline"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    <IconsArrowUp class="align-middle h-3 inline" />
     {{ bytes(client.transferRxCurrent) }}/s
   </span>
 </template>
diff --git a/src/components/Client/Name.vue b/src/components/Client/Name.vue
index f274fa56..038274ea 100644
--- a/src/components/Client/Name.vue
+++ b/src/components/Client/Name.vue
@@ -35,20 +35,9 @@
         nextTick(() => clientNameInput?.select());
       "
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
+      <IconsEdit
         class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-        />
-      </svg>
+      />
     </span>
   </div>
 </template>
diff --git a/src/components/Client/QRCode.vue b/src/components/Client/QRCode.vue
index 7a600123..728fa7fe 100644
--- a/src/components/Client/QRCode.vue
+++ b/src/components/Client/QRCode.vue
@@ -12,20 +12,7 @@
       modalStore.qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`
     "
   >
-    <svg
-      class="w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-      />
-    </svg>
+    <IconsQRCode class="w-5" />
   </button>
 </template>
 
diff --git a/src/components/Client/Transfer.vue b/src/components/Client/Transfer.vue
index 59583f98..30ed2a31 100644
--- a/src/components/Client/Transfer.vue
+++ b/src/components/Client/Transfer.vue
@@ -5,18 +5,7 @@
       class="flex gap-1"
       :title="$t('totalDownload') + bytes(client.transferTx)"
     >
-      <svg
-        class="align-middle h-3 inline mt-0.5"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <IconsArrowDown class="align-middle h-3 inline mt-0.5" />
       <div>
         <span class="text-gray-700 dark:text-neutral-200"
           >{{ bytes(client.transferTxCurrent) }}/s</span
@@ -35,18 +24,7 @@
       class="flex gap-1"
       :title="$t('totalUpload') + bytes(client.transferRx)"
     >
-      <svg
-        class="align-middle h-3 inline mt-0.5"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <IconsArrowUp class="align-middle h-3 inline mt-0.5" />
       <div>
         <span class="text-gray-700 dark:text-neutral-200"
           >{{ bytes(client.transferRxCurrent) }}/s</span
diff --git a/src/components/Clients/BackupConfig.vue b/src/components/Clients/BackupConfig.vue
index 8cbd52b5..f1d3d547 100644
--- a/src/components/Clients/BackupConfig.vue
+++ b/src/components/Clients/BackupConfig.vue
@@ -4,7 +4,7 @@
     href="./api/wireguard/backup"
     :title="$t('titleBackupConfig')"
   >
-    <IconsStack />
+    <IconsStack class="w-4 md:mr-2" />
     <span class="max-md:hidden text-sm">{{ $t('backup') }}</span>
   </BaseButton>
 </template>
diff --git a/src/components/Clients/Empty.vue b/src/components/Clients/Empty.vue
index e2016b28..73d1f555 100644
--- a/src/components/Clients/Empty.vue
+++ b/src/components/Clients/Empty.vue
@@ -8,21 +8,7 @@
         modalStore.clientCreateName = '';
       "
     >
-      <svg
-        class="w-4 mr-2"
-        inline
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-        />
-      </svg>
+      <IconsPlus class="w-4 mr-2" />
       <span class="text-sm">{{ $t('newClient') }}</span>
     </button>
   </p>
diff --git a/src/components/Clients/New.vue b/src/components/Clients/New.vue
index 2fedf635..3c737c1c 100644
--- a/src/components/Clients/New.vue
+++ b/src/components/Clients/New.vue
@@ -5,7 +5,7 @@
       modalStore.clientCreateName = '';
     "
   >
-    <IconsPlus />
+    <IconsPlus class="w-4 md:mr-2" />
     <span class="max-md:hidden text-sm">{{ $t('new') }}</span>
   </BaseButton>
 </template>
diff --git a/src/components/Clients/RestoreConfig.vue b/src/components/Clients/RestoreConfig.vue
index 009af79d..96d782b4 100644
--- a/src/components/Clients/RestoreConfig.vue
+++ b/src/components/Clients/RestoreConfig.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseButton as="label" for="inputRC" :title="$t('titleRestoreConfig')">
-    <IconsArrowInf />
+    <IconsArrowInf class="w-4 md:mr-2" />
     <span class="max-md:hidden text-sm">{{ $t('restore') }}</span>
     <input
       id="inputRC"
diff --git a/src/components/icons/ArrowDown.vue b/src/components/icons/ArrowDown.vue
new file mode 100644
index 00000000..a44f7c39
--- /dev/null
+++ b/src/components/icons/ArrowDown.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/ArrowInf.vue b/src/components/icons/ArrowInf.vue
index 4ffd745a..0a204f4a 100644
--- a/src/components/icons/ArrowInf.vue
+++ b/src/components/icons/ArrowInf.vue
@@ -1,7 +1,6 @@
 <template>
   <svg
     inline
-    class="w-4 md:mr-2"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
diff --git a/src/components/icons/ArrowUp.vue b/src/components/icons/ArrowUp.vue
new file mode 100644
index 00000000..37a6ad52
--- /dev/null
+++ b/src/components/icons/ArrowUp.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Avatar.vue b/src/components/icons/Avatar.vue
new file mode 100644
index 00000000..cec5b567
--- /dev/null
+++ b/src/components/icons/Avatar.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Chart.vue b/src/components/icons/Chart.vue
new file mode 100644
index 00000000..2c9d74e8
--- /dev/null
+++ b/src/components/icons/Chart.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    fill="currentColor"
+  >
+    <path
+      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Close.vue b/src/components/icons/Close.vue
new file mode 100644
index 00000000..654ca4d4
--- /dev/null
+++ b/src/components/icons/Close.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Delete.vue b/src/components/icons/Delete.vue
new file mode 100644
index 00000000..43ad5ff2
--- /dev/null
+++ b/src/components/icons/Delete.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Download.vue b/src/components/icons/Download.vue
new file mode 100644
index 00000000..8fdb7643
--- /dev/null
+++ b/src/components/icons/Download.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Edit.vue b/src/components/icons/Edit.vue
new file mode 100644
index 00000000..e13e8453
--- /dev/null
+++ b/src/components/icons/Edit.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/HalfMoon.vue b/src/components/icons/HalfMoon.vue
new file mode 100644
index 00000000..47d87a01
--- /dev/null
+++ b/src/components/icons/HalfMoon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Loading.vue b/src/components/icons/Loading.vue
new file mode 100644
index 00000000..cd55253d
--- /dev/null
+++ b/src/components/icons/Loading.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Logout.vue b/src/components/icons/Logout.vue
new file mode 100644
index 00000000..21656ea4
--- /dev/null
+++ b/src/components/icons/Logout.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Moon.vue b/src/components/icons/Moon.vue
new file mode 100644
index 00000000..4b271121
--- /dev/null
+++ b/src/components/icons/Moon.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Plus.vue b/src/components/icons/Plus.vue
index 047e1082..e3e95b7a 100644
--- a/src/components/icons/Plus.vue
+++ b/src/components/icons/Plus.vue
@@ -1,6 +1,5 @@
 <template>
   <svg
-    class="w-4 md:mr-2"
     inline
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
diff --git a/src/components/icons/QRCode.vue b/src/components/icons/QRCode.vue
new file mode 100644
index 00000000..bca1dd33
--- /dev/null
+++ b/src/components/icons/QRCode.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Stack.vue b/src/components/icons/Stack.vue
index 74cc0f3b..d26b002b 100644
--- a/src/components/icons/Stack.vue
+++ b/src/components/icons/Stack.vue
@@ -1,7 +1,6 @@
 <template>
   <svg
     inline
-    class="w-4 md:mr-2"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
diff --git a/src/components/icons/Sun.vue b/src/components/icons/Sun.vue
new file mode 100644
index 00000000..eccf9d16
--- /dev/null
+++ b/src/components/icons/Sun.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/Warning.vue b/src/components/icons/Warning.vue
new file mode 100644
index 00000000..07a27999
--- /dev/null
+++ b/src/components/icons/Warning.vue
@@ -0,0 +1,17 @@
+<template>
+  <!-- Heroicon name: outline/exclamation -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+    />
+  </svg>
+</template>
diff --git a/src/components/ui/Icon.vue b/src/components/ui/Icon.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index a34d310a..04ec9f6e 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -24,51 +24,14 @@
           :title="$t(`theme.${theme.preference}`)"
           @click="toggleTheme"
         >
-          <svg
-            v-if="theme.preference === 'light'"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-5 h-5"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
-            />
-          </svg>
-          <svg
+          <IconsSun v-if="theme.preference === 'light'" class="w-5 h-5" />
+          <IconsMoon
             v-else-if="theme.preference === 'dark'"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
             class="w-5 h-5 text-neutral-400"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
-            />
-          </svg>
-          <svg
+          />
+          <IconsHalfMoon
             v-else
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 24 24"
             class="w-5 h-5 fill-gray-600 dark:fill-neutral-400"
-          >
-            <path
-              d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z"
-            />
-          </svg>
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"
           />
         </button>
         <!-- Show / hide charts -->
@@ -84,17 +47,9 @@
             class="sr-only peer"
             @change="toggleCharts"
           />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            fill="currentColor"
+          <IconsChart
             class="w-5 h-5 peer fill-gray-400 peer-checked:fill-gray-600 dark:fill-neutral-600 peer-checked:dark:fill-neutral-400 group-hover:dark:fill-neutral-500 transition"
-          >
-            <path
-              d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
-            />
-          </svg>
+          />
         </label>
         <span
           v-if="authStore.requiresPassword && authStore.authenticated"
@@ -102,20 +57,7 @@
           @click="logout"
         >
           {{ $t('logout') }}
-          <svg
-            class="h-3 inline"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-            />
-          </svg>
+          <IconsLogout class="h-3 inline" />
         </span>
       </div>
     </div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 02561f4f..90fa97c8 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -30,26 +30,7 @@
         v-if="clientsStore.clients === null"
         class="text-gray-200 dark:text-red-300 p-5"
       >
-        <svg
-          class="w-5 animate-spin mx-auto"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
+        <IconsLoading class="w-5 animate-spin mx-auto" />
       </div>
     </div>
   </div>
@@ -64,20 +45,7 @@
           class="absolute right-4 top-4 text-gray-600 dark:text-neutral-500 hover:text-gray-800 dark:hover:text-neutral-700"
           @click="modalStore.qrcode = null"
         >
-          <svg
-            class="w-8"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
+          <IconsClose class="w-8" />
         </button>
         <img :src="modalStore.qrcode" />
       </div>
@@ -136,21 +104,7 @@
               <div
                 class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-800 sm:mx-0 sm:h-10 sm:w-10"
               >
-                <svg
-                  class="h-6 w-6 text-white"
-                  inline
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-                  />
-                </svg>
+                <IconsPlus class="h-6 w-6 text-white" />
               </div>
               <div
                 class="flex-grow mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
@@ -260,22 +214,7 @@
               <div
                 class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
               >
-                <!-- Heroicon name: outline/exclamation -->
-                <svg
-                  class="h-6 w-6 text-red-600"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
+                <IconsWarning class="h-6 w-6 text-red-600" />
               </div>
               <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                 <h3
diff --git a/src/pages/login.vue b/src/pages/login.vue
index bc2b0063..ca883602 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -15,18 +15,7 @@
       <div
         class="h-20 w-20 mb-10 mt-5 mx-auto rounded-full bg-red-800 dark:bg-red-800 relative overflow-hidden"
       >
-        <svg
-          class="w-10 h-10 m-5 text-white dark:text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-            clip-rule="evenodd"
-          />
-        </svg>
+        <IconsAvatar class="w-10 h-10 m-5 text-white dark:text-white" />
       </div>
 
       <input
@@ -42,26 +31,7 @@
         v-if="authenticating"
         class="bg-red-800 dark:bg-red-800 w-full rounded shadow py-2 text-sm text-white dark:text-white cursor-not-allowed"
       >
-        <svg
-          class="w-5 animate-spin mx-auto"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
+        <IconsLoading class="w-5 animate-spin mx-auto" />
       </button>
       <input
         v-else
diff --git a/src/server/middleware/auth.ts b/src/server/middleware/auth.ts
index cba58b4e..a3721206 100644
--- a/src/server/middleware/auth.ts
+++ b/src/server/middleware/auth.ts
@@ -3,12 +3,12 @@ export default defineEventHandler(async (event) => {
   const session = await useWGSession(event);
   if (url.pathname === '/login') {
     if (!REQUIRES_PASSWORD || session.data.authenticated) {
-      return sendRedirect(event, '/', 302)
+      return sendRedirect(event, '/', 302);
     }
   }
   if (url.pathname === '/') {
     if (!session.data.authenticated) {
-      return sendRedirect(event, '/login', 302)
+      return sendRedirect(event, '/login', 302);
     }
   }
-});
\ No newline at end of file
+});