diff --git a/web-frontend/package-lock.json b/web-frontend/package-lock.json
index 3fc37a5a..2f2c3f16 100644
--- a/web-frontend/package-lock.json
+++ b/web-frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "web-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@tabler/icons-vue": "^3.23.0",
         "axios": "^1.7.8",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
@@ -699,6 +700,30 @@
         "win32"
       ]
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.23.0.tgz",
+      "integrity": "sha512-Cz+X58jfRm0g/KcupXXuPw5knj671lNR054AnmLXvCjudiQBWI0wZulDDSsqDoGezvBzMTNPQtNcjLkZs82ZxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-vue": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-vue/-/icons-vue-3.23.0.tgz",
+      "integrity": "sha512-py3ZSu80dIIEoSjGqv/4i+OppiMloz0kgBGSH4Px2Me16nS/kgvXxQSwiW6w3eZZM6hoDauxucioxU8tVItvjA==",
+      "dependencies": {
+        "@tabler/icons": "3.23.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
diff --git a/web-frontend/package.json b/web-frontend/package.json
index b4870bc6..8aeaa5e5 100644
--- a/web-frontend/package.json
+++ b/web-frontend/package.json
@@ -12,6 +12,7 @@
     "node": "20.9.0"
   },
   "dependencies": {
+    "@tabler/icons-vue": "^3.23.0",
     "axios": "^1.7.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
diff --git a/web-frontend/src/components/icons/Contact.vue b/web-frontend/src/components/icons/Contact.vue
index 9f9bd291..b4e34076 100644
--- a/web-frontend/src/components/icons/Contact.vue
+++ b/web-frontend/src/components/icons/Contact.vue
@@ -1,17 +1,10 @@
+<script setup>
+import { IconMail } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconMail
+    :stroke="1.5"
     class="icon icon-tabler icon-tabler-mail"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
-    <path d="M3 7l9 6l9 -6" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/Facebook.vue b/web-frontend/src/components/icons/Facebook.vue
index 11c154f6..8ca06d23 100644
--- a/web-frontend/src/components/icons/Facebook.vue
+++ b/web-frontend/src/components/icons/Facebook.vue
@@ -1,16 +1,10 @@
+<script setup>
+import { IconBrandFacebook } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandFacebook
+    :stroke="1.5"
     class="icon icon-tabler icon-tabler-brand-facebook"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/GitHub.vue b/web-frontend/src/components/icons/GitHub.vue
index 46ebdcab..0a4aef7e 100644
--- a/web-frontend/src/components/icons/GitHub.vue
+++ b/web-frontend/src/components/icons/GitHub.vue
@@ -1,16 +1,10 @@
+<script setup>
+import { IconBrandGithub } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandGithub
+    :stroke="1.5"
     class="icon icon-tabler icon-tabler-brand-github"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/Instagram.vue b/web-frontend/src/components/icons/Instagram.vue
index 5d469a2b..89ce8f09 100644
--- a/web-frontend/src/components/icons/Instagram.vue
+++ b/web-frontend/src/components/icons/Instagram.vue
@@ -1,18 +1,10 @@
+<script setup>
+import { IconBrandInstagram } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandInstagram
+    :stroke="1.5"
     class="icon icon-tabler icon-tabler-brand-instagram"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" />
-    <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-    <path d="M16.5 7.5l0 .01" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/LinkedIn.vue b/web-frontend/src/components/icons/LinkedIn.vue
index bcd00a44..460cdbe3 100644
--- a/web-frontend/src/components/icons/LinkedIn.vue
+++ b/web-frontend/src/components/icons/LinkedIn.vue
@@ -1,20 +1,10 @@
+<script setup>
+import { IconBrandLinkedin } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandLinkedin
+    :stroke="1.5"
     class="icon icon-tabler icon-tabler-brand-linkedin"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
-    <path d="M8 11l0 5" />
-    <path d="M8 8l0 .01" />
-    <path d="M12 16l0 -5" />
-    <path d="M16 16v-3a2 2 0 0 0 -4 0" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/X.vue b/web-frontend/src/components/icons/X.vue
index 7292eb1c..507e1cc1 100644
--- a/web-frontend/src/components/icons/X.vue
+++ b/web-frontend/src/components/icons/X.vue
@@ -1,17 +1,10 @@
+<script setup>
+import { IconBrandX } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandX
+    :stroke="1.5"
     class="icon icon-tabler icon-tabler-brand-x"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
-    <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
-  </svg>
+    />
 </template>