From 694c191ebefd284c130e348238975f462ebca944 Mon Sep 17 00:00:00 2001
From: Ibrahim Bougaoua <41789518+ibrahimBougaoua@users.noreply.github.com>
Date: Sat, 5 Oct 2024 16:07:24 +0100
Subject: [PATCH 1/2] Convert some svg icons code to components

---
 resources/js/Shared/Icons/CalendarIcon.vue    | 14 ++++++
 resources/js/Shared/Icons/CallIcon.vue        | 38 ++++++++++++++++
 resources/js/Shared/Icons/EditIcon.vue        | 14 ++++++
 resources/js/Shared/Icons/MapPointerIcon.vue  | 15 +++++++
 resources/js/Shared/Icons/MoonIcon.vue        | 14 ++++++
 resources/js/Shared/Icons/StarIcon.vue        | 31 +++++++++++++
 resources/js/Shared/Icons/WorldIcon.vue       | 14 ++++++
 resources/js/Shared/Modules/Addresses.vue     | 15 +------
 resources/js/Shared/Modules/Calls.vue         | 44 ++-----------------
 .../js/Shared/Modules/ContactInformation.vue  | 15 ++-----
 resources/js/Shared/Modules/ContactName.vue   | 43 ++++--------------
 .../Modules/FeedItems/MoodTrackingEvent.vue   | 31 +++----------
 12 files changed, 162 insertions(+), 126 deletions(-)
 create mode 100644 resources/js/Shared/Icons/CalendarIcon.vue
 create mode 100644 resources/js/Shared/Icons/CallIcon.vue
 create mode 100644 resources/js/Shared/Icons/EditIcon.vue
 create mode 100644 resources/js/Shared/Icons/MapPointerIcon.vue
 create mode 100644 resources/js/Shared/Icons/MoonIcon.vue
 create mode 100644 resources/js/Shared/Icons/StarIcon.vue
 create mode 100644 resources/js/Shared/Icons/WorldIcon.vue

diff --git a/resources/js/Shared/Icons/CalendarIcon.vue b/resources/js/Shared/Icons/CalendarIcon.vue
new file mode 100644
index 00000000000..fd098bd9737
--- /dev/null
+++ b/resources/js/Shared/Icons/CalendarIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="me-1 h-4 w-4 text-gray-400">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/CallIcon.vue b/resources/js/Shared/Icons/CallIcon.vue
new file mode 100644
index 00000000000..c9da92d7203
--- /dev/null
+++ b/resources/js/Shared/Icons/CallIcon.vue
@@ -0,0 +1,38 @@
+<script setup>
+    defineProps({
+        answered: { type: Boolean, default: true },
+        isNormal: { type: Boolean, default: false },
+    });
+</script>
+
+<template>
+    <!-- icon phone cancel -->
+    <svg
+      v-if="!answered && !isNormal"
+      xmlns="http://www.w3.org/2000/svg"
+      class="me-2 h-4 w-4 text-red-500"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
+    </svg>
+
+    <!-- call accepted -->
+    <svg
+      v-if="answered || isNormal"
+      xmlns="http://www.w3.org/2000/svg"
+      :class="`h-4 w-4 ${isNormal ? 'icon-sidebar relative inline' : 'me-2 text-green-600'}`"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/EditIcon.vue b/resources/js/Shared/Icons/EditIcon.vue
new file mode 100644
index 00000000000..682c457f7c6
--- /dev/null
+++ b/resources/js/Shared/Icons/EditIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
+      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>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/MapPointerIcon.vue b/resources/js/Shared/Icons/MapPointerIcon.vue
new file mode 100644
index 00000000000..70d82da8049
--- /dev/null
+++ b/resources/js/Shared/Icons/MapPointerIcon.vue
@@ -0,0 +1,15 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/MoonIcon.vue b/resources/js/Shared/Icons/MoonIcon.vue
new file mode 100644
index 00000000000..cb916752db2
--- /dev/null
+++ b/resources/js/Shared/Icons/MoonIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="me-1 h-4 w-4 text-gray-400">
+        <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21.752 15.002A9.718 9.718 0 0118 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 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/StarIcon.vue b/resources/js/Shared/Icons/StarIcon.vue
new file mode 100644
index 00000000000..7d9be916a81
--- /dev/null
+++ b/resources/js/Shared/Icons/StarIcon.vue
@@ -0,0 +1,31 @@
+<script setup>
+    defineProps({
+        isFavorite: { type: Boolean, default: false },
+    });
+</script>
+
+<template>
+    <svg
+      v-if="isFavorite"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-4 w-4 text-gray-400 hover:cursor-pointer hover:text-yellow-500"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+    </svg>
+
+    <svg
+       v-else
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5 text-yellow-500 hover:cursor-pointer"
+        viewBox="0 0 20 20"
+        fill="currentColor">
+        <path
+          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+      </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/WorldIcon.vue b/resources/js/Shared/Icons/WorldIcon.vue
new file mode 100644
index 00000000000..3d2467fe75f
--- /dev/null
+++ b/resources/js/Shared/Icons/WorldIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Modules/Addresses.vue b/resources/js/Shared/Modules/Addresses.vue
index b49b56e6014..43e17f6dad5 100644
--- a/resources/js/Shared/Modules/Addresses.vue
+++ b/resources/js/Shared/Modules/Addresses.vue
@@ -9,6 +9,7 @@ import Dropdown from '@/Shared/Form/Dropdown.vue';
 import JetConfirmationModal from '@/Components/Jetstream/ConfirmationModal.vue';
 import JetDangerButton from '@/Components/Jetstream/DangerButton.vue';
 import JetSecondaryButton from '@/Components/Jetstream/SecondaryButton.vue';
+import MapPointerIcon from '@/Shared/Icons/MapPointerIcon.vue';
 
 const props = defineProps({
   layoutData: Object,
@@ -150,19 +151,7 @@ const destroy = () => {
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-          </svg>
+          <MapPointerIcon />
         </span>
 
         <span class="font-semibold">
diff --git a/resources/js/Shared/Modules/Calls.vue b/resources/js/Shared/Modules/Calls.vue
index 0d460a1b1c8..c924094dba7 100644
--- a/resources/js/Shared/Modules/Calls.vue
+++ b/resources/js/Shared/Modules/Calls.vue
@@ -10,6 +10,7 @@ import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextArea from '@/Shared/Form/TextArea.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import CallIcon from '@/Shared/Icons/CallIcon.vue';
 
 const props = defineProps({
   data: Object,
@@ -153,18 +154,7 @@ const destroy = (call) => {
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-          </svg>
+          <CallIcon :isNormal="true" />
         </span>
 
         <span class="font-semibold"> {{ $t('Calls') }} </span>
@@ -403,35 +393,7 @@ const destroy = (call) => {
         <div v-if="editedCallId !== call.id" class="flex items-center justify-between p-3">
           <div class="flex items-center">
             <div>
-              <!-- icon phone cancel -->
-              <svg
-                v-if="!call.answered"
-                xmlns="http://www.w3.org/2000/svg"
-                class="me-2 h-4 w-4 text-red-500"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
-              </svg>
-
-              <!-- call accepted -->
-              <svg
-                v-if="call.answered"
-                xmlns="http://www.w3.org/2000/svg"
-                class="me-2 h-4 w-4 text-green-600"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-              </svg>
+              <CallIcon :answered="call.answered" />
             </div>
 
             <span class="me-2 text-sm text-gray-500">{{ call.called_at }}</span>
diff --git a/resources/js/Shared/Modules/ContactInformation.vue b/resources/js/Shared/Modules/ContactInformation.vue
index 0a9f539505b..cff45e37a59 100644
--- a/resources/js/Shared/Modules/ContactInformation.vue
+++ b/resources/js/Shared/Modules/ContactInformation.vue
@@ -4,18 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
+          <WorldIcon />
         </span>
 
         <span class="font-semibold">
@@ -163,6 +152,7 @@ import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import WorldIcon from '@/Shared/Icons/WorldIcon.vue';
 
 export default {
   components: {
@@ -171,6 +161,7 @@ export default {
     TextInput,
     Dropdown,
     Errors,
+    WorldIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/ContactName.vue b/resources/js/Shared/Modules/ContactName.vue
index 45aef2b58fd..129b1f74d9d 100644
--- a/resources/js/Shared/Modules/ContactName.vue
+++ b/resources/js/Shared/Modules/ContactName.vue
@@ -3,18 +3,7 @@
     <div class="mb-1 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Name') }}</div>
       <InertiaLink :href="data.url.edit" class="relative">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-          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>
+        <EditIcon />
       </InertiaLink>
     </div>
 
@@ -30,31 +19,11 @@
         :title="$t('Set as favorite')"
         arrow-point-at-center
         @click.prevent="toggleFavorite">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4 text-gray-400 hover:cursor-pointer hover:text-yellow-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="2">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-        </svg>
+        <StarIcon />
       </a-tooltip>
-
+      
       <!-- if the contact is a favorite -->
-      <svg
-        v-else
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 text-yellow-500 hover:cursor-pointer"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        @click.prevent="toggleFavorite">
-        <path
-          d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-      </svg>
+      <StarIcon :isFavorite="localData.is_favorite" @click.prevent="toggleFavorite" />
     </h1>
   </div>
 </template>
@@ -62,11 +31,15 @@
 <script>
 import { Link } from '@inertiajs/vue3';
 import { Tooltip as ATooltip } from 'ant-design-vue';
+import EditIcon from '@/Shared/Icons/EditIcon.vue';
+import StarIcon from '@/Shared/Icons/StarIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
     ATooltip,
+    EditIcon,
+    StarIcon
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
index a59c48f8ab2..2d241e19b5b 100644
--- a/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
+++ b/resources/js/Shared/Modules/FeedItems/MoodTrackingEvent.vue
@@ -25,19 +25,7 @@
 
           <!-- slept for -->
           <div v-if="data.mood_tracking_event.object.number_of_hours_slept" class="flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="me-1 h-4 w-4 text-gray-400">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M21.752 15.002A9.718 9.718 0 0118 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 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
-            </svg>
-
+            <MoonIcon />
             <span>
               {{
                 $tChoice(
@@ -52,18 +40,7 @@
 
         <!-- date -->
         <div class="flex items-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="me-1 h-4 w-4 text-gray-400">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
-          </svg>
+          <CalendarIcon />
           {{ data.mood_tracking_event.object.rated_at }}
         </div>
       </div>
@@ -79,11 +56,15 @@
 <script>
 import { Link } from '@inertiajs/vue3';
 import Avatar from '@/Shared/Avatar.vue';
+import MoonIcon from '@/Shared/Icons/MoonIcon.vue';
+import CalendarIcon from '@/Shared/Icons/CalendarIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
     Avatar,
+    MoonIcon,
+    CalendarIcon,
   },
 
   props: {

From 725c854a0174b2c52d3696875b9568cde6db5ab5 Mon Sep 17 00:00:00 2001
From: Ibrahim Bougaoua <41789518+ibrahimBougaoua@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:47:25 +0100
Subject: [PATCH 2/2] [Shared Folder] Complete the rest of the icons

---
 .vscode/settings.json                         |   1 +
 resources/js/Shared/ContactCard.vue           |  29 +--
 resources/js/Shared/Form/ContactSelector.vue  |  14 +-
 resources/js/Shared/Form/PrettyButton.vue     |  56 ++----
 resources/js/Shared/Form/PrettyLink.vue       |  44 ++---
 resources/js/Shared/Help.vue                  |   9 +-
 resources/js/Shared/HoverMenu.vue             |   9 +-
 resources/js/Shared/Icons/ArrowIcon.vue       |  60 +++++++
 resources/js/Shared/Icons/BadgeIcon.vue       |  14 ++
 resources/js/Shared/Icons/BallIcon.vue        |  14 ++
 resources/js/Shared/Icons/CalendarIcon.vue    |  21 +++
 resources/js/Shared/Icons/CheckedIcon.vue     |  10 ++
 resources/js/Shared/Icons/ChevronIcon.vue     |  50 ++++++
 resources/js/Shared/Icons/ClockIcon.vue       |  35 ++++
 resources/js/Shared/Icons/DarkModeIcon.vue    | 105 +++++++++++
 resources/js/Shared/Icons/DatabaseIcon.vue    |  14 ++
 resources/js/Shared/Icons/DateIcon.vue        |  14 ++
 resources/js/Shared/Icons/DollarIcon.vue      |  14 ++
 resources/js/Shared/Icons/DoorIcon.vue        |  35 ++++
 resources/js/Shared/Icons/FaceIcon.vue        |  52 ++++++
 resources/js/Shared/Icons/FireIcon.vue        |  18 ++
 resources/js/Shared/Icons/LampIcon.vue        |  14 ++
 resources/js/Shared/Icons/MenuIcon.vue        |   9 +
 resources/js/Shared/Icons/MinusIcon.vue       |  11 ++
 resources/js/Shared/Icons/NoteIcon.vue        |  25 +++
 resources/js/Shared/Icons/PeopleIcon.vue      |  14 ++
 resources/js/Shared/Icons/PhotoIcon.vue       |  14 ++
 resources/js/Shared/Icons/PlusIcon.vue        |  10 ++
 resources/js/Shared/Icons/RefreshIcon.vue     |  14 ++
 resources/js/Shared/Icons/ReminderIcon.vue    |  16 ++
 resources/js/Shared/Icons/SearchIcon.vue      |  14 ++
 resources/js/Shared/Icons/SettingIcon.vue     |  19 ++
 resources/js/Shared/Icons/TagIcon.vue         |  14 ++
 resources/js/Shared/Icons/TaskIcon.vue        |  14 ++
 resources/js/Shared/Icons/TwoPinMapIcon.vue   |  21 +++
 resources/js/Shared/Icons/ValideIcon.vue      |  14 ++
 resources/js/Shared/Layout.vue                | 166 ++----------------
 .../js/Shared/Modules/CreateLifeEvent.vue     |  14 +-
 resources/js/Shared/Modules/Documents.vue     |  17 +-
 resources/js/Shared/Modules/Feed.vue          |  15 +-
 resources/js/Shared/Modules/GenderPronoun.vue |  27 +--
 resources/js/Shared/Modules/Goals.vue         |  43 +----
 resources/js/Shared/Modules/Groups.vue        |  15 +-
 .../js/Shared/Modules/ImportantDates.vue      |  14 +-
 .../js/Shared/Modules/JobInformation.vue      |  15 +-
 resources/js/Shared/Modules/Labels.vue        |  27 +--
 resources/js/Shared/Modules/LifeEvent.vue     | 104 ++---------
 resources/js/Shared/Modules/Loans.vue         |  25 +--
 resources/js/Shared/Modules/Notes.vue         |  41 +----
 resources/js/Shared/Modules/Pets.vue          |  14 +-
 resources/js/Shared/Modules/Photos.vue        |  15 +-
 resources/js/Shared/Modules/Posts.vue         |  28 +--
 resources/js/Shared/Modules/QuickFacts.vue    |  53 +-----
 resources/js/Shared/Modules/Relationships.vue |  15 +-
 resources/js/Shared/Modules/Religion.vue      |  14 +-
 resources/js/Shared/Modules/Reminders.vue     |  30 +---
 resources/js/Shared/Modules/Tasks.vue         |  41 +----
 57 files changed, 822 insertions(+), 752 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 resources/js/Shared/Icons/ArrowIcon.vue
 create mode 100644 resources/js/Shared/Icons/BadgeIcon.vue
 create mode 100644 resources/js/Shared/Icons/BallIcon.vue
 create mode 100644 resources/js/Shared/Icons/CheckedIcon.vue
 create mode 100644 resources/js/Shared/Icons/ChevronIcon.vue
 create mode 100644 resources/js/Shared/Icons/ClockIcon.vue
 create mode 100644 resources/js/Shared/Icons/DarkModeIcon.vue
 create mode 100644 resources/js/Shared/Icons/DatabaseIcon.vue
 create mode 100644 resources/js/Shared/Icons/DateIcon.vue
 create mode 100644 resources/js/Shared/Icons/DollarIcon.vue
 create mode 100644 resources/js/Shared/Icons/DoorIcon.vue
 create mode 100644 resources/js/Shared/Icons/FaceIcon.vue
 create mode 100644 resources/js/Shared/Icons/FireIcon.vue
 create mode 100644 resources/js/Shared/Icons/LampIcon.vue
 create mode 100644 resources/js/Shared/Icons/MenuIcon.vue
 create mode 100644 resources/js/Shared/Icons/MinusIcon.vue
 create mode 100644 resources/js/Shared/Icons/NoteIcon.vue
 create mode 100644 resources/js/Shared/Icons/PeopleIcon.vue
 create mode 100644 resources/js/Shared/Icons/PhotoIcon.vue
 create mode 100644 resources/js/Shared/Icons/PlusIcon.vue
 create mode 100644 resources/js/Shared/Icons/RefreshIcon.vue
 create mode 100644 resources/js/Shared/Icons/ReminderIcon.vue
 create mode 100644 resources/js/Shared/Icons/SearchIcon.vue
 create mode 100644 resources/js/Shared/Icons/SettingIcon.vue
 create mode 100644 resources/js/Shared/Icons/TagIcon.vue
 create mode 100644 resources/js/Shared/Icons/TaskIcon.vue
 create mode 100644 resources/js/Shared/Icons/TwoPinMapIcon.vue
 create mode 100644 resources/js/Shared/Icons/ValideIcon.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000000..9e26dfeeb6e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/resources/js/Shared/ContactCard.vue b/resources/js/Shared/ContactCard.vue
index d35f1e018cb..37e4eb47b95 100644
--- a/resources/js/Shared/ContactCard.vue
+++ b/resources/js/Shared/ContactCard.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
 import { Popover as APopover } from 'ant-design-vue';
+import CalendarIcon from '@/Shared/Icons/CalendarIcon.vue';
+import PeopleIcon from '@/Shared/Icons/PeopleIcon.vue';
 
 defineProps({
   contact: Object,
@@ -33,18 +35,8 @@ defineProps({
 
             <!-- birthdate -->
             <p class="flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-1 h-4 w-4 text-gray-400">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-              </svg>
+
+              <CalendarIcon />
 
               <span v-if="contact.age">{{ contact.age }}</span>
               <span v-else class="text-sm italic text-gray-600">{{ $t('Unknown') }}</span>
@@ -52,18 +44,7 @@ defineProps({
 
             <!-- groups -->
             <div v-if="contact.groups.length > 0" class="mt-2 flex items-start">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-2 h-4 w-4 text-gray-400">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
-              </svg>
+              <PeopleIcon />
 
               <ul>
                 <li v-for="group in contact.groups" :key="group.id" class="group-list-item">
diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
index 2d67f158eec..93de7d969e7 100644
--- a/resources/js/Shared/Form/ContactSelector.vue
+++ b/resources/js/Shared/Form/ContactSelector.vue
@@ -3,6 +3,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { Link, useForm } from '@inertiajs/vue3';
 import { trans } from 'laravel-vue-i18n';
 import Errors from '@/Shared/Form/Errors.vue';
+import SearchIcon from '@/Shared/Icons/SearchIcon.vue';
 
 const props = defineProps({
   modelValue: {
@@ -174,18 +175,7 @@ const search = _.debounce(() => {
     <!-- mode to add a contact -->
     <div v-if="addContactMode">
       <div class="relative mb-3">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="absolute start-2 top-[13px] h-4 w-4 text-gray-400"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
+        <SearchIcon />
 
         <input
           ref="searchInput"
diff --git a/resources/js/Shared/Form/PrettyButton.vue b/resources/js/Shared/Form/PrettyButton.vue
index 788afea1f21..f9d6ba228fe 100644
--- a/resources/js/Shared/Form/PrettyButton.vue
+++ b/resources/js/Shared/Form/PrettyButton.vue
@@ -5,59 +5,33 @@
     type="submit">
     <span v-if="state === 'loading'"> {{ $t('Loading…') }} </span>
 
-    <!-- + icon -->
-    <svg
-      v-if="icon === 'plus' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative me-1 inline h-5 w-5"
-      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>
+    <PlusIcon v-if="icon === 'plus' && state !== 'loading'" />
 
-    <!-- check icon -->
-    <svg
-      v-if="icon === 'check' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative me-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-    </svg>
+    <CheckedIcon v-if="icon === 'check' && state !== 'loading'" />
 
-    <!-- minus icon -->
-    <svg
-      v-if="icon === 'minus' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative mx-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
+    <MinusIcon v-if="icon === 'minus' && state !== 'loading'" />
 
     <span v-if="state !== 'loading'">
       {{ text }}
     </span>
 
-    <!-- arrow icon -->
-    <svg
-      v-if="icon === 'arrow' && state !== 'loading'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative mx-1 inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-    </svg>
+    <ArrowIcon :type="'right'" :size="'big'" v-if="icon === 'arrow' && state !== 'loading'" />
   </button>
 </template>
 
 <script>
+import PlusIcon from '@/Shared/Icons/PlusIcon.vue';
+import CheckedIcon from '@/Shared/Icons/CheckedIcon.vue';
+import MinusIcon from '@/Shared/Icons/MinusIcon.vue';
+import ArrowIcon from '@/Shared/Icons/ArrowIcon.vue';
+
 export default {
+  components: {
+    PlusIcon,
+    CheckedIcon,
+    MinusIcon,
+    ArrowIcon,
+  },
   props: {
     text: {
       type: String,
diff --git a/resources/js/Shared/Form/PrettyLink.vue b/resources/js/Shared/Form/PrettyLink.vue
index 39c03de4caf..7ad0b8821d6 100644
--- a/resources/js/Shared/Form/PrettyLink.vue
+++ b/resources/js/Shared/Form/PrettyLink.vue
@@ -3,42 +3,12 @@
     :class="'dark:box-s relative border-zinc-900 bg-white text-sm dark:border-zinc-100 dark:bg-gray-800 dark:text-gray-100'"
     :href="href"
     preserve-scroll>
-    <!-- + icon -->
-    <svg
-      v-if="icon === 'plus'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5"
-      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>
+    
+    <PlusIcon v-if="icon === 'plus'" />
 
-    <!-- check icon -->
-    <svg
-      v-else-if="icon === 'check'"
-      xmlns="http://www.w3.org/2000/svg"
-      class="icon relative inline h-5 w-5"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-    </svg>
+    <CheckedIcon v-else-if="icon === 'check'" />
 
-    <!-- door icon -->
-    <svg
-      v-else-if="icon === 'exit'"
-      class="icon relative me-1 inline h-5 w-5"
-      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="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
-    </svg>
+    <DoorIcon :type="'entry'" v-else-if="icon === 'exit'" />
 
     <span>
       {{ text }}
@@ -48,10 +18,16 @@
 
 <script>
 import { Link } from '@inertiajs/vue3';
+import PlusIcon from '@/Shared/Icons/PlusIcon.vue';
+import CheckedIcon from '@/Shared/Icons/CheckedIcon.vue';
+import DoorIcon from '@/Shared/Icons/DoorIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
+    PlusIcon,
+    CheckedIcon,
+    DoorIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Help.vue b/resources/js/Shared/Help.vue
index 0392422a0c7..330d8180c9d 100644
--- a/resources/js/Shared/Help.vue
+++ b/resources/js/Shared/Help.vue
@@ -2,6 +2,7 @@
 import { usePage } from '@inertiajs/vue3';
 import { Tooltip } from 'ant-design-vue';
 import { computed } from 'vue';
+import FaceIcon from '@/Shared/Icons/FaceIcon.vue';
 
 const props = defineProps({
   url: String,
@@ -26,13 +27,7 @@ const finalURL = computed(() => {
     lang="en"
     rel="noopener noreferrer">
     <Tooltip placement="topLeft" :title="$t('This link will open in a new tab')" arrow-point-at-center>
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M15.6691 7.06514L14.5891 5.72514C14.4158 5.50263 14.3087 5.23575 14.2801 4.95514L14.0901 3.25714C14.0516 2.91784 13.8993 2.60161 13.6579 2.36005C13.4165 2.1185 13.1004 1.9659 12.7611 1.92714L11.0621 1.73714C10.7621 1.70714 10.5021 1.57814 10.2821 1.40814L8.94414 0.32914C8.67755 0.116069 8.34642 0 8.00514 0C7.66386 0 7.33273 0.116069 7.06614 0.32914L5.72614 1.40914C5.50374 1.58285 5.23686 1.69029 4.95614 1.71914L3.25814 1.90914C2.55814 1.98914 2.00814 2.53914 1.92814 3.23814L1.73814 4.93714C1.70814 5.23714 1.57914 5.49714 1.40914 5.71714L0.32914 7.05414C0.116069 7.32073 0 7.65186 0 7.99314C0 8.33442 0.116069 8.66555 0.32914 8.93214L1.40914 10.2721C1.57914 10.4921 1.68914 10.7521 1.71914 11.0421L1.90914 12.7401C1.98914 13.4401 2.53914 13.9901 3.23814 14.0701L4.93714 14.2601C5.23714 14.2901 5.49714 14.4191 5.71714 14.5891L7.05614 15.6691C7.60614 16.1081 8.38514 16.1081 8.93414 15.6691L10.2741 14.5891C10.4941 14.4191 10.7541 14.3091 11.0441 14.2791L12.7421 14.0891C13.4421 14.0091 13.9921 13.4591 14.0721 12.7601L14.2621 11.0611C14.2921 10.7611 14.4211 10.5011 14.5911 10.2811L15.6711 8.94214C15.8842 8.67555 16.0003 8.34442 16.0003 8.00314C16.0003 7.66186 15.8842 7.33073 15.6711 7.06414L15.6691 7.06514ZM8.99914 11.4991C8.99914 11.7791 8.77914 11.9991 8.49914 11.9991H7.49914C7.22914 11.9991 6.99914 11.7791 6.99914 11.4991V10.4991C6.99914 10.2191 7.22914 9.99914 7.49914 9.99914H8.49914C8.77914 9.99914 8.99914 10.2191 8.99914 10.4991V11.4991ZM10.5591 6.60914C10.4991 6.77914 10.3891 6.93914 10.2591 7.07914C10.1291 7.23914 10.1191 7.26914 9.92914 7.45914C9.76914 7.62914 9.61914 7.75914 9.40914 7.90914C9.29914 7.99914 9.20914 8.09914 9.12914 8.17914C9.04914 8.25914 8.98914 8.34914 8.93914 8.44914C8.88914 8.54914 8.85914 8.63914 8.82914 8.74914C8.79914 8.85914 8.79914 8.87914 8.79914 8.99914H7.12914C7.12914 8.77914 7.12914 8.68914 7.15914 8.51914C7.18914 8.32914 7.23914 8.15914 7.29914 7.99914C7.35914 7.85914 7.43914 7.71914 7.54914 7.57914C7.65914 7.44914 7.77914 7.32914 7.95914 7.19914C8.22914 7.00914 8.31914 6.89914 8.43914 6.67914C8.55914 6.45914 8.63914 6.29914 8.63914 6.08914C8.63914 5.81914 8.57914 5.63914 8.43914 5.50914C8.30914 5.37914 8.12914 5.31914 7.85914 5.31914C7.76914 5.31914 7.66914 5.33914 7.55914 5.36914C7.44914 5.39914 7.38914 5.45914 7.30914 5.52914C7.22914 5.59914 7.16914 5.63914 7.10914 5.72914C7.04555 5.80813 7.01348 5.90789 7.01914 6.00914H5.01914C5.01914 5.62914 5.14914 5.44914 5.28914 5.17914C5.44914 4.90914 5.64914 4.67914 5.89914 4.50914C6.14914 4.33914 6.44914 4.20914 6.77914 4.12914C7.10914 4.04914 7.47914 3.99914 7.86914 3.99914C8.30914 3.99914 8.69914 4.04914 9.03914 4.12914C9.37914 4.21914 9.66914 4.34914 9.91914 4.51914C10.1491 4.68914 10.3291 4.89914 10.4691 5.14914C10.5991 5.39914 10.6591 5.69914 10.6591 6.02914C10.6591 6.24914 10.6591 6.44914 10.5791 6.61914L10.5591 6.60914Z"
-          fill="#96A3BD" />
-      </svg>
+      <FaceIcon :type="'question'" />
     </Tooltip>
   </a>
 </template>
diff --git a/resources/js/Shared/HoverMenu.vue b/resources/js/Shared/HoverMenu.vue
index f375434c646..6ed5a38d0a1 100644
--- a/resources/js/Shared/HoverMenu.vue
+++ b/resources/js/Shared/HoverMenu.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
+import MenuIcon from '@/Shared/Icons/MenuIcon.vue';
 
 defineEmits(['edit', 'delete']);
 defineProps({
@@ -11,13 +12,7 @@ defineProps({
 <template>
   <Dropdown>
     <a class="ant-dropdown-link cursor-pointer" @click.prevent>
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-      </svg>
+      <MenuIcon />
     </a>
     <template #overlay>
       <Menu :theme="isDark() ? 'dark' : 'light'">
diff --git a/resources/js/Shared/Icons/ArrowIcon.vue b/resources/js/Shared/Icons/ArrowIcon.vue
new file mode 100644
index 00000000000..73fcc345ead
--- /dev/null
+++ b/resources/js/Shared/Icons/ArrowIcon.vue
@@ -0,0 +1,60 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "right" },
+        size: { type: String, default: "small" },
+    });
+</script>
+
+<template>
+    
+    <svg
+      v-if="type == 'right' && size == 'small'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="h-6 w-6 text-gray-600">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
+    </svg>
+
+    <svg
+      v-if="type == 'right' && size == 'big'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+    </svg>
+
+    <!-- replace it with left icon svg... -->
+    <svg
+      v-if="type == 'left' && size == 'small'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="h-6 w-6 text-gray-600">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
+    </svg>
+
+    <svg
+      v-if="type == 'left' && size == 'big'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/BadgeIcon.vue b/resources/js/Shared/Icons/BadgeIcon.vue
new file mode 100644
index 00000000000..cb346771207
--- /dev/null
+++ b/resources/js/Shared/Icons/BadgeIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/BallIcon.vue b/resources/js/Shared/Icons/BallIcon.vue
new file mode 100644
index 00000000000..ddbdfb0e37c
--- /dev/null
+++ b/resources/js/Shared/Icons/BallIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/CalendarIcon.vue b/resources/js/Shared/Icons/CalendarIcon.vue
index fd098bd9737..649d48e3f16 100644
--- a/resources/js/Shared/Icons/CalendarIcon.vue
+++ b/resources/js/Shared/Icons/CalendarIcon.vue
@@ -1,5 +1,26 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "filled" },
+    });
+</script>
+
 <template>
     <svg
+      v-if="type == 'filled'"
+      class="ms-2 h-4 w-4"
+      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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
+    </svg>
+
+    <svg
+      v-else
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/resources/js/Shared/Icons/CheckedIcon.vue b/resources/js/Shared/Icons/CheckedIcon.vue
new file mode 100644
index 00000000000..e7b19015957
--- /dev/null
+++ b/resources/js/Shared/Icons/CheckedIcon.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6 text-green-700"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/ChevronIcon.vue b/resources/js/Shared/Icons/ChevronIcon.vue
new file mode 100644
index 00000000000..15af8ad9527
--- /dev/null
+++ b/resources/js/Shared/Icons/ChevronIcon.vue
@@ -0,0 +1,50 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "down"},
+    });
+</script>
+
+<template>
+    <svg
+      v-if="type == 'down'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="me-2 h-4 w-4 text-gray-400">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+    </svg>
+
+    <svg
+      v-if="type == 'up'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="me-2 h-4 w-4 text-gray-400">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+    </svg>
+
+    <svg
+      v-if="type == 'right'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="relative inline h-3 w-3"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </svg>
+
+    <!-- replace it with left icon svg... -->
+    <svg
+      v-if="type == 'left'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="relative inline h-3 w-3"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/ClockIcon.vue b/resources/js/Shared/Icons/ClockIcon.vue
new file mode 100644
index 00000000000..320def3e62b
--- /dev/null
+++ b/resources/js/Shared/Icons/ClockIcon.vue
@@ -0,0 +1,35 @@
+<script setup>
+    defineProps({
+        time: { type: String, default: "three"},
+    });
+</script>
+
+<template>
+    <svg
+      v-if="time == 'three'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="me-2 h-4 w-4 text-gray-500">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+
+    <svg
+      v-if="time == 'four'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-note relative inline h-3 w-3 text-gray-400"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/DarkModeIcon.vue b/resources/js/Shared/Icons/DarkModeIcon.vue
new file mode 100644
index 00000000000..f7dfc8cf8ea
--- /dev/null
+++ b/resources/js/Shared/Icons/DarkModeIcon.vue
@@ -0,0 +1,105 @@
+<script setup>
+    defineProps({
+        checked: { type: Boolean, default: false },
+    });
+</script>
+
+<template>
+    <svg
+      v-if="!checked"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="15"
+      width="15">
+      <g>
+        <circle
+          cx="7"
+          cy="7"
+          r="2.5"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></circle>
+        <line
+          x1="7"
+          y1="0.5"
+          x2="7"
+          y2="2.5"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="2.4"
+          y1="2.4"
+          x2="3.82"
+          y2="3.82"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="0.5"
+          y1="7"
+          x2="2.5"
+          y2="7"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="2.4"
+          y1="11.6"
+          x2="3.82"
+          y2="10.18"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="7"
+          y1="13.5"
+          x2="7"
+          y2="11.5"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="11.6"
+          y1="11.6"
+          x2="10.18"
+          y2="10.18"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="13.5"
+          y1="7"
+          x2="11.5"
+          y2="7"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+        <line
+          x1="11.6"
+          y1="2.4"
+          x2="10.18"
+          y2="3.82"
+          fill="none"
+          stroke="#4B5563"
+          stroke-linecap="round"
+          stroke-linejoin="round"></line>
+      </g>
+    </svg>
+    <svg v-if="checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" height="15" width="15">
+      <path
+        d="M12,10.48A6.55,6.55,0,0,1,6.46.5a6.55,6.55,0,0,0,1,13A6.46,6.46,0,0,0,13,10.39,6.79,6.79,0,0,1,12,10.48Z"
+        fill="none"
+        stroke="#e5e7eb"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/DatabaseIcon.vue b/resources/js/Shared/Icons/DatabaseIcon.vue
new file mode 100644
index 00000000000..2b59b14a7a9
--- /dev/null
+++ b/resources/js/Shared/Icons/DatabaseIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/DateIcon.vue b/resources/js/Shared/Icons/DateIcon.vue
new file mode 100644
index 00000000000..41d260fcb24
--- /dev/null
+++ b/resources/js/Shared/Icons/DateIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="me-1 h-3 w-3"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/DollarIcon.vue b/resources/js/Shared/Icons/DollarIcon.vue
new file mode 100644
index 00000000000..8d24edb6b91
--- /dev/null
+++ b/resources/js/Shared/Icons/DollarIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/DoorIcon.vue b/resources/js/Shared/Icons/DoorIcon.vue
new file mode 100644
index 00000000000..c04fbd1373a
--- /dev/null
+++ b/resources/js/Shared/Icons/DoorIcon.vue
@@ -0,0 +1,35 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "exit"},
+    });
+</script>
+
+<template>
+    <svg
+      v-if="type == 'exit'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="me-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
+      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>
+
+    <svg
+      v-if="type == 'entry'"
+      class="icon relative me-1 inline h-5 w-5"
+      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="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/FaceIcon.vue b/resources/js/Shared/Icons/FaceIcon.vue
new file mode 100644
index 00000000000..b6a85f32a0f
--- /dev/null
+++ b/resources/js/Shared/Icons/FaceIcon.vue
@@ -0,0 +1,52 @@
+<script setup>
+    defineProps({
+        type: { type: String, default: "happy"},
+    });
+</script>
+
+<template>
+    <svg
+      v-if="type == 'happy'"
+      class="z-50"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_522_316)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M1.6875 9C1.6875 7.0606 2.45792 5.20064 3.82928 3.82928C5.20064 2.45792 7.0606 1.6875 9 1.6875C10.9394 1.6875 12.7994 2.45792 14.1707 3.82928C15.5421 5.20064 16.3125 7.0606 16.3125 9C16.3125 10.9394 15.5421 12.7994 14.1707 14.1707C12.7994 15.5421 10.9394 16.3125 9 16.3125C7.0606 16.3125 5.20064 15.5421 3.82928 14.1707C2.45792 12.7994 1.6875 10.9394 1.6875 9ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0ZM5.625 9C5.92337 9 6.20952 8.88147 6.4205 8.6705C6.63147 8.45952 6.75 8.17337 6.75 7.875C6.75 7.57663 6.63147 7.29048 6.4205 7.0795C6.20952 6.86853 5.92337 6.75 5.625 6.75C5.32663 6.75 5.04048 6.86853 4.8295 7.0795C4.61853 7.29048 4.5 7.57663 4.5 7.875C4.5 8.17337 4.61853 8.45952 4.8295 8.6705C5.04048 8.88147 5.32663 9 5.625 9ZM13.5 7.875C13.5 8.17337 13.3815 8.45952 13.1705 8.6705C12.9595 8.88147 12.6734 9 12.375 9C12.0766 9 11.7905 8.88147 11.5795 8.6705C11.3685 8.45952 11.25 8.17337 11.25 7.875C11.25 7.57663 11.3685 7.29048 11.5795 7.0795C11.7905 6.86853 12.0766 6.75 12.375 6.75C12.6734 6.75 12.9595 6.86853 13.1705 7.0795C13.3815 7.29048 13.5 7.57663 13.5 7.875ZM5.985 10.8405C6.16651 10.7134 6.39072 10.6628 6.60922 10.6997C6.82771 10.7365 7.02294 10.8578 7.15275 11.0374L7.16062 11.0475C7.2765 11.1802 7.40813 11.2972 7.55438 11.3962C7.85138 11.5965 8.32275 11.8125 9 11.8125C9.67725 11.8125 10.1475 11.5965 10.4456 11.3951C10.5919 11.2961 10.7235 11.1791 10.8394 11.0464L10.8472 11.0374C10.9115 10.9471 10.9929 10.8704 11.0868 10.8116C11.1808 10.7528 11.2853 10.713 11.3946 10.6947C11.5039 10.6763 11.6157 10.6796 11.7237 10.7044C11.8317 10.7293 11.9337 10.7751 12.024 10.8394C12.1143 10.9036 12.191 10.9851 12.2498 11.079C12.3086 11.1729 12.3483 11.2775 12.3667 11.3867C12.3851 11.496 12.3818 11.6078 12.357 11.7158C12.3321 11.8238 12.2863 11.9259 12.222 12.0161L11.5312 11.5312C12.222 12.015 12.222 12.0161 12.2209 12.0161V12.0173L12.2198 12.0195L12.2175 12.0229L12.2119 12.0308L12.1961 12.0521C12.1329 12.1368 12.0637 12.2169 11.9891 12.2917C11.8091 12.4785 11.6089 12.6473 11.3929 12.7924C10.6841 13.2626 9.85163 13.5101 9 13.5C7.93575 13.5 7.1415 13.1535 6.60825 12.7913C6.30535 12.5856 6.03433 12.3366 5.80387 12.0521L5.78813 12.0296L5.7825 12.0229L5.78025 12.0195V12.0173H5.77913L6.46875 11.5312L5.778 12.015C5.64971 11.8319 5.59933 11.6054 5.63793 11.3852C5.67653 11.1649 5.80095 10.969 5.98387 10.8405H5.985Z"
+          fill="#CFCFCF" />
+      </g>
+      <defs>
+        <clipPath id="clip0_522_316">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+
+    <svg
+      v-if="type == 'dog'"
+      class="icon-sidebar relative inline h-4 w-4"
+      style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M927.3 453c-21.1-55.3-51.7-109.1-88.4-155.5-41.1-51.9-88.3-93.2-140.1-122.6-58.6-33.2-121.3-50.1-186.4-50.1-65.9 0-129.2 16.7-188.1 49.7-52.2 29.2-99.5 70.3-140.7 122-36.7 46.1-67.3 99.7-88.3 154.9-20.3 53.1-31 105.4-31 151.1 0 41.7 9.2 76.8 26.5 101.5 19.6 28 49.4 42.8 86.1 42.8 27.4 0 51-6.6 69.7-18.6 24.1 51.8 75.7 85 132.9 85 17.8 0 34.9-3.2 50.7-9.1v14.1c0 44.1 35.9 80 80 80s80-35.9 80-80v-14.8c16.3 6.3 33.9 9.8 52.3 9.8 57.5 0 109.1-33.6 133-86 18.9 12.6 43 19.5 71.1 19.5 36.4 0 66-14.6 85.4-42.2 17.2-24.4 26.2-59.1 26.2-100.3 0.2-45.5-10.6-97.9-30.9-151.2zM560.2 818.4c0 27.6-22.4 50-50 50s-50-22.4-50-50V789c13.8-9.2 26-20.7 36-33.9v45.8c0 8.3 6.7 15 15 15s15-6.7 15-15v-45.7c9.5 12.6 21 23.6 34 32.5v30.7z m-49.1-167.6h-0.2l-73-40.8 20.8-29.8h104.4l20.8 29.8-72.8 40.8z m396.5 36.6c-13.8 19.6-34.2 29.5-60.9 29.5-26.1 0-47.8-7.2-62.9-20.9-15.7-14.2-23.6-34.7-23.6-60.8 0-57.3-0.4-130.2-0.7-183.5-0.2-34.3-0.4-61.4-0.4-75 0-8.3-6.7-15-15-15s-15 6.7-15 15c0 13.7 0.2 40.8 0.4 75.1 0.3 53.2 0.7 126.2 0.7 183.3 0 28.5 8.1 52.8 22.7 71.4-1.2 1.3-2.2 2.8-2.9 4.5-18.1 43.9-60.3 72.3-107.4 72.3-60.6 0-110.5-47.1-115.9-107l74.1-41.5c6.8-3.8 11.7-10.4 13.5-18 1.7-7.6 0.2-15.6-4.3-22L587 562c-5.2-7.4-13.7-11.8-22.7-11.8H457.6c-9.1 0-17.6 4.4-22.7 11.8l-23 32.9c-4.5 6.4-6 14.4-4.3 22 1.7 7.6 6.6 14.2 13.4 18l74.7 41.9c-5.5 59.7-55.5 106.6-116.2 106.6-47 0-89.2-28.2-107.5-71.8-0.6-1.4-1.4-2.7-2.3-3.8 15.3-18.7 23.7-43.4 23.7-72.6 0-57.2 0.4-130.1 0.7-183.3 0.2-34.3 0.4-61.5 0.4-75.1 0-8.3-6.7-15-15-15s-15 6.7-15 15c0 13.6-0.2 40.7-0.4 75-0.3 53.3-0.7 126.2-0.7 183.5 0 26.1-8 46.6-23.6 60.8-15.1 13.7-36.8 20.9-62.9 20.9-26.9 0-47.6-10.1-61.5-30-13.8-19.6-21-48.8-21-84.3 0-42.2 10-90.7 29-140.5 20-52.4 48.9-103.1 83.8-146.9 38.7-48.7 83.1-87.2 131.9-114.5 54.4-30.5 112.7-45.9 173.4-45.9 59.9 0 117.6 15.5 171.6 46.2 48.5 27.5 92.7 66.2 131.4 115.1 68.7 86.8 113 199.9 113 288.2-0.1 35-7.3 63.7-20.9 83z" />
+      <path d="M383.2 480.9m-25 0a25 25 0 1 0 50 0 25 25 0 1 0-50 0Z" />
+      <path d="M639.2 480.9m-25 0a25 25 0 1 0 50 0 25 25 0 1 0-50 0Z" />
+    </svg>
+
+    <svg
+      v-if="type == 'question'" 
+      width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M15.6691 7.06514L14.5891 5.72514C14.4158 5.50263 14.3087 5.23575 14.2801 4.95514L14.0901 3.25714C14.0516 2.91784 13.8993 2.60161 13.6579 2.36005C13.4165 2.1185 13.1004 1.9659 12.7611 1.92714L11.0621 1.73714C10.7621 1.70714 10.5021 1.57814 10.2821 1.40814L8.94414 0.32914C8.67755 0.116069 8.34642 0 8.00514 0C7.66386 0 7.33273 0.116069 7.06614 0.32914L5.72614 1.40914C5.50374 1.58285 5.23686 1.69029 4.95614 1.71914L3.25814 1.90914C2.55814 1.98914 2.00814 2.53914 1.92814 3.23814L1.73814 4.93714C1.70814 5.23714 1.57914 5.49714 1.40914 5.71714L0.32914 7.05414C0.116069 7.32073 0 7.65186 0 7.99314C0 8.33442 0.116069 8.66555 0.32914 8.93214L1.40914 10.2721C1.57914 10.4921 1.68914 10.7521 1.71914 11.0421L1.90914 12.7401C1.98914 13.4401 2.53914 13.9901 3.23814 14.0701L4.93714 14.2601C5.23714 14.2901 5.49714 14.4191 5.71714 14.5891L7.05614 15.6691C7.60614 16.1081 8.38514 16.1081 8.93414 15.6691L10.2741 14.5891C10.4941 14.4191 10.7541 14.3091 11.0441 14.2791L12.7421 14.0891C13.4421 14.0091 13.9921 13.4591 14.0721 12.7601L14.2621 11.0611C14.2921 10.7611 14.4211 10.5011 14.5911 10.2811L15.6711 8.94214C15.8842 8.67555 16.0003 8.34442 16.0003 8.00314C16.0003 7.66186 15.8842 7.33073 15.6711 7.06414L15.6691 7.06514ZM8.99914 11.4991C8.99914 11.7791 8.77914 11.9991 8.49914 11.9991H7.49914C7.22914 11.9991 6.99914 11.7791 6.99914 11.4991V10.4991C6.99914 10.2191 7.22914 9.99914 7.49914 9.99914H8.49914C8.77914 9.99914 8.99914 10.2191 8.99914 10.4991V11.4991ZM10.5591 6.60914C10.4991 6.77914 10.3891 6.93914 10.2591 7.07914C10.1291 7.23914 10.1191 7.26914 9.92914 7.45914C9.76914 7.62914 9.61914 7.75914 9.40914 7.90914C9.29914 7.99914 9.20914 8.09914 9.12914 8.17914C9.04914 8.25914 8.98914 8.34914 8.93914 8.44914C8.88914 8.54914 8.85914 8.63914 8.82914 8.74914C8.79914 8.85914 8.79914 8.87914 8.79914 8.99914H7.12914C7.12914 8.77914 7.12914 8.68914 7.15914 8.51914C7.18914 8.32914 7.23914 8.15914 7.29914 7.99914C7.35914 7.85914 7.43914 7.71914 7.54914 7.57914C7.65914 7.44914 7.77914 7.32914 7.95914 7.19914C8.22914 7.00914 8.31914 6.89914 8.43914 6.67914C8.55914 6.45914 8.63914 6.29914 8.63914 6.08914C8.63914 5.81914 8.57914 5.63914 8.43914 5.50914C8.30914 5.37914 8.12914 5.31914 7.85914 5.31914C7.76914 5.31914 7.66914 5.33914 7.55914 5.36914C7.44914 5.39914 7.38914 5.45914 7.30914 5.52914C7.22914 5.59914 7.16914 5.63914 7.10914 5.72914C7.04555 5.80813 7.01348 5.90789 7.01914 6.00914H5.01914C5.01914 5.62914 5.14914 5.44914 5.28914 5.17914C5.44914 4.90914 5.64914 4.67914 5.89914 4.50914C6.14914 4.33914 6.44914 4.20914 6.77914 4.12914C7.10914 4.04914 7.47914 3.99914 7.86914 3.99914C8.30914 3.99914 8.69914 4.04914 9.03914 4.12914C9.37914 4.21914 9.66914 4.34914 9.91914 4.51914C10.1491 4.68914 10.3291 4.89914 10.4691 5.14914C10.5991 5.39914 10.6591 5.69914 10.6591 6.02914C10.6591 6.24914 10.6591 6.44914 10.5791 6.61914L10.5591 6.60914Z"
+        fill="#96A3BD" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/FireIcon.vue b/resources/js/Shared/Icons/FireIcon.vue
new file mode 100644
index 00000000000..e48b921b876
--- /dev/null
+++ b/resources/js/Shared/Icons/FireIcon.vue
@@ -0,0 +1,18 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="icon-sidebar relative inline h-4 w-4">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/LampIcon.vue b/resources/js/Shared/Icons/LampIcon.vue
new file mode 100644
index 00000000000..06b222a8d2b
--- /dev/null
+++ b/resources/js/Shared/Icons/LampIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="relative me-1 inline h-4 w-4">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/MenuIcon.vue b/resources/js/Shared/Icons/MenuIcon.vue
new file mode 100644
index 00000000000..097ea4f04df
--- /dev/null
+++ b/resources/js/Shared/Icons/MenuIcon.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/MinusIcon.vue b/resources/js/Shared/Icons/MinusIcon.vue
new file mode 100644
index 00000000000..bcde39e3773
--- /dev/null
+++ b/resources/js/Shared/Icons/MinusIcon.vue
@@ -0,0 +1,11 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon relative mx-1 inline h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/NoteIcon.vue b/resources/js/Shared/Icons/NoteIcon.vue
new file mode 100644
index 00000000000..64bb0a4c23d
--- /dev/null
+++ b/resources/js/Shared/Icons/NoteIcon.vue
@@ -0,0 +1,25 @@
+<template>
+    <svg
+      class="icon-sidebar relative inline h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 6C6 5.44772 6.44772 5 7 5H17C17.5523 5 18 5.44772 18 6C18 6.55228 17.5523 7 17 7H7C6.44771 7 6 6.55228 6 6Z"
+        fill="currentColor" />
+      <path
+        d="M6 10C6 9.44771 6.44772 9 7 9H17C17.5523 9 18 9.44771 18 10C18 10.5523 17.5523 11 17 11H7C6.44771 11 6 10.5523 6 10Z"
+        fill="currentColor" />
+      <path
+        d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44771 15 7 15H17C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13H7Z"
+        fill="currentColor" />
+      <path
+        d="M6 18C6 17.4477 6.44772 17 7 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H7C6.44772 19 6 18.5523 6 18Z"
+        fill="currentColor" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2 4C2 2.34315 3.34315 1 5 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V4ZM5 3H19C19.5523 3 20 3.44771 20 4V20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V4C4 3.44772 4.44771 3 5 3Z"
+        fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/PeopleIcon.vue b/resources/js/Shared/Icons/PeopleIcon.vue
new file mode 100644
index 00000000000..799d8af22b1
--- /dev/null
+++ b/resources/js/Shared/Icons/PeopleIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/PhotoIcon.vue b/resources/js/Shared/Icons/PhotoIcon.vue
new file mode 100644
index 00000000000..6629227f76d
--- /dev/null
+++ b/resources/js/Shared/Icons/PhotoIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/PlusIcon.vue b/resources/js/Shared/Icons/PlusIcon.vue
new file mode 100644
index 00000000000..fb89429bc27
--- /dev/null
+++ b/resources/js/Shared/Icons/PlusIcon.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon relative me-1 inline h-5 w-5"
+      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>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/RefreshIcon.vue b/resources/js/Shared/Icons/RefreshIcon.vue
new file mode 100644
index 00000000000..e0f786101b2
--- /dev/null
+++ b/resources/js/Shared/Icons/RefreshIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-3 w-3"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/ReminderIcon.vue b/resources/js/Shared/Icons/ReminderIcon.vue
new file mode 100644
index 00000000000..4dc9eca167a
--- /dev/null
+++ b/resources/js/Shared/Icons/ReminderIcon.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg
+      class="icon-sidebar relative inline h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15 17C16.1046 17 17 16.1046 17 15C17 13.8954 16.1046 13 15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17Z"
+        fill="currentColor" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
+        fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/SearchIcon.vue b/resources/js/Shared/Icons/SearchIcon.vue
new file mode 100644
index 00000000000..4a150494f80
--- /dev/null
+++ b/resources/js/Shared/Icons/SearchIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="absolute start-2 top-2 h-4 w-4 text-gray-400"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/SettingIcon.vue b/resources/js/Shared/Icons/SettingIcon.vue
new file mode 100644
index 00000000000..9c1571395d3
--- /dev/null
+++ b/resources/js/Shared/Icons/SettingIcon.vue
@@ -0,0 +1,19 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="relative -top-px me-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/TagIcon.vue b/resources/js/Shared/Icons/TagIcon.vue
new file mode 100644
index 00000000000..06f24d20f0b
--- /dev/null
+++ b/resources/js/Shared/Icons/TagIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="icon-sidebar relative inline h-4 w-4">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/TaskIcon.vue b/resources/js/Shared/Icons/TaskIcon.vue
new file mode 100644
index 00000000000..c7b364db785
--- /dev/null
+++ b/resources/js/Shared/Icons/TaskIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon-sidebar relative inline h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/TwoPinMapIcon.vue b/resources/js/Shared/Icons/TwoPinMapIcon.vue
new file mode 100644
index 00000000000..2ecee44087a
--- /dev/null
+++ b/resources/js/Shared/Icons/TwoPinMapIcon.vue
@@ -0,0 +1,21 @@
+<template>
+    <svg
+      class="me-2 h-6 w-6 text-gray-500"
+      viewBox="0 0 64 64"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke-width="3"
+      stroke="#000000"
+      fill="none">
+      <path
+        d="M17.94,54.81a.1.1,0,0,1-.14,0c-1-1.11-11.69-13.23-11.69-21.26,0-9.94,6.5-12.24,11.76-12.24,4.84,0,11.06,2.6,11.06,12.24C28.93,41.84,18.87,53.72,17.94,54.81Z" />
+      <circle cx="17.52" cy="31.38" r="4.75" />
+      <path
+        d="M49.58,34.77a.11.11,0,0,1-.15,0c-.87-1-9.19-10.45-9.19-16.74,0-7.84,5.12-9.65,9.27-9.65,3.81,0,8.71,2,8.71,9.65C58.22,24.52,50.4,33.81,49.58,34.77Z" />
+      <circle cx="49.23" cy="17.32" r="3.75" />
+      <path d="M17.87,54.89a28.73,28.73,0,0,0,3.9.89" />
+      <path
+        d="M24.68,56.07c2.79.12,5.85-.28,7.9-2.08,5.8-5.09,2.89-11.25,6.75-14.71a16.72,16.72,0,0,1,4.93-3"
+        stroke-dasharray="7.8 2.92" />
+      <path d="M45.63,35.8a23,23,0,0,1,3.88-.95" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icons/ValideIcon.vue b/resources/js/Shared/Icons/ValideIcon.vue
new file mode 100644
index 00000000000..10ea5f34a42
--- /dev/null
+++ b/resources/js/Shared/Icons/ValideIcon.vue
@@ -0,0 +1,14 @@
+<template>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="me-1 h-4 w-4 flex-none text-green-600">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index eedd349d5b5..4b236856722 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -13,14 +13,7 @@
           <!-- information about the current vault -->
           <div v-if="layoutData.vault">
             <span class="relative mx-1">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="relative inline h-3 w-3"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-              </svg>
+              <ChevronIcon :type="'right'" />
             </span>
             {{ layoutData.vault.name }}
           </div>
@@ -28,18 +21,7 @@
 
         <!-- search box -->
         <div v-if="insideVault" class="flew-grow relative">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="absolute start-2 top-2 h-4 w-4 text-gray-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-          </svg>
+          <SearchIcon />
           <input
             type="text"
             class="dark:highlight-white/5 block w-64 rounded-md border border-gray-300 px-2 py-1 text-center placeholder:text-gray-600 hover:cursor-pointer focus:border-indigo-500 focus:ring-indigo-500 dark:border-0 dark:border-gray-700 dark:bg-slate-900 placeholder:dark:text-gray-400 hover:dark:bg-slate-700 sm:text-sm"
@@ -58,144 +40,20 @@
                   type="checkbox"
                   class="peer hidden"
                   @click="toggleStyle" />
-                <div
-                  class="peer me-2 h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[14px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
-                <svg
-                  v-if="!style.checked"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 14 14"
-                  height="15"
-                  width="15">
-                  <g>
-                    <circle
-                      cx="7"
-                      cy="7"
-                      r="2.5"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></circle>
-                    <line
-                      x1="7"
-                      y1="0.5"
-                      x2="7"
-                      y2="2.5"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="2.4"
-                      y1="2.4"
-                      x2="3.82"
-                      y2="3.82"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="0.5"
-                      y1="7"
-                      x2="2.5"
-                      y2="7"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="2.4"
-                      y1="11.6"
-                      x2="3.82"
-                      y2="10.18"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="7"
-                      y1="13.5"
-                      x2="7"
-                      y2="11.5"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="11.6"
-                      y1="11.6"
-                      x2="10.18"
-                      y2="10.18"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="13.5"
-                      y1="7"
-                      x2="11.5"
-                      y2="7"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                    <line
-                      x1="11.6"
-                      y1="2.4"
-                      x2="10.18"
-                      y2="3.82"
-                      fill="none"
-                      stroke="#4B5563"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"></line>
-                  </g>
-                </svg>
-                <svg v-if="style.checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" height="15" width="15">
-                  <path
-                    d="M12,10.48A6.55,6.55,0,0,1,6.46.5a6.55,6.55,0,0,0,1,13A6.46,6.46,0,0,0,13,10.39,6.79,6.79,0,0,1,12,10.48Z"
-                    fill="none"
-                    stroke="#e5e7eb"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"></path>
-                </svg>
+                <div class="peer me-2 h-4 w-7 rounded-full bg-gray-200 after:absolute after:left-[2px] after:right-[14px] after:top-[2px] after:h-3 after:w-3 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-800 dark:peer-focus:ring-blue-800" />
+                <DarkModeIcon :checked="style.checked" />
               </label>
             </li>
             <li class="me-4 inline">
               <InertiaLink :href="layoutData.url.settings" class="relative inline">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="relative -top-px me-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
+                <SettingIcon />
 
                 <span class="text-sm dark:text-sky-400">{{ $t('Settings') }}</span>
               </InertiaLink>
             </li>
             <li class="inline">
               <InertiaLink class="inline" method="post" :href="route('logout')" as="button">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="me-1 inline-block h-4 w-4 cursor-pointer text-gray-600 dark:text-gray-300 sm:h-4 sm:w-4"
-                  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>
+                <DoorIcon />
 
                 <span class="text-sm dark:text-sky-400">{{ $t('Logout') }}</span>
               </InertiaLink>
@@ -333,14 +191,24 @@
 import { Link } from '@inertiajs/vue3';
 import Toaster from '@/Shared/Toaster.vue';
 import FooterLayout from '@/Layouts/FooterLayout.vue';
+import ChevronIcon from '@/Shared/Icons/ChevronIcon.vue';
+import SearchIcon from '@/Shared/Icons/SearchIcon.vue';
+import DarkModeIcon from '@/Shared/Icons/DarkModeIcon.vue';
+import SettingIcon from '@/Shared/Icons/SettingIcon.vue';
+import DoorIcon from '@/Shared/Icons/DoorIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
     Toaster,
     FooterLayout,
+    ChevronIcon,
+    SearchIcon,
+    DarkModeIcon,
+    SettingIcon,
+    DoorIcon,
   },
-
+  
   props: {
     title: {
       type: String,
diff --git a/resources/js/Shared/Modules/CreateLifeEvent.vue b/resources/js/Shared/Modules/CreateLifeEvent.vue
index 1506f3492fe..55ea38ac1b7 100644
--- a/resources/js/Shared/Modules/CreateLifeEvent.vue
+++ b/resources/js/Shared/Modules/CreateLifeEvent.vue
@@ -7,6 +7,7 @@ import ContactSelector from '@/Shared/Form/ContactSelector.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import TextArea from '@/Shared/Form/TextArea.vue';
 import Avatar from '@/Shared/Avatar.vue';
+import ArrowIcon from '@/Shared/Icons/ArrowIcon.vue';
 import { useForm } from '@inertiajs/vue3';
 import { onMounted, ref, watch, nextTick } from 'vue';
 
@@ -195,18 +196,7 @@ const store = () => {
 
                   <!-- arrow -->
                   <span v-if="category.id === selectedLifeEventCategory.id">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="h-6 w-6 text-gray-600">
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
-                    </svg>
+                    <ArrowIcon />
                   </span>
                 </div>
               </li>
diff --git a/resources/js/Shared/Modules/Documents.vue b/resources/js/Shared/Modules/Documents.vue
index 87c77197bce..3e00bc6d875 100644
--- a/resources/js/Shared/Modules/Documents.vue
+++ b/resources/js/Shared/Modules/Documents.vue
@@ -4,18 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-          </svg>
+          <DatabaseIcon />
         </span>
 
         <span class="font-semibold">
@@ -100,13 +89,15 @@
 <script>
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import Uploadcare from '@/Components/Uploadcare.vue';
+import DatabaseIcon from '@/Shared/Icons/DatabaseIcon.vue';
 
 export default {
   components: {
     PrettyButton,
     Uploadcare,
+    DatabaseIcon,
   },
-
+  
   props: {
     data: {
       type: Object,
diff --git a/resources/js/Shared/Modules/Feed.vue b/resources/js/Shared/Modules/Feed.vue
index 5b31daf23b2..9543bd53c42 100644
--- a/resources/js/Shared/Modules/Feed.vue
+++ b/resources/js/Shared/Modules/Feed.vue
@@ -28,18 +28,7 @@
             <p class="flex items-center text-sm text-gray-400">
               <span>{{ feedItem.created_at }}</span>
 
-              <svg
-                class="ms-2 h-4 w-4"
-                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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-              </svg>
+              <CalendarIcon :type="'empty'" />
             </p>
           </div>
         </div>
@@ -196,6 +185,7 @@ import Pet from '@/Shared/Modules/FeedItems/Pet.vue';
 import Goal from '@/Shared/Modules/FeedItems/Goal.vue';
 import MoodTrackingEvent from '@/Shared/Modules/FeedItems/MoodTrackingEvent.vue';
 import Note from '@/Shared/Modules/FeedItems/Note.vue';
+import CalendarIcon from '@/Shared/Icons/CalendarIcon.vue';
 
 export default {
   components: {
@@ -210,6 +200,7 @@ export default {
     Goal,
     MoodTrackingEvent,
     Note,
+    CalendarIcon
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/GenderPronoun.vue b/resources/js/Shared/Modules/GenderPronoun.vue
index bbb6a49779c..e0660f4ae03 100644
--- a/resources/js/Shared/Modules/GenderPronoun.vue
+++ b/resources/js/Shared/Modules/GenderPronoun.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
+import EditIcon from '@/Shared/Icons/EditIcon.vue';
 
 defineProps({
   data: Object,
@@ -13,18 +14,7 @@ defineProps({
       <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
         <div class="mb-2 text-xs sm:mb-0">{{ $t('Gender') }}</div>
         <Link :href="data.url.edit" class="relative">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-            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>
+          <EditIcon />
         </Link>
       </div>
 
@@ -39,18 +29,7 @@ defineProps({
       <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
         <div class="mb-2 text-xs sm:mb-0">{{ $t('Pronoun') }}</div>
         <Link :href="data.url.edit" class="relative">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-            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>
+          <EditIcon />
         </Link>
       </div>
 
diff --git a/resources/js/Shared/Modules/Goals.vue b/resources/js/Shared/Modules/Goals.vue
index df2ad9945b6..2a4953549c6 100644
--- a/resources/js/Shared/Modules/Goals.vue
+++ b/resources/js/Shared/Modules/Goals.vue
@@ -4,18 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
-          </svg>
+          <BallIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Goals') }} </span>
@@ -98,28 +87,8 @@
                   v-else
                   class="me-2 cursor-pointer text-center text-2xl sm:me-0"
                   @click="toggleStreak(goal, streak)">
-                  <div
-                    class="rounded-md border border-gray-200 bg-slate-100 px-2 py-1 dark:border-gray-700 dark:bg-slate-900">
-                    <svg
-                      class="z-50"
-                      width="18"
-                      height="18"
-                      viewBox="0 0 18 18"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <g clip-path="url(#clip0_522_316)">
-                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M1.6875 9C1.6875 7.0606 2.45792 5.20064 3.82928 3.82928C5.20064 2.45792 7.0606 1.6875 9 1.6875C10.9394 1.6875 12.7994 2.45792 14.1707 3.82928C15.5421 5.20064 16.3125 7.0606 16.3125 9C16.3125 10.9394 15.5421 12.7994 14.1707 14.1707C12.7994 15.5421 10.9394 16.3125 9 16.3125C7.0606 16.3125 5.20064 15.5421 3.82928 14.1707C2.45792 12.7994 1.6875 10.9394 1.6875 9ZM9 0C6.61305 0 4.32387 0.948212 2.63604 2.63604C0.948212 4.32387 0 6.61305 0 9C0 11.3869 0.948212 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18C11.3869 18 13.6761 17.0518 15.364 15.364C17.0518 13.6761 18 11.3869 18 9C18 6.61305 17.0518 4.32387 15.364 2.63604C13.6761 0.948212 11.3869 0 9 0V0ZM5.625 9C5.92337 9 6.20952 8.88147 6.4205 8.6705C6.63147 8.45952 6.75 8.17337 6.75 7.875C6.75 7.57663 6.63147 7.29048 6.4205 7.0795C6.20952 6.86853 5.92337 6.75 5.625 6.75C5.32663 6.75 5.04048 6.86853 4.8295 7.0795C4.61853 7.29048 4.5 7.57663 4.5 7.875C4.5 8.17337 4.61853 8.45952 4.8295 8.6705C5.04048 8.88147 5.32663 9 5.625 9ZM13.5 7.875C13.5 8.17337 13.3815 8.45952 13.1705 8.6705C12.9595 8.88147 12.6734 9 12.375 9C12.0766 9 11.7905 8.88147 11.5795 8.6705C11.3685 8.45952 11.25 8.17337 11.25 7.875C11.25 7.57663 11.3685 7.29048 11.5795 7.0795C11.7905 6.86853 12.0766 6.75 12.375 6.75C12.6734 6.75 12.9595 6.86853 13.1705 7.0795C13.3815 7.29048 13.5 7.57663 13.5 7.875ZM5.985 10.8405C6.16651 10.7134 6.39072 10.6628 6.60922 10.6997C6.82771 10.7365 7.02294 10.8578 7.15275 11.0374L7.16062 11.0475C7.2765 11.1802 7.40813 11.2972 7.55438 11.3962C7.85138 11.5965 8.32275 11.8125 9 11.8125C9.67725 11.8125 10.1475 11.5965 10.4456 11.3951C10.5919 11.2961 10.7235 11.1791 10.8394 11.0464L10.8472 11.0374C10.9115 10.9471 10.9929 10.8704 11.0868 10.8116C11.1808 10.7528 11.2853 10.713 11.3946 10.6947C11.5039 10.6763 11.6157 10.6796 11.7237 10.7044C11.8317 10.7293 11.9337 10.7751 12.024 10.8394C12.1143 10.9036 12.191 10.9851 12.2498 11.079C12.3086 11.1729 12.3483 11.2775 12.3667 11.3867C12.3851 11.496 12.3818 11.6078 12.357 11.7158C12.3321 11.8238 12.2863 11.9259 12.222 12.0161L11.5312 11.5312C12.222 12.015 12.222 12.0161 12.2209 12.0161V12.0173L12.2198 12.0195L12.2175 12.0229L12.2119 12.0308L12.1961 12.0521C12.1329 12.1368 12.0637 12.2169 11.9891 12.2917C11.8091 12.4785 11.6089 12.6473 11.3929 12.7924C10.6841 13.2626 9.85163 13.5101 9 13.5C7.93575 13.5 7.1415 13.1535 6.60825 12.7913C6.30535 12.5856 6.03433 12.3366 5.80387 12.0521L5.78813 12.0296L5.7825 12.0229L5.78025 12.0195V12.0173H5.77913L6.46875 11.5312L5.778 12.015C5.64971 11.8319 5.59933 11.6054 5.63793 11.3852C5.67653 11.1649 5.80095 10.969 5.98387 10.8405H5.985Z"
-                          fill="#CFCFCF" />
-                      </g>
-                      <defs>
-                        <clipPath id="clip0_522_316">
-                          <rect width="18" height="18" fill="white" />
-                        </clipPath>
-                      </defs>
-                    </svg>
+                  <div class="rounded-md border border-gray-200 bg-slate-100 px-2 py-1 dark:border-gray-700 dark:bg-slate-900">
+                    <FaceIcon />
                   </div>
                 </span>
               </div>
@@ -161,6 +130,8 @@ import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import BallIcon from '@/Shared/Icons/BallIcon.vue';
+import FaceIcon from '@/Shared/Icons/FaceIcon.vue';
 
 export default {
   components: {
@@ -169,8 +140,10 @@ export default {
     PrettySpan,
     TextInput,
     Errors,
+    BallIcon,
+    FaceIcon,
   },
-
+  
   props: {
     data: {
       type: Object,
diff --git a/resources/js/Shared/Modules/Groups.vue b/resources/js/Shared/Modules/Groups.vue
index a81de4f644b..c42c3de42ae 100644
--- a/resources/js/Shared/Modules/Groups.vue
+++ b/resources/js/Shared/Modules/Groups.vue
@@ -4,18 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
-          </svg>
+          <BadgeIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Groups') }} </span>
@@ -140,6 +129,7 @@ import TextInput from '@/Shared/Form/TextInput.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 import Avatar from '@/Shared/Avatar.vue';
+import BadgeIcon from '@/Shared/Icons/BadgeIcon.vue';
 
 export default {
   components: {
@@ -150,6 +140,7 @@ export default {
     Dropdown,
     Errors,
     Avatar,
+    BadgeIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/ImportantDates.vue b/resources/js/Shared/Modules/ImportantDates.vue
index ef27936e6f0..d0c509a1e66 100644
--- a/resources/js/Shared/Modules/ImportantDates.vue
+++ b/resources/js/Shared/Modules/ImportantDates.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
+import EditIcon from '@/Shared/Icons/EditIcon.vue';
 
 defineProps({
   data: Object,
@@ -11,18 +12,7 @@ defineProps({
     <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Important dates') }}</div>
       <Link :href="data.url.edit" class="relative">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-          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>
+        <EditIcon />
       </Link>
     </div>
 
diff --git a/resources/js/Shared/Modules/JobInformation.vue b/resources/js/Shared/Modules/JobInformation.vue
index 461a29b1075..b1985162ff3 100644
--- a/resources/js/Shared/Modules/JobInformation.vue
+++ b/resources/js/Shared/Modules/JobInformation.vue
@@ -3,18 +3,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Job information') }}</div>
       <span v-if="!editJobInformation" class="relative cursor-pointer" @click="showEditModal">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-          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>
+        <EditIcon />
       </span>
 
       <!-- close button -->
@@ -118,6 +107,7 @@ import Dropdown from '@/Shared/Form/Dropdown.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import EditIcon from '@/Shared/Icons/EditIcon.vue';
 
 export default {
   components: {
@@ -126,6 +116,7 @@ export default {
     Dropdown,
     PrettySpan,
     PrettyButton,
+    EditIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/Labels.vue b/resources/js/Shared/Modules/Labels.vue
index 3000deb76db..5cfda14b6dc 100644
--- a/resources/js/Shared/Modules/Labels.vue
+++ b/resources/js/Shared/Modules/Labels.vue
@@ -3,18 +3,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 dark:border-gray-700 sm:flex">
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Labels') }}</div>
       <span v-if="!editLabelModalShown" class="relative cursor-pointer" @click="showEditModal">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-          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>
+        <EditIcon />
       </span>
 
       <!-- close button -->
@@ -58,15 +47,7 @@
             <span>{{ label.name }}</span>
           </div>
 
-          <svg
-            v-if="label.taken"
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-green-700"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg>
+          <CheckedIcon v-if="label.taken" />
         </li>
 
         <!-- case if the label does not exist and needs to be created -->
@@ -106,12 +87,16 @@
 import { Link } from '@inertiajs/vue3';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import EditIcon from '@/Shared/Icons/EditIcon.vue';
+import CheckedIcon from '@/Shared/Icons/CheckedIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
     TextInput,
     Errors,
+    EditIcon,
+    CheckedIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/LifeEvent.vue b/resources/js/Shared/Modules/LifeEvent.vue
index dd901bf6429..6608348561f 100644
--- a/resources/js/Shared/Modules/LifeEvent.vue
+++ b/resources/js/Shared/Modules/LifeEvent.vue
@@ -6,6 +6,10 @@ import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import ContactCard from '@/Shared/ContactCard.vue';
 import HoverMenu from '@/Shared/HoverMenu.vue';
 import CreateLifeEvent from '@/Shared/Modules/CreateLifeEvent.vue';
+import FireIcon from '@/Shared/Icons/FireIcon.vue';
+import ChevronIcon from '@/Shared/Icons/ChevronIcon.vue';
+import ClockIcon from '@/Shared/Icons/ClockIcon.vue';
+import TwoPinMapIcon from '@/Shared/Icons/TwoPinMapIcon.vue';
 
 const props = defineProps({
   layoutData: Object,
@@ -107,22 +111,7 @@ const toggleLifeEventVisibility = (lifeEvent) => {
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="icon-sidebar relative inline h-4 w-4">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z" />
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
-          </svg>
+          <FireIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Life events') }} </span>
@@ -164,27 +153,9 @@ const toggleLifeEventVisibility = (lifeEvent) => {
             <!-- chevrons and menu -->
             <div class="flex">
               <!-- chevrons -->
-              <svg
-                v-if="timelineEvent.collapsed"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-2 h-4 w-4 text-gray-400">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-              </svg>
-
-              <svg
-                v-if="!timelineEvent.collapsed"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-2 h-4 w-4 text-gray-400">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-              </svg>
+              <ChevronIcon v-if="timelineEvent.collapsed" :type="'down'" />
+
+              <ChevronIcon v-if="!timelineEvent.collapsed" :type="'up'" />
 
               <!-- menu -->
               <hover-menu :show-edit="false" :show-delete="true" @delete="destroy(timelineEvent)" />
@@ -231,30 +202,10 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   <!-- chevrons and menu -->
                   <div class="flex">
                     <!-- chevrons -->
-                    <svg
-                      @click="toggleLifeEventVisibility(lifeEvent)"
-                      v-if="lifeEvent.collapsed"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="me-2 h-4 w-4 text-gray-400">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                    </svg>
-
-                    <svg
-                      @click="toggleLifeEventVisibility(lifeEvent)"
-                      v-if="!lifeEvent.collapsed"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="me-2 h-4 w-4 text-gray-400">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-                    </svg>
+                    <ChevronIcon v-if="timelineEvent.collapsed" :type="'down'" @click="toggleLifeEventVisibility(lifeEvent)"/>
 
+                    <ChevronIcon v-if="!timelineEvent.collapsed" :type="'up'" @click="toggleLifeEventVisibility(lifeEvent)"/>
+                    
                     <!-- menu -->
                     <hover-menu
                       :show-edit="true"
@@ -277,43 +228,14 @@ const toggleLifeEventVisibility = (lifeEvent) => {
                   class="flex items-center border-b border-gray-200 px-3 py-2 text-sm dark:border-gray-700">
                   <!-- date -->
                   <div class="me-4 flex items-center">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="me-2 h-4 w-4 text-gray-500">
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
+                    <ClockIcon />
 
                     {{ lifeEvent.happened_at }}
                   </div>
 
                   <!-- distance -->
                   <div v-if="lifeEvent.distance" class="flex items-center">
-                    <svg
-                      class="me-2 h-6 w-6 text-gray-500"
-                      viewBox="0 0 64 64"
-                      xmlns="http://www.w3.org/2000/svg"
-                      stroke-width="3"
-                      stroke="#000000"
-                      fill="none">
-                      <path
-                        d="M17.94,54.81a.1.1,0,0,1-.14,0c-1-1.11-11.69-13.23-11.69-21.26,0-9.94,6.5-12.24,11.76-12.24,4.84,0,11.06,2.6,11.06,12.24C28.93,41.84,18.87,53.72,17.94,54.81Z" />
-                      <circle cx="17.52" cy="31.38" r="4.75" />
-                      <path
-                        d="M49.58,34.77a.11.11,0,0,1-.15,0c-.87-1-9.19-10.45-9.19-16.74,0-7.84,5.12-9.65,9.27-9.65,3.81,0,8.71,2,8.71,9.65C58.22,24.52,50.4,33.81,49.58,34.77Z" />
-                      <circle cx="49.23" cy="17.32" r="3.75" />
-                      <path d="M17.87,54.89a28.73,28.73,0,0,0,3.9.89" />
-                      <path
-                        d="M24.68,56.07c2.79.12,5.85-.28,7.9-2.08,5.8-5.09,2.89-11.25,6.75-14.71a16.72,16.72,0,0,1,4.93-3"
-                        stroke-dasharray="7.8 2.92" />
-                      <path d="M45.63,35.8a23,23,0,0,1,3.88-.95" />
-                    </svg>
+                    <TwoPinMapIcon />
 
                     <span>{{ lifeEvent.distance }}</span>
                   </div>
diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
index cf4a73cfe0d..7a6a9901bdb 100644
--- a/resources/js/Shared/Modules/Loans.vue
+++ b/resources/js/Shared/Modules/Loans.vue
@@ -13,6 +13,8 @@ import Errors from '@/Shared/Form/Errors.vue';
 import ContactSelector from '@/Shared/Form/ContactSelector.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
 import ContactCard from '@/Shared/ContactCard.vue';
+import DollarIcon from '@/Shared/Icons/DollarIcon.vue';
+import ArrowIcon from '@/Shared/Icons/ArrowIcon.vue';
 
 const props = defineProps({
   layoutData: Object,
@@ -150,18 +152,7 @@ const toggle = (loan) => {
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
+          <DollarIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Loans') }} </span>
@@ -333,15 +324,7 @@ const toggle = (loan) => {
             </div>
           </div>
 
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-          </svg>
+          <ArrowIcon :type="'right'" :size="'big'" />
 
           <div v-for="loanee in loan.loanees" :key="loanee.id">
             <contact-card :contact="loanee" :avatar-classes="'h-7 w-7 rounded-full me-2'" :display-name="false" />
diff --git a/resources/js/Shared/Modules/Notes.vue b/resources/js/Shared/Modules/Notes.vue
index e124ef054d4..c9916a716e3 100644
--- a/resources/js/Shared/Modules/Notes.vue
+++ b/resources/js/Shared/Modules/Notes.vue
@@ -4,29 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            class="icon-sidebar relative inline h-4 w-4"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M6 6C6 5.44772 6.44772 5 7 5H17C17.5523 5 18 5.44772 18 6C18 6.55228 17.5523 7 17 7H7C6.44771 7 6 6.55228 6 6Z"
-              fill="currentColor" />
-            <path
-              d="M6 10C6 9.44771 6.44772 9 7 9H17C17.5523 9 18 9.44771 18 10C18 10.5523 17.5523 11 17 11H7C6.44771 11 6 10.5523 6 10Z"
-              fill="currentColor" />
-            <path
-              d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44771 15 7 15H17C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13H7Z"
-              fill="currentColor" />
-            <path
-              d="M6 18C6 17.4477 6.44772 17 7 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H7C6.44772 19 6 18.5523 6 18Z"
-              fill="currentColor" />
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M2 4C2 2.34315 3.34315 1 5 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V4ZM5 3H19C19.5523 3 20 3.44771 20 4V20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V4C4 3.44772 4.44771 3 5 3Z"
-              fill="currentColor" />
-          </svg>
+          <NoteIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Notes') }} </span>
@@ -141,18 +119,7 @@
 
               <!-- date -->
               <div class="relative me-3 inline">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="icon-note relative inline h-3 w-3 text-gray-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
+                <ClockIcon :time="'four'" />
                 {{ note.written_at }}
               </div>
 
@@ -258,6 +225,8 @@ import TextArea from '@/Shared/Form/TextArea.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 import Avatar from '@/Shared/Avatar.vue';
 import Pagination from '@/Components/Pagination.vue';
+import NoteIcon from '@/Shared/Icons/NoteIcon.vue';
+import ClockIcon from '@/Shared/Icons/ClockIcon.vue';
 
 export default {
   components: {
@@ -270,6 +239,8 @@ export default {
     Errors,
     Avatar,
     Pagination,
+    NoteIcon,
+    ClockIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/Pets.vue b/resources/js/Shared/Modules/Pets.vue
index dedee69e6fb..b95adc11b78 100644
--- a/resources/js/Shared/Modules/Pets.vue
+++ b/resources/js/Shared/Modules/Pets.vue
@@ -5,17 +5,7 @@
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
           <span class="relative me-1">
-            <svg
-              class="icon-sidebar relative inline h-4 w-4"
-              style="width: 1em; height: 1em; vertical-align: middle; fill: currentColor; overflow: hidden"
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M927.3 453c-21.1-55.3-51.7-109.1-88.4-155.5-41.1-51.9-88.3-93.2-140.1-122.6-58.6-33.2-121.3-50.1-186.4-50.1-65.9 0-129.2 16.7-188.1 49.7-52.2 29.2-99.5 70.3-140.7 122-36.7 46.1-67.3 99.7-88.3 154.9-20.3 53.1-31 105.4-31 151.1 0 41.7 9.2 76.8 26.5 101.5 19.6 28 49.4 42.8 86.1 42.8 27.4 0 51-6.6 69.7-18.6 24.1 51.8 75.7 85 132.9 85 17.8 0 34.9-3.2 50.7-9.1v14.1c0 44.1 35.9 80 80 80s80-35.9 80-80v-14.8c16.3 6.3 33.9 9.8 52.3 9.8 57.5 0 109.1-33.6 133-86 18.9 12.6 43 19.5 71.1 19.5 36.4 0 66-14.6 85.4-42.2 17.2-24.4 26.2-59.1 26.2-100.3 0.2-45.5-10.6-97.9-30.9-151.2zM560.2 818.4c0 27.6-22.4 50-50 50s-50-22.4-50-50V789c13.8-9.2 26-20.7 36-33.9v45.8c0 8.3 6.7 15 15 15s15-6.7 15-15v-45.7c9.5 12.6 21 23.6 34 32.5v30.7z m-49.1-167.6h-0.2l-73-40.8 20.8-29.8h104.4l20.8 29.8-72.8 40.8z m396.5 36.6c-13.8 19.6-34.2 29.5-60.9 29.5-26.1 0-47.8-7.2-62.9-20.9-15.7-14.2-23.6-34.7-23.6-60.8 0-57.3-0.4-130.2-0.7-183.5-0.2-34.3-0.4-61.4-0.4-75 0-8.3-6.7-15-15-15s-15 6.7-15 15c0 13.7 0.2 40.8 0.4 75.1 0.3 53.2 0.7 126.2 0.7 183.3 0 28.5 8.1 52.8 22.7 71.4-1.2 1.3-2.2 2.8-2.9 4.5-18.1 43.9-60.3 72.3-107.4 72.3-60.6 0-110.5-47.1-115.9-107l74.1-41.5c6.8-3.8 11.7-10.4 13.5-18 1.7-7.6 0.2-15.6-4.3-22L587 562c-5.2-7.4-13.7-11.8-22.7-11.8H457.6c-9.1 0-17.6 4.4-22.7 11.8l-23 32.9c-4.5 6.4-6 14.4-4.3 22 1.7 7.6 6.6 14.2 13.4 18l74.7 41.9c-5.5 59.7-55.5 106.6-116.2 106.6-47 0-89.2-28.2-107.5-71.8-0.6-1.4-1.4-2.7-2.3-3.8 15.3-18.7 23.7-43.4 23.7-72.6 0-57.2 0.4-130.1 0.7-183.3 0.2-34.3 0.4-61.5 0.4-75.1 0-8.3-6.7-15-15-15s-15 6.7-15 15c0 13.6-0.2 40.7-0.4 75-0.3 53.3-0.7 126.2-0.7 183.5 0 26.1-8 46.6-23.6 60.8-15.1 13.7-36.8 20.9-62.9 20.9-26.9 0-47.6-10.1-61.5-30-13.8-19.6-21-48.8-21-84.3 0-42.2 10-90.7 29-140.5 20-52.4 48.9-103.1 83.8-146.9 38.7-48.7 83.1-87.2 131.9-114.5 54.4-30.5 112.7-45.9 173.4-45.9 59.9 0 117.6 15.5 171.6 46.2 48.5 27.5 92.7 66.2 131.4 115.1 68.7 86.8 113 199.9 113 288.2-0.1 35-7.3 63.7-20.9 83z" />
-              <path d="M383.2 480.9m-25 0a25 25 0 1 0 50 0 25 25 0 1 0-50 0Z" />
-              <path d="M639.2 480.9m-25 0a25 25 0 1 0 50 0 25 25 0 1 0-50 0Z" />
-            </svg>
+            <FaceIcon :type="'dog'" />
           </span>
         </span>
 
@@ -151,6 +141,7 @@ import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import FaceIcon from '@/Shared/Icons/FaceIcon.vue';
 
 export default {
   components: {
@@ -159,6 +150,7 @@ export default {
     TextInput,
     Dropdown,
     Errors,
+    FaceIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/Photos.vue b/resources/js/Shared/Modules/Photos.vue
index 436d5918c85..cfe75a08dc7 100644
--- a/resources/js/Shared/Modules/Photos.vue
+++ b/resources/js/Shared/Modules/Photos.vue
@@ -4,18 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
+          <PhotoIcon />
         </span>
 
         <span class="font-semibold">
@@ -90,12 +79,14 @@
 import { Link } from '@inertiajs/vue3';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import Uploadcare from '@/Components/Uploadcare.vue';
+import PhotoIcon from '@/Shared/Icons/PhotoIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
     PrettyButton,
     Uploadcare,
+    PhotoIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/Posts.vue b/resources/js/Shared/Modules/Posts.vue
index 7ef221b9e2d..e15815ebc74 100644
--- a/resources/js/Shared/Modules/Posts.vue
+++ b/resources/js/Shared/Modules/Posts.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { Link } from '@inertiajs/vue3';
+import TagIcon from '@/Shared/Icons/TagIcon.vue';
+import ClockIcon from '@/Shared/Icons/ClockIcon.vue';
 
 defineProps({
   data: Object,
@@ -12,18 +14,7 @@ defineProps({
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="icon-sidebar relative inline h-4 w-4">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
-          </svg>
+          <TagIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Posts') }} </span>
@@ -48,18 +39,7 @@ defineProps({
 
             <!-- date -->
             <div class="relative me-3 inline">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon-note relative inline h-3 w-3 text-gray-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
+              <ClockIcon :time="'four'" />
               {{ post.written_at }}
             </div>
           </div>
diff --git a/resources/js/Shared/Modules/QuickFacts.vue b/resources/js/Shared/Modules/QuickFacts.vue
index e453ef20e67..af3a50c2223 100644
--- a/resources/js/Shared/Modules/QuickFacts.vue
+++ b/resources/js/Shared/Modules/QuickFacts.vue
@@ -7,6 +7,9 @@ import Errors from '@/Shared/Form/Errors.vue';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
+import LampIcon from '@/Shared/Icons/LampIcon.vue';
+import ChevronIcon from '@/Shared/Icons/ChevronIcon.vue';
+import ValideIcon from '@/Shared/Icons/ValideIcon.vue';
 
 const props = defineProps({
   data: Object,
@@ -97,45 +100,16 @@ const destroy = (quickFact) => {
   <div class="mb-8 rounded-lg border border-gray-200 bg-gray-50 p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900">
     <div @click="toggle()" class="flex cursor-pointer items-center justify-between" :class="openState ? ' mb-4' : ''">
       <div class="me-1 flex items-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="relative me-1 inline h-4 w-4">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
-        </svg>
+        <LampIcon />
 
         <p class="text-sm font-bold">{{ $t('Quick facts') }}</p>
       </div>
 
       <!-- chevrons -->
       <div>
-        <svg
-          v-if="!openState"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="me-2 h-4 w-4 cursor-pointer text-gray-400">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-        </svg>
-
-        <svg
-          v-else
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="me-2 h-4 w-4 cursor-pointer text-gray-400">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-        </svg>
+        <ChevronIcon v-if="openState" :type="'down'" />
+
+        <ChevronIcon v-if="!openState" :type="'up'" />
       </div>
     </div>
 
@@ -167,18 +141,7 @@ const destroy = (quickFact) => {
           <!-- normal mode -->
           <div v-if="editedQuickFactId !== quickFact.id" class="flex items-center justify-between">
             <div class="flex items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="me-1 h-4 w-4 flex-none text-green-600">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
+              <ValideIcon />
 
               <span class="grow">{{ quickFact.content }}</span>
             </div>
diff --git a/resources/js/Shared/Modules/Relationships.vue b/resources/js/Shared/Modules/Relationships.vue
index 00c8250ab51..faf989202db 100644
--- a/resources/js/Shared/Modules/Relationships.vue
+++ b/resources/js/Shared/Modules/Relationships.vue
@@ -4,18 +4,7 @@
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-          </svg>
+          <PeopleIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Relationships') }} </span>
@@ -87,12 +76,14 @@
 import { Link } from '@inertiajs/vue3';
 import PrettyLink from '@/Shared/Form/PrettyLink.vue';
 import Avatar from '@/Shared/Avatar.vue';
+import PeopleIcon from '@/Shared/Icons/PeopleIcon.vue';
 
 export default {
   components: {
     InertiaLink: Link,
     PrettyLink,
     Avatar,
+    PeopleIcon,
   },
 
   props: {
diff --git a/resources/js/Shared/Modules/Religion.vue b/resources/js/Shared/Modules/Religion.vue
index 79a8d237941..adb6d7254e3 100644
--- a/resources/js/Shared/Modules/Religion.vue
+++ b/resources/js/Shared/Modules/Religion.vue
@@ -5,6 +5,7 @@ import Errors from '@/Shared/Form/Errors.vue';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
+import EditIcon from '@/Shared/Icons/EditIcon.vue';
 
 const props = defineProps({
   data: Object,
@@ -46,18 +47,7 @@ const showEditModal = () => {
       <div class="mb-2 text-xs sm:mb-0">{{ $t('Religion') }}</div>
 
       <span v-if="!editReligion" class="relative cursor-pointer" @click="showEditModal()">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon-sidebar relative inline h-3 w-3 text-gray-300 hover:text-gray-600 dark:text-gray-400"
-          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>
+        <EditIcon />
       </span>
 
       <!-- close button -->
diff --git a/resources/js/Shared/Modules/Reminders.vue b/resources/js/Shared/Modules/Reminders.vue
index dc9c812b954..f6cd5400266 100644
--- a/resources/js/Shared/Modules/Reminders.vue
+++ b/resources/js/Shared/Modules/Reminders.vue
@@ -11,6 +11,8 @@ import PrettySpan from '@/Shared/Form/PrettySpan.vue';
 import TextInput from '@/Shared/Form/TextInput.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
 import Errors from '@/Shared/Form/Errors.vue';
+import ReminderIcon from '@/Shared/Icons/ReminderIcon.vue';
+import RefreshIcon from '@/Shared/Icons/RefreshIcon.vue';
 
 const props = defineProps({
   data: Object,
@@ -124,20 +126,7 @@ const destroy = (reminder) => {
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            class="icon-sidebar relative inline h-4 w-4"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M15 17C16.1046 17 17 16.1046 17 15C17 13.8954 16.1046 13 15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17Z"
-              fill="currentColor" />
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
-              fill="currentColor" />
-          </svg>
+          <ReminderIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Reminders') }} </span>
@@ -328,18 +317,7 @@ const destroy = (reminder) => {
                 placement="topLeft"
                 title="Recurring"
                 arrow-point-at-center>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-3 w-3"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                </svg>
+                <RefreshIcon />
               </a-tooltip>
             </div>
 
diff --git a/resources/js/Shared/Modules/Tasks.vue b/resources/js/Shared/Modules/Tasks.vue
index 2827dc27c3d..8e3b4692e08 100644
--- a/resources/js/Shared/Modules/Tasks.vue
+++ b/resources/js/Shared/Modules/Tasks.vue
@@ -5,6 +5,8 @@ import { trans } from 'laravel-vue-i18n';
 import HoverMenu from '@/Shared/HoverMenu.vue';
 import PrettyButton from '@/Shared/Form/PrettyButton.vue';
 import CreateOrEditTask from '@/Shared/Modules/TaskItems/CreateOrEditTask.vue';
+import TaskIcon from '@/Shared/Icons/TaskIcon.vue';
+import DateIcon from '@/Shared/Icons/DateIcon.vue';
 
 const props = defineProps({
   data: Object,
@@ -91,18 +93,7 @@ const destroy = (task) => {
     <div class="mb-3 items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700 sm:flex">
       <div class="mb-2 sm:mb-0">
         <span class="relative me-1">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-sidebar relative inline h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2">
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-          </svg>
+          <TaskIcon />
         </span>
 
         <span class="font-semibold"> {{ $t('Tasks') }} </span>
@@ -148,18 +139,7 @@ const destroy = (task) => {
                     : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                 "
                 class="ms-2 flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-5">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="me-1 h-3 w-3"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  stroke-width="2">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
+                <DateIcon />
                 <span>{{ task.due_at.formatted }}</span>
               </span>
             </label>
@@ -212,18 +192,7 @@ const destroy = (task) => {
                 <span
                   v-if="task.due_at !== null"
                   class="ms-2 flex items-center rounded-full bg-sky-400/10 px-2 py-0.5 text-xs font-medium leading-5 text-sky-600 dark:text-sky-400">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="me-1 h-3 w-3"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    stroke-width="2">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                  </svg>
+                  <DateIcon />
                   <span>{{ task.due_at.formatted }}</span>
                 </span>
               </label>