diff --git a/config/invoiceshelf.php b/config/invoiceshelf.php
index 8fb57f1c..8ea6d01c 100644
--- a/config/invoiceshelf.php
+++ b/config/invoiceshelf.php
@@ -131,7 +131,7 @@ return [
             'group' => '',
             'name' => 'Company information',
             'link' => '/admin/settings/company-info',
-            'icon' => 'OfficeBuildingIcon',
+            'icon' => 'BuildingOfficeIcon',
             'owner_only' => true,
             'ability' => '',
             'model' => '',
@@ -151,7 +151,7 @@ return [
             'group' => '',
             'name' => 'Customization',
             'link' => '/admin/settings/customization',
-            'icon' => 'PencilAltIcon',
+            'icon' => 'PencilSquareIcon',
             'owner_only' => true,
             'ability' => '',
             'model' => '',
@@ -171,7 +171,7 @@ return [
             'group' => '',
             'name' => 'Exchange Rate Provider',
             'link' => '/admin/settings/exchange-rate-provider',
-            'icon' => 'CashIcon',
+            'icon' => 'BanknotesIcon',
             'owner_only' => false,
             'ability' => 'view-exchange-rate-provider',
             'model' => ExchangeRateProvider::class,
@@ -221,7 +221,7 @@ return [
             'group' => '',
             'name' => 'Notes',
             'link' => '/admin/settings/notes',
-            'icon' => 'ClipboardCheckIcon',
+            'icon' => 'ClipboardDocumentCheckIcon',
             'owner_only' => false,
             'ability' => 'view-all-notes',
             'model' => Note::class,
@@ -231,7 +231,7 @@ return [
             'group' => '',
             'name' => 'Expense Category',
             'link' => '/admin/settings/expense-category',
-            'icon' => 'ClipboardListIcon',
+            'icon' => 'ClipboardDocumentListIcon',
             'owner_only' => false,
             'ability' => 'view-expense',
             'model' => Expense::class,
@@ -241,7 +241,7 @@ return [
             'group' => '',
             'name' => 'Mail Configuration',
             'link' => '/admin/settings/mail-configuration',
-            'icon' => 'MailIcon',
+            'icon' => 'EnvelopeIcon',
             'owner_only' => true,
             'ability' => '',
             'model' => '',
@@ -261,7 +261,7 @@ return [
             'group' => '',
             'name' => 'Backup',
             'link' => '/admin/settings/backup',
-            'icon' => 'DatabaseIcon',
+            'icon' => 'CircleStackIcon',
             'owner_only' => true,
             'ability' => '',
             'model' => '',
@@ -271,7 +271,7 @@ return [
             'group' => '',
             'name' => 'Update App',
             'link' => '/admin/settings/update-app',
-            'icon' => 'RefreshIcon',
+            'icon' => 'ArrowPathIcon',
             'owner_only' => true,
             'ability' => '',
             'model' => '',
@@ -366,7 +366,7 @@ return [
             'title' => 'navigation.modules',
             'group' => 3,
             'link' => '/admin/modules',
-            'icon' => 'PuzzleIcon',
+            'icon' => 'PuzzlePieceIcon',
             'name' => 'Modules',
             'owner_only' => true,
             'ability' => '',
diff --git a/package.json b/package.json
index fe39ba68..fa8f5872 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@heroicons/vue": "^1.0.6",
+    "@heroicons/vue": "^2.2.0",
     "@popperjs/core": "^2.11.8",
     "@stripe/stripe-js": "^2.4.0",
     "@tiptap/core": "^2.11.2",
diff --git a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
index 964de2d6..61721269 100644
--- a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseDropdown>
     <template #activator>
-      <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit customField  -->
diff --git a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
index cdc57333..e9cc7611 100644
--- a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown :content-loading="customerStore.isFetchingViewData">
     <template #activator>
       <BaseButton v-if="route.name === 'customers.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- Edit Customer  -->
diff --git a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
index e9549c06..ea68e6e4 100644
--- a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'estimates.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="text-white" />
       </BaseButton>
-      <BaseIcon v-else class="text-gray-500" name="DotsHorizontalIcon" />
+      <BaseIcon v-else class="text-gray-500" name="EllipsisHorizontalIcon" />
     </template>
 
     <!-- Copy PDF url  -->
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
index 3fd07d45..c6d6d43f 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
@@ -5,9 +5,9 @@
         v-if="route.name === 'expenseCategorys.view'"
         variant="primary"
       >
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit expenseCategory  -->
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
index d979e2b5..74ea564a 100644
--- a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'expenses.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit expense  -->
diff --git a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
index 35d8d905..cab20230 100755
--- a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'invoices.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- Edit Invoice  -->
diff --git a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
index 5a51d172..c048e79c 100644
--- a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'items.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit item  -->
diff --git a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
index 569cfb08..651b253a 100644
--- a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'notes.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit note  -->
diff --git a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
index f23df97b..f256875e 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown :content-loading="contentLoading">
     <template #activator>
       <BaseButton v-if="route.name === 'payments.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- Copy pdf url  -->
diff --git a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
index d4bf9187..5402ca2f 100644
--- a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit paymentMode  -->
diff --git a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
index adaafb9d..6da6db96 100644
--- a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
@@ -5,9 +5,9 @@
         v-if="route.name === 'recurring-invoices.view'"
         variant="primary"
       >
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- Edit Recurring Invoice  -->
diff --git a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
index 606c503c..865fcdb9 100644
--- a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'roles.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit role  -->
diff --git a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
index 73897a23..96cc8133 100644
--- a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit tax-type  -->
diff --git a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
index 494d0bd7..2d544a1e 100644
--- a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
+++ b/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
@@ -2,9 +2,9 @@
   <BaseDropdown>
     <template #activator>
       <BaseButton v-if="route.name === 'users.view'" variant="primary">
-        <BaseIcon name="DotsHorizontalIcon" class="h-5 text-white" />
+        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
-      <BaseIcon v-else name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
     </template>
 
     <!-- edit user  -->
diff --git a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
index 5c15ba8a..8e51b478 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
@@ -10,7 +10,7 @@
       <div v-if="hasActiveProvider && isEdit">
         <BaseIcon
           v-tooltip="{ content: 'Fetch Latest Exchange rate' }"
-          name="RefreshIcon"
+          name="ArrowPathIcon"
           :class="`h-4 w-4 text-primary-500 cursor-pointer outline-none ${
             isFetching
               ? ' animate-spin rotate-180 cursor-not-allowed pointer-events-none '
diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
index 88e6fc04..2ef922ce 100644
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="onCancel"
         />
@@ -78,7 +78,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isCreateLoading"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
index 031280c3..637d2fe8 100644
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeCategoryModal"
         />
@@ -74,7 +74,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
index e5a6abe1..8269d12c 100644
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
 
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeCompanyModal"
         />
@@ -117,7 +117,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index a03aee11..ec034045 100644
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -9,7 +9,7 @@
         {{ modalStore.title }}
 
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeCustomerModal"
         />
@@ -167,7 +167,7 @@
                 >
                   <template #right>
                     <BaseIcon
-                      :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                      :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                       class="mr-1 text-gray-500 cursor-pointer"
                       @click="isShowPassword = !isShowPassword"
                     />
@@ -193,7 +193,7 @@
                 >
                   <template #right>
                     <BaseIcon
-                      :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                      :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                       class="mr-1 text-gray-500 cursor-pointer"
                       @click="isShowConfirmPassword = !isShowConfirmPassword"
                     />
@@ -438,7 +438,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isLoading"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
index f3d6b763..48276bb7 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -9,7 +9,7 @@
         {{ modalStore.title }}
 
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeExchangeRateModal"
         />
@@ -171,7 +171,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
index 32ba9247..01927d23 100644
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeDiskModal"
         />
@@ -40,7 +40,7 @@
             >
               <BaseIcon
                 v-if="!isRequestFire(slotProps)"
-                name="SaveIcon"
+                name="ArrowDownOnSquareIcon"
                 class="w-6 mr-2"
               />
 
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
index 5fd3f21d..b2dc66c6 100644
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeItemModal"
         />
@@ -107,7 +107,7 @@
             type="submit"
           >
             <template #left="slotProps">
-              <BaseIcon name="SaveIcon" :class="slotProps.class" />
+              <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
             </template>
             {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
           </BaseButton>
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
index fa6e12e2..a365bbeb 100644
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -7,7 +7,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeItemUnitModal"
         />
@@ -58,7 +58,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
index c71d0423..73db9095 100644
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeTestModal"
         />
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
index 0eeaa5e1..36881d45 100644
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeNoteModal"
         />
@@ -89,7 +89,7 @@
           type="submit"
         >
           <template #left="slotProps">
-            <BaseIcon name="SaveIcon" :class="slotProps.class" />
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
           </template>
           {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
index 88c017d7..d9cdf2ed 100644
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closePaymentModeModal"
         />
@@ -48,7 +48,7 @@
           type="submit"
         >
           <template #left="slotProps">
-            <BaseIcon name="SaveIcon" :class="slotProps.class" />
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
           </template>
           {{
             paymentStore.currentPaymentMode.id
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
index 40c87099..bd031da4 100644
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
 
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeRolesModal"
         />
@@ -140,7 +140,7 @@
           type="submit"
         >
           <template #left="slotProps">
-            <BaseIcon name="SaveIcon" :class="slotProps.class" />
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
           </template>
           {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
         </BaseButton>
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
index bcc30f97..a9675dc3 100644
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -4,7 +4,7 @@
       <div class="flex justify-between w-full">
         {{ modalTitle }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeModal"
         />
@@ -76,7 +76,7 @@
       </BaseButton>
       <BaseButton variant="primary" @click="chooseTemplate()">
         <template #left="slotProps">
-          <BaseIcon name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.choose') }}
       </BaseButton>
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
index bbdecd82..a45a204f 100644
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -8,7 +8,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeSendEstimateModal"
         />
@@ -82,7 +82,7 @@
           class="mr-3"
           @click="submitForm"
         >
-          <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
+          <BaseIcon v-if="!isLoading" name="PhotoIcon" class="h-5 mr-2" />
           {{ $t('general.preview') }}
         </BaseButton>
       </div>
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
index a20ea5c2..64133ca7 100644
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -8,7 +8,7 @@
       <div class="flex justify-between w-full">
         {{ modalTitle }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeSendInvoiceModal"
         />
@@ -88,7 +88,7 @@
             <BaseIcon
               v-if="!isLoading"
               :class="slotProps.class"
-              name="PhotographIcon"
+              name="PhotoIcon"
             />
           </template>
           {{ $t('general.preview') }}
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
index 0b539dbe..8d3e03c1 100644
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -8,7 +8,7 @@
       <div class="flex justify-between w-full">
         {{ modalTitle }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeSendPaymentModal"
         />
@@ -88,7 +88,7 @@
             <BaseIcon
               v-if="!isLoading"
               :class="slotProps.class"
-              name="PhotographIcon"
+              name="PhotoIcon"
             />
           </template>
           {{ $t('general.preview') }}
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
index ce059420..0e0c438d 100644
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -7,7 +7,7 @@
       <div class="flex justify-between w-full">
         {{ modalStore.title }}
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeTaxTypeModal"
         />
@@ -105,7 +105,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
index 0afdd994..657bc0b0 100644
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -10,7 +10,7 @@
           </p>
         </div>
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="h-6 w-6 text-gray-500 cursor-pointer"
           @click="closeModal"
         />
@@ -103,7 +103,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isLoading"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
index 0f907caf..d0e0d108 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -5,7 +5,7 @@
         {{ modalStore.title }}
 
         <BaseIcon
-          name="XIcon"
+          name="XMarkIcon"
           class="w-6 h-6 text-gray-500 cursor-pointer"
           @click="closeCustomFieldModal"
         />
@@ -201,7 +201,7 @@
             <BaseIcon
               v-if="!isSaving"
               :class="slotProps.class"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
             />
           </template>
           {{
diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index a6c768f5..3ec83b5d 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -56,7 +56,7 @@
       "
       @click.prevent="onToggle"
     >
-      <BaseIcon name="MenuIcon" class="!w-6 !h-6 text-gray-500" />
+      <BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-gray-500" />
     </div>
 
     <ul class="flex float-right h-8 m-0 list-none md:h-9">
@@ -160,7 +160,7 @@
 
           <BaseDropdownItem @click="logout">
             <BaseIcon
-              name="LogoutIcon"
+              name="ArrowRightOnRectangleIcon"
               class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
               aria-hidden="true"
             />
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index b97ff47c..82e70a51 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -56,7 +56,7 @@
               >
                 <span class="sr-only">Close sidebar</span>
                 <BaseIcon
-                  name="XIcon"
+                  name="XMarkIcon"
                   class="w-6 h-6 text-white"
                   aria-hidden="true"
                 />
diff --git a/resources/scripts/admin/views/SampleTable.vue b/resources/scripts/admin/views/SampleTable.vue
index 93b2f1e5..322c74c5 100644
--- a/resources/scripts/admin/views/SampleTable.vue
+++ b/resources/scripts/admin/views/SampleTable.vue
@@ -41,7 +41,7 @@
         <base-dropdown width-class="w-48" margin-class="mt-1">
           <template #activator>
             <div class="flex items-center justify-center">
-              <DotsHorizontalIcon class="w-6 h-6 text-gray-600" />
+              <EllipsisHorizontalIcon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
 
@@ -85,13 +85,13 @@ import {
   UserIcon,
   DocumentIcon,
   DocumentTextIcon,
-  DotsHorizontalIcon,
-} from '@heroicons/vue/solid'
+  EllipsisHorizontalIcon,
+} from '@heroicons/vue/24/solid'
 
 export default {
   components: {
     BaseTable,
-    DotsHorizontalIcon,
+    EllipsisHorizontalIcon,
     UserIcon,
     DocumentIcon,
     DocumentTextIcon,
diff --git a/resources/scripts/admin/views/auth/Login.vue b/resources/scripts/admin/views/auth/Login.vue
index 08cacf40..d0d1c229 100644
--- a/resources/scripts/admin/views/auth/Login.vue
+++ b/resources/scripts/admin/views/auth/Login.vue
@@ -31,7 +31,7 @@
       >
         <template #right>
           <BaseIcon
-            :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
             class="mr-1 text-gray-500 cursor-pointer"
             @click="isShowPassword = !isShowPassword"
           />
diff --git a/resources/scripts/admin/views/customers/Create.vue b/resources/scripts/admin/views/customers/Create.vue
index 14643aab..d83ec9c8 100644
--- a/resources/scripts/admin/views/customers/Create.vue
+++ b/resources/scripts/admin/views/customers/Create.vue
@@ -17,7 +17,7 @@
           <div class="flex items-center justify-end">
             <BaseButton type="submit" :loading="isSaving" :disabled="isSaving">
               <template #left="slotProps">
-                <BaseIcon name="SaveIcon" :class="slotProps.class" />
+                <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
               </template>
               {{
                 isEdit
@@ -223,7 +223,7 @@
               >
                 <template #right>
                   <BaseIcon
-                    :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                    :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                     class="mr-1 text-gray-500 cursor-pointer"
                     @click="isShowPassword = !isShowPassword"
                   />
@@ -250,7 +250,7 @@
               >
                 <template #right>
                   <BaseIcon
-                    :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                    :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                     class="mr-1 text-gray-500 cursor-pointer"
                     @click="isShowConfirmPassword = !isShowConfirmPassword"
                   />
diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
index 3fa8046f..83864fa6 100644
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@@ -22,10 +22,10 @@
             <template #right="slotProps">
               <BaseIcon
                 v-if="!showFilters"
-                name="FilterIcon"
+                name="FunnelIcon"
                 :class="slotProps.class"
               />
-              <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
             </template>
           </BaseButton>
 
diff --git a/resources/scripts/admin/views/customers/partials/CustomerChart.vue b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
index ef287680..0bc94ebc 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerChart.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
@@ -6,7 +6,7 @@
       <div class="col-span-12 xl:col-span-9 xxl:col-span-10">
         <div class="flex justify-between mt-1 mb-6">
           <h6 class="flex items-center">
-            <BaseIcon name="ChartSquareBarIcon" class="h-5 text-primary-400" />
+            <BaseIcon name="ChartBarSquareIcon" class="h-5 text-primary-400" />
             {{ $t('dashboard.monthly_chart.title') }}
           </h6>
 
diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
index 9d4af790..9f68b4ca 100644
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@@ -35,7 +35,7 @@
         variant="gray"
         @input="onSearch()"
       >
-        <BaseIcon name="SearchIcon" class="text-gray-500" />
+        <BaseIcon name="MagnifyingGlassIcon" class="text-gray-500" />
       </BaseInput>
 
       <div class="flex mb-6 ml-3" role="group" aria-label="First group">
@@ -47,7 +47,7 @@
         >
           <template #activator>
             <BaseButton variant="gray">
-              <BaseIcon name="FilterIcon" />
+              <BaseIcon name="FunnelIcon" />
             </BaseButton>
           </template>
 
diff --git a/resources/scripts/admin/views/dashboard/DashboardChart.vue b/resources/scripts/admin/views/dashboard/DashboardChart.vue
index c2302e9f..3d972c72 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChart.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChart.vue
@@ -18,7 +18,7 @@
       >
         <div class="flex justify-between mt-1 mb-4 flex-col md:flex-row">
           <h6 class="flex items-center sw-section-title h-10">
-            <BaseIcon name="ChartSquareBarIcon" class="text-primary-400 mr-1" />
+            <BaseIcon name="ChartBarSquareIcon" class="text-primary-400 mr-1" />
             {{ $t('dashboard.monthly_chart.title') }}
           </h6>
 
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
index 8aebb666..60919823 100644
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@@ -24,9 +24,9 @@
             <BaseIcon
               v-if="!showFilters"
               :class="slotProps.class"
-              name="FilterIcon"
+              name="FunnelIcon"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
 
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index b252092a..f9f2711d 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -73,7 +73,7 @@
             @input="onSearched()"
           >
             <template #right>
-              <BaseIcon name="SearchIcon" class="text-gray-400" />
+              <BaseIcon name="MagnifyingGlassIcon" class="text-gray-400" />
             </template>
           </BaseInput>
         </div>
@@ -87,7 +87,7 @@
           >
             <template #activator>
               <BaseButton size="md" variant="gray">
-                <BaseIcon name="FilterIcon" />
+                <BaseIcon name="FunnelIcon" />
               </BaseButton>
             </template>
 
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreate.vue b/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
index 6ee2658b..4213f33b 100644
--- a/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
+++ b/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
@@ -60,7 +60,7 @@
               <BaseIcon
                 v-if="!isSaving"
                 :class="slotProps.class"
-                name="SaveIcon"
+                name="ArrowDownOnSquareIcon"
               />
             </template>
             {{ $t('estimates.save_estimate') }}
diff --git a/resources/scripts/admin/views/expenses/Create.vue b/resources/scripts/admin/views/expenses/Create.vue
index a15eb97f..8f2275cd 100644
--- a/resources/scripts/admin/views/expenses/Create.vue
+++ b/resources/scripts/admin/views/expenses/Create.vue
@@ -45,7 +45,7 @@
               <template #left="slotProps">
                 <BaseIcon
                   v-if="!isSaving"
-                  name="SaveIcon"
+                  name="ArrowDownOnSquareIcon"
                   :class="slotProps.class"
                 />
               </template>
@@ -264,7 +264,7 @@
               <template #left="slotProps">
                 <BaseIcon
                   v-if="!isSaving"
-                  name="SaveIcon"
+                  name="ArrowDownOnSquareIcon"
                   :class="slotProps.class"
                 />
               </template>
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
index 1a166052..3321526a 100644
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@@ -17,10 +17,10 @@
           <template #right="slotProps">
             <BaseIcon
               v-if="!showFilters"
-              name="FilterIcon"
+              name="FunnelIcon"
               :class="slotProps.class"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
 
diff --git a/resources/scripts/admin/views/installation/Step6AccountSettings.vue b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
index d7a51656..ae60f065 100644
--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
@@ -69,7 +69,7 @@
           >
             <template #right>
               <BaseIcon
-                :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                 class="mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
@@ -94,7 +94,7 @@
           >
             <template #right>
               <BaseIcon
-                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                 class="mr-1 text-gray-500 cursor-pointer"
                 @click="isShowConfirmPassword = !isShowConfirmPassword"
               />
@@ -105,7 +105,7 @@
 
       <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-4">
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('wizard.save_cont') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
index 6ba35306..26e40b6e 100644
--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
@@ -153,7 +153,7 @@
 
       <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-4">
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('wizard.save_cont') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
index 0066bc19..f96b75a6 100644
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
@@ -134,7 +134,7 @@
           class="mt-4"
         >
           <template #left="slotProps">
-            <BaseIcon name="SaveIcon" :class="slotProps.class" />
+            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
           </template>
           {{ $t('wizard.save_cont') }}
         </BaseButton>
diff --git a/resources/scripts/admin/views/installation/database/MysqlDatabase.vue b/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
index f291c58c..60d309b8 100644
--- a/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
+++ b/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
@@ -98,7 +98,7 @@
       :disabled="isSaving"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
       {{ $t('wizard.save_cont') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue b/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
index 16477160..e77bcbec 100644
--- a/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
+++ b/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
@@ -118,7 +118,7 @@
       :disabled="isSaving"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
       {{ $t('wizard.save_cont') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/installation/database/SqliteDatabase.vue b/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
index 6e1a7feb..07858341 100644
--- a/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
+++ b/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
@@ -62,7 +62,7 @@
       :disabled="isSaving"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
       {{ $t('wizard.save_cont') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
index 333f11d0..f7c172f3 100644
--- a/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
@@ -67,7 +67,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
       {{ $t('general.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
index 13f00fab..f84a8ce8 100644
--- a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
@@ -62,7 +62,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -137,7 +137,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
       {{ $t('general.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
index df18069b..6e754434 100644
--- a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
@@ -160,7 +160,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -176,7 +176,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
 
       {{ $t('general.save') }}
diff --git a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
index be4ccfea..e18bdc5e 100644
--- a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
@@ -67,7 +67,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -163,7 +163,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
       </template>
       {{ $t('general.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
index ec5c6796..8be47245 100644
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@@ -17,10 +17,10 @@
           <template #right="slotProps">
             <BaseIcon
               v-if="!showFilters"
-              name="FilterIcon"
+              name="FunnelIcon"
               :class="slotProps.class"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
 
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 2e1656a2..5e816c7a 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -322,7 +322,7 @@ onSearched = debounce(onSearched, 500)
             @input="onSearched()"
           >
             <template #right>
-              <BaseIcon name="SearchIcon" class="h-5 text-gray-400" />
+              <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
             </template>
           </BaseInput>
         </div>
@@ -331,7 +331,7 @@ onSearched = debounce(onSearched, 500)
           <BaseDropdown class="ml-3" position="bottom-start">
             <template #activator>
               <BaseButton size="md" variant="gray">
-                <BaseIcon name="FilterIcon" />
+                <BaseIcon name="FunnelIcon" />
               </BaseButton>
             </template>
             <div
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
index 6bf9d212..cc2b0bc4 100644
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
+++ b/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
@@ -58,7 +58,7 @@
             <template #left="slotProps">
               <BaseIcon
                 v-if="!isSaving"
-                name="SaveIcon"
+                name="ArrowDownOnSquareIcon"
                 :class="slotProps.class"
               />
             </template>
diff --git a/resources/scripts/admin/views/items/Create.vue b/resources/scripts/admin/views/items/Create.vue
index 1a73695b..d4b57232 100644
--- a/resources/scripts/admin/views/items/Create.vue
+++ b/resources/scripts/admin/views/items/Create.vue
@@ -118,7 +118,7 @@
               <template #left="slotProps">
                 <BaseIcon
                   v-if="!isSaving"
-                  name="SaveIcon"
+                  name="ArrowDownOnSquareIcon"
                   :class="slotProps.class"
                 />
               </template>
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
index f6ca9090..ce9596db 100644
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@@ -18,9 +18,9 @@
               <BaseIcon
                 v-if="!showFilters"
                 :class="slotProps.class"
-                name="FilterIcon"
+                name="FunnelIcon"
               />
-              <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
             </template>
           </BaseButton>
 
diff --git a/resources/scripts/admin/views/modules/Index.vue b/resources/scripts/admin/views/modules/Index.vue
index b7552913..b9222ebf 100644
--- a/resources/scripts/admin/views/modules/Index.vue
+++ b/resources/scripts/admin/views/modules/Index.vue
@@ -90,7 +90,7 @@
           <div class="flex space-x-2">
             <BaseButton class="mt-6" :loading="isSaving" type="submit">
               <template #left="slotProps">
-                <BaseIcon name="SaveIcon" :class="slotProps.class" />
+                <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
               </template>
               {{ $t('general.save') }}
             </BaseButton>
diff --git a/resources/scripts/admin/views/modules/View.vue b/resources/scripts/admin/views/modules/View.vue
index 42903cc1..6755d8af 100644
--- a/resources/scripts/admin/views/modules/View.vue
+++ b/resources/scripts/admin/views/modules/View.vue
@@ -274,7 +274,7 @@
               class="mr-4 flex items-center justify-center text-base"
               @click="installModule()"
             >
-              <BaseIcon v-if="!isInstalling" name="DownloadIcon" class="mr-2" />
+              <BaseIcon v-if="!isInstalling" name="ArrowDownTrayIcon" class="mr-2" />
               {{ $t('modules.install') }}
             </BaseButton>
           </div>
@@ -306,7 +306,7 @@
                 class="mr-4 flex items-center justify-center text-base"
                 @click="disableModule"
               >
-                <BaseIcon v-if="!isDisabling" name="BanIcon" class="mr-2" />
+                <BaseIcon v-if="!isDisabling" name="NoSymbolIcon" class="mr-2" />
                 {{ $t('modules.disable') }}
               </BaseButton>
               <BaseButton
diff --git a/resources/scripts/admin/views/payments/Create.vue b/resources/scripts/admin/views/payments/Create.vue
index 5716203e..61dc35ce 100644
--- a/resources/scripts/admin/views/payments/Create.vue
+++ b/resources/scripts/admin/views/payments/Create.vue
@@ -27,7 +27,7 @@
             <template #left="slotProps">
               <BaseIcon
                 v-if="!isSaving"
-                name="SaveIcon"
+                name="ArrowDownOnSquareIcon"
                 :class="slotProps.class"
               />
             </template>
@@ -237,7 +237,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
index e28712fd..5ff72c7c 100644
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@@ -19,9 +19,9 @@
             <BaseIcon
               v-if="!showFilters"
               :class="slotProps.class"
-              name="FilterIcon"
+              name="FunnelIcon"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
 
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index b33e2193..55bd340d 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -54,7 +54,7 @@
           type="text"
           @input="onSearch"
         >
-          <BaseIcon name="SearchIcon" class="h-5" />
+          <BaseIcon name="MagnifyingGlassIcon" class="h-5" />
         </BaseInput>
 
         <div class="flex ml-3" role="group" aria-label="First group">
@@ -65,7 +65,7 @@
           >
             <template #activator>
               <BaseButton variant="gray">
-                <BaseIcon name="FilterIcon" />
+                <BaseIcon name="FunnelIcon" />
               </BaseButton>
             </template>
 
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
index 371fd58a..395101e3 100644
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@@ -23,10 +23,10 @@
           <template #right="slotProps">
             <BaseIcon
               v-if="!showFilters"
-              name="FilterIcon"
+              name="FunnelIcon"
               :class="slotProps.class"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
 
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
index 85efd4d4..fde47c6a 100644
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
@@ -56,7 +56,7 @@
             <template #left="slotProps">
               <BaseIcon
                 v-if="!isSaving"
-                name="SaveIcon"
+                name="ArrowDownOnSquareIcon"
                 :class="slotProps.class"
               />
             </template>
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 3fb0e9f6..fc39f320 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -175,7 +175,7 @@ onSearched = debounce(onSearched, 500)
           @input="onSearched()"
         >
           <template #right>
-            <BaseIcon name="SearchIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
           </template>
         </BaseInput>
       </div>
@@ -184,7 +184,7 @@ onSearched = debounce(onSearched, 500)
         <BaseDropdown class="ml-3" position="bottom-start">
           <template #activator>
             <BaseButton size="md" variant="gray">
-              <BaseIcon name="FilterIcon" class="h-5" />
+              <BaseIcon name="FunnelIcon" class="h-5" />
             </BaseButton>
           </template>
           <div
diff --git a/resources/scripts/admin/views/reports/layout/Index.vue b/resources/scripts/admin/views/reports/layout/Index.vue
index b852fe2c..c3465dac 100644
--- a/resources/scripts/admin/views/reports/layout/Index.vue
+++ b/resources/scripts/admin/views/reports/layout/Index.vue
@@ -12,7 +12,7 @@
       <template #actions>
         <BaseButton variant="primary" class="ml-4" @click="onDownload">
           <template #left="slotProps">
-            <BaseIcon name="DownloadIcon" :class="slotProps.class" />
+            <BaseIcon name="ArrowDownTrayIcon" :class="slotProps.class" />
           </template>
           {{ $t('reports.download_pdf') }}
         </BaseButton>
diff --git a/resources/scripts/admin/views/settings/AccountSetting.vue b/resources/scripts/admin/views/settings/AccountSetting.vue
index caa1d461..689638a6 100644
--- a/resources/scripts/admin/views/settings/AccountSetting.vue
+++ b/resources/scripts/admin/views/settings/AccountSetting.vue
@@ -86,7 +86,7 @@
         <template #left="slotProps">
           <BaseIcon
             v-if="!isSaving"
-            name="SaveIcon"
+            name="ArrowDownOnSquareIcon"
             :class="slotProps.class"
           ></BaseIcon>
         </template>
diff --git a/resources/scripts/admin/views/settings/BackupSetting.vue b/resources/scripts/admin/views/settings/BackupSetting.vue
index 3b118d6a..9852c979 100644
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ b/resources/scripts/admin/views/settings/BackupSetting.vue
@@ -47,12 +47,12 @@
         <BaseDropdown>
           <template #activator>
             <div class="inline-block">
-              <BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
             </div>
           </template>
 
           <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudDownloadIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-gray-600" />
 
             {{ $t('general.download') }}
           </BaseDropdownItem>
diff --git a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
index ade292a0..7156ff16 100644
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
@@ -103,7 +103,7 @@
         class="mt-6"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
         </template>
         {{ $t('settings.company_info.save') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
index 8635058e..b7d2d2d7 100644
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -47,7 +47,7 @@
         <BaseDropdown>
           <template #activator>
             <div class="inline-block">
-              <DotsHorizontalIcon class="w-5 text-gray-500" />
+              <EllipsisHorizontalIcon class="w-5 text-gray-500" />
             </div>
           </template>
 
@@ -71,16 +71,16 @@ import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useDialogStore } from '@/scripts/stores/dialog'
-import { SaveIcon } from '@heroicons/vue/outline'
+import { ArrowDownOnSquareIcon } from '@heroicons/vue/24/outline'
 import { ref, computed, inject, reactive } from 'vue'
 import ExchangeRateProviderModal from '@/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue'
 import { useI18n } from 'vue-i18n'
 import {
   PlusIcon,
-  DotsHorizontalIcon,
+  EllipsisHorizontalIcon,
   PencilIcon,
   TrashIcon,
-} from '@heroicons/vue/outline'
+} from '@heroicons/vue/24/outline'
 import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
 
 // store
diff --git a/resources/scripts/admin/views/settings/FileDiskSetting.vue b/resources/scripts/admin/views/settings/FileDiskSetting.vue
index def115af..354fa481 100644
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ b/resources/scripts/admin/views/settings/FileDiskSetting.vue
@@ -39,7 +39,7 @@
         <BaseDropdown v-if="isNotSystemDisk(row.data)">
           <template #activator>
             <div class="inline-block">
-              <BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
             </div>
           </template>
 
diff --git a/resources/scripts/admin/views/settings/NotificationsSetting.vue b/resources/scripts/admin/views/settings/NotificationsSetting.vue
index 42d55037..f863af28 100644
--- a/resources/scripts/admin/views/settings/NotificationsSetting.vue
+++ b/resources/scripts/admin/views/settings/NotificationsSetting.vue
@@ -33,7 +33,7 @@
             <BaseIcon
               v-if="!isSaving"
               :class="slotProps.class"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
             />
           </template>
 
diff --git a/resources/scripts/admin/views/settings/PreferencesSetting.vue b/resources/scripts/admin/views/settings/PreferencesSetting.vue
index bbd7d6d3..08550eb6 100644
--- a/resources/scripts/admin/views/settings/PreferencesSetting.vue
+++ b/resources/scripts/admin/views/settings/PreferencesSetting.vue
@@ -143,7 +143,7 @@
         class="mt-6"
       >
         <template #left="slotProps">
-          <BaseIcon name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('settings.company_info.save') }}
       </BaseButton>
@@ -183,7 +183,7 @@
             class="mt-6"
           >
             <template #left="slotProps">
-              <BaseIcon name="SaveIcon" :class="slotProps.class" />
+              <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
             </template>
             {{ $t('general.save') }}
           </BaseButton>
diff --git a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
index 5d74f306..938cc1f2 100644
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
@@ -129,7 +129,7 @@
                 {{ $t('general.remove') }}
                 <template #left="slotProps">
                   <BaseIcon
-                    name="XIcon"
+                    name="XMarkIcon"
                     class="!sm:m-0"
                     :class="slotProps.class"
                   />
@@ -189,7 +189,7 @@
     @click="submitForm"
   >
     <template #left="slotProps">
-      <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+      <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
     </template>
     {{ $t('settings.customization.save') }}
   </BaseButton>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
index e996a7f4..dc75dbde 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
@@ -57,7 +57,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
index 38200d5f..f8a0591a 100644
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
@@ -46,7 +46,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
index daf1a5d3..ac0ad5b0 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
@@ -55,7 +55,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
index c44780ab..f994fa15 100644
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
@@ -44,7 +44,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
index eab86295..73ff180b 100644
--- a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
@@ -15,7 +15,7 @@
       <BaseDropdown>
         <template #activator>
           <div class="inline-block">
-            <BaseIcon name="DotsHorizontalIcon" class="text-gray-500" />
+            <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
           </div>
         </template>
 
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
index f8468f26..eb98f587 100644
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
@@ -47,7 +47,7 @@
       class="mt-4"
     >
       <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
       </template>
       {{ $t('settings.customization.save') }}
     </BaseButton>
diff --git a/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
index 031c9412..f3969876 100644
--- a/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
@@ -67,7 +67,7 @@
         type="submit"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="SaveIcon" />
+          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
index 75d2ae08..18a86af9 100644
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@@ -59,7 +59,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -133,7 +133,7 @@
         type="submit"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
index 91f47419..51b54d83 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@@ -154,7 +154,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -172,7 +172,7 @@
         type="submit"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
index 953de385..80af5dde 100644
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@@ -63,7 +63,7 @@
         >
           <template #right>
             <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
               class="mr-1 text-gray-500 cursor-pointer"
               @click="isShowPassword = !isShowPassword"
             />
@@ -159,7 +159,7 @@
         variant="primary"
       >
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>
diff --git a/resources/scripts/admin/views/users/Create.vue b/resources/scripts/admin/views/users/Create.vue
index 811548c4..7ef4e98d 100644
--- a/resources/scripts/admin/views/users/Create.vue
+++ b/resources/scripts/admin/views/users/Create.vue
@@ -149,7 +149,7 @@
             <template #left="slotProps">
               <BaseIcon
                 v-if="!isSaving"
-                name="SaveIcon"
+                name="ArrowDownOnSquareIcon"
                 :class="slotProps.class"
               />
             </template>
diff --git a/resources/scripts/admin/views/users/Index.vue b/resources/scripts/admin/views/users/Index.vue
index d8c6558d..79f82c08 100644
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@@ -18,10 +18,10 @@
             <template #right="slotProps">
               <BaseIcon
                 v-if="!showFilters"
-                name="FilterIcon"
+                name="FunnelIcon"
                 :class="slotProps.class"
               />
-              <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
             </template>
           </BaseButton>
 
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index b150ed73..50f25e03 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -9,7 +9,7 @@
         @input="onSearch"
       >
         <template #left>
-          <BaseIcon name="SearchIcon" class="text-gray-400" />
+          <BaseIcon name="MagnifyingGlassIcon" class="text-gray-400" />
         </template>
         <template #right>
           <SpinnerIcon v-if="isSearching" class="h-5 text-primary-500" />
diff --git a/resources/scripts/components/base/BaseCustomerSelectInput.vue b/resources/scripts/components/base/BaseCustomerSelectInput.vue
index 79d166dd..ea60b20d 100644
--- a/resources/scripts/components/base/BaseCustomerSelectInput.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectInput.vue
@@ -21,7 +21,7 @@
         @click="addCustomer"
       >
         <BaseIcon
-          name="UserAddIcon"
+          name="UserPlusIcon"
           class="h-4 mr-2 -ml-2 text-center text-primary-400"
         />
 
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index b91a5430..b0c99e4b 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -357,7 +357,7 @@
               "
               @click="openCustomerModal"
             >
-              <BaseIcon name="UserAddIcon" class="text-primary-400" />
+              <BaseIcon name="UserPlusIcon" class="text-primary-400" />
 
               <label
                 class="
diff --git a/resources/scripts/components/base/BaseErrorAlert.vue b/resources/scripts/components/base/BaseErrorAlert.vue
index 6e706068..c80a5849 100644
--- a/resources/scripts/components/base/BaseErrorAlert.vue
+++ b/resources/scripts/components/base/BaseErrorAlert.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { XCircleIcon } from '@heroicons/vue/solid'
+import { XCircleIcon } from '@heroicons/vue/24/solid'
 
 const props = defineProps({
   errorTitle: {
diff --git a/resources/scripts/components/base/BaseFileUploader.vue b/resources/scripts/components/base/BaseFileUploader.vue
index 4d7bd158..044c89e7 100644
--- a/resources/scripts/components/base/BaseFileUploader.vue
+++ b/resources/scripts/components/base/BaseFileUploader.vue
@@ -67,7 +67,7 @@
     <!-- Not Selected -->
     <div v-else-if="!localFiles.length" class="flex flex-col items-center">
       <BaseIcon
-        name="CloudUploadIcon"
+        name="CloudArrowUpIcon"
         class="h-6 mb-2 text-xl leading-6 text-gray-400"
       />
       <p class="text-xs leading-4 text-center text-gray-400">
@@ -171,7 +171,7 @@
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+        <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
       </a>
     </div>
 
@@ -272,7 +272,7 @@
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
         </span>
       </a>
     </div>
@@ -370,7 +370,7 @@
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
         </span>
       </a>
     </div>
diff --git a/resources/scripts/components/base/BaseIcon.vue b/resources/scripts/components/base/BaseIcon.vue
index 830ab358..8ee698fc 100644
--- a/resources/scripts/components/base/BaseIcon.vue
+++ b/resources/scripts/components/base/BaseIcon.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import * as heroIcons from '@heroicons/vue/outline'
+import * as heroIcons from '@heroicons/vue/24/outline'
 
 const isLoaded = ref(false)
 
diff --git a/resources/scripts/components/base/BaseInfoAlert.vue b/resources/scripts/components/base/BaseInfoAlert.vue
index 9fceda15..06c3f839 100644
--- a/resources/scripts/components/base/BaseInfoAlert.vue
+++ b/resources/scripts/components/base/BaseInfoAlert.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="rounded-md bg-yellow-50 p-4 relative">
     <BaseIcon
-      name="XIcon"
+      name="XMarkIcon"
       class="h-5 w-5 text-yellow-500 absolute right-4 cursor-pointer"
       @click="$emit('hide')"
     />
@@ -83,7 +83,7 @@
 </template>
 
 <script setup>
-import { XCircleIcon } from '@heroicons/vue/solid'
+import { XCircleIcon } from '@heroicons/vue/24/solid'
 
 const emits = defineEmits(['hide'])
 const props = defineProps({
diff --git a/resources/scripts/components/base/base-editor/BaseEditor.vue b/resources/scripts/components/base/base-editor/BaseEditor.vue
index b40f442d..ec27aba4 100644
--- a/resources/scripts/components/base/base-editor/BaseEditor.vue
+++ b/resources/scripts/components/base/base-editor/BaseEditor.vue
@@ -17,7 +17,7 @@
             <div
               class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-black bg-white rounded-sm md:h-9 md:w-9"
             >
-              <dots-vertical-icon class="w-6 h-6 text-gray-600" />
+              <EllipsisVerticalIcon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
           <div class="flex flex-wrap space-x-1">
@@ -74,7 +74,7 @@ import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import TextAlign from '@tiptap/extension-text-align'
 import Link from '@tiptap/extension-link'
-import { DotsVerticalIcon } from '@heroicons/vue/outline'
+import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 import {
   BoldIcon,
   CodingIcon,
@@ -89,12 +89,12 @@ import {
   CodeBlockIcon,
   MenuCenterIcon,
 } from './icons/index.js'
-import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon, LinkIcon } from '@heroicons/vue/solid'
+import { Bars3BottomLeftIcon, Bars3BottomRightIcon, Bars3Icon, LinkIcon } from '@heroicons/vue/24/solid'
 
 export default {
   components: {
     EditorContent,
-    DotsVerticalIcon,
+    EllipsisVerticalIcon,
   },
 
   props: {
@@ -143,9 +143,9 @@ export default {
       { name: 'codeBlock', icon: markRaw(CodeBlockIcon), action: () => editor.value.chain().focus().toggleCodeBlock().run() },
       { name: 'undo', icon: markRaw(UndoIcon), action: () => editor.value.chain().focus().undo().run() },
       { name: 'redo', icon: markRaw(RedoIcon), action: () => editor.value.chain().focus().redo().run() },
-      { name: 'alignLeft', icon: markRaw(MenuAlt2Icon), action: () => editor.value.chain().focus().setTextAlign('left').run() },
-      { name: 'alignRight', icon: markRaw(MenuAlt3Icon), action: () => editor.value.chain().focus().setTextAlign('right').run() },
-      { name: 'alignJustify', icon: markRaw(MenuIcon), action: () => editor.value.chain().focus().setTextAlign('justify').run() },
+      { name: 'alignLeft', icon: markRaw(Bars3BottomLeftIcon), action: () => editor.value.chain().focus().setTextAlign('left').run() },
+      { name: 'alignRight', icon: markRaw(Bars3BottomRightIcon), action: () => editor.value.chain().focus().setTextAlign('right').run() },
+      { name: 'alignJustify', icon: markRaw(Bars3Icon), action: () => editor.value.chain().focus().setTextAlign('justify').run() },
       { name: 'alignCenter', icon: markRaw(MenuCenterIcon), action: () => editor.value.chain().focus().setTextAlign('center').run() },
       { name: 'addLink', icon: markRaw(LinkIcon), action: () => {
         const url = window.prompt('URL')
diff --git a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
index 4b504a16..e98b7720 100644
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
@@ -93,7 +93,7 @@
               </router-link>
 
               <BaseDropdownItem @click="logout">
-                <LogoutIcon
+                <ArrowRightOnRectangleIcon
                   class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                   aria-hidden="true"
                 />
@@ -121,8 +121,8 @@
             "
           >
             <span class="sr-only">Open main menu</span>
-            <MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
-            <XIcon v-else class="block h-6 w-6" aria-hidden="true" />
+            <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
+            <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
           </DisclosureButton>
         </div>
       </div>
@@ -206,7 +206,7 @@ import {
   Menu,
   MenuButton,
 } from '@headlessui/vue'
-import { MenuIcon, XIcon, LogoutIcon, CogIcon } from '@heroicons/vue/outline'
+import { Bars3Icon, XMarkIcon, ArrowRightOnRectangleIcon, CogIcon } from '@heroicons/vue/24/outline'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
diff --git a/resources/scripts/customer/views/auth/Login.vue b/resources/scripts/customer/views/auth/Login.vue
index 87a60e23..2c1fe2d5 100644
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@@ -38,7 +38,7 @@
       >
         <template #right>
           <BaseIcon
-            :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
             class="mr-1 text-gray-500 cursor-pointer"
             @click="isShowPassword = !isShowPassword"
           />
diff --git a/resources/scripts/customer/views/auth/ResetPassword.vue b/resources/scripts/customer/views/auth/ResetPassword.vue
index 8e9095d4..780c36c2 100644
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@@ -30,7 +30,7 @@
       >
         <template #right>
           <BaseIcon
-            :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
             class="mr-1 text-gray-500 cursor-pointer"
             @click="isShowPassword = !isShowPassword"
           />
diff --git a/resources/scripts/customer/views/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
index be06c74e..f8bb8304 100644
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@@ -23,10 +23,10 @@
           <template #right="slotProps">
             <BaseIcon
               v-if="!showFilters"
-              name="FilterIcon"
+              name="FunnelIcon"
               :class="slotProps.class"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
       </template>
@@ -50,7 +50,7 @@
         class="px-3 mt-2"
       >
         <BaseInput v-model="filters.estimate_number">
-          <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
           <BaseIcon name="HashtagIcon" class="h-5 mr-3 text-gray-600" />
         </BaseInput>
       </BaseInputGroup>
@@ -119,7 +119,7 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
             </template>
             <router-link :to="`estimates/${row.data.id}/view`">
               <BaseDropdownItem>
diff --git a/resources/scripts/customer/views/estimates/View.vue b/resources/scripts/customer/views/estimates/View.vue
index fcd920d3..b75b222e 100644
--- a/resources/scripts/customer/views/estimates/View.vue
+++ b/resources/scripts/customer/views/estimates/View.vue
@@ -46,7 +46,7 @@
           @input="onSearch"
         >
           <template #right>
-            <BaseIcon name="SearchIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
           </template>
         </BaseInput>
 
@@ -58,7 +58,7 @@
           >
             <template #activator>
               <BaseButton variant="gray">
-                <BaseIcon name="FilterIcon" class="h-5" />
+                <BaseIcon name="FunnelIcon" class="h-5" />
               </BaseButton>
             </template>
 
diff --git a/resources/scripts/customer/views/invoices/Index.vue b/resources/scripts/customer/views/invoices/Index.vue
index 410fadc3..1a4e28b8 100644
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@@ -19,10 +19,10 @@
           <template #right="slotProps">
             <BaseIcon
               v-if="!showFilters"
-              name="FilterIcon"
+              name="FunnelIcon"
               :class="slotProps.class"
             />
-            <BaseIcon v-else name="XIcon" :class="slotProps.class" />
+            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
           </template>
         </BaseButton>
       </template>
@@ -45,7 +45,7 @@
         class="px-3 mt-2"
       >
         <BaseInput v-model="filters.invoice_number">
-          <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
           <BaseIcon name="HashtagIcon" class="h-5 ml-3 text-gray-600" />
         </BaseInput>
       </BaseInputGroup>
@@ -126,7 +126,7 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
             </template>
             <router-link :to="`invoices/${row.data.id}/view`">
               <BaseDropdownItem>
diff --git a/resources/scripts/customer/views/invoices/View.vue b/resources/scripts/customer/views/invoices/View.vue
index f8161127..d9ced91a 100644
--- a/resources/scripts/customer/views/invoices/View.vue
+++ b/resources/scripts/customer/views/invoices/View.vue
@@ -52,7 +52,7 @@
           @input="onSearch"
         >
           <template #right>
-            <BaseIcon name="SearchIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
           </template>
         </BaseInput>
 
@@ -64,7 +64,7 @@
           >
             <template #activator>
               <BaseButton variant="gray">
-                <BaseIcon name="FilterIcon" class="h-5" />
+                <BaseIcon name="FunnelIcon" class="h-5" />
               </BaseButton>
             </template>
 
diff --git a/resources/scripts/customer/views/payments/Index.vue b/resources/scripts/customer/views/payments/Index.vue
index faad1764..0fd4207d 100644
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -21,9 +21,9 @@
             <BaseIcon
               v-if="!showFilters"
               :class="slotProps.class"
-              name="FilterIcon"
+              name="FunnelIcon"
             />
-            <BaseIcon v-else :class="slotProps.class" name="XIcon" />
+            <BaseIcon v-else :class="slotProps.class" name="XMarkIcon" />
           </template>
         </BaseButton>
       </template>
@@ -111,7 +111,7 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="w-5 text-gray-500" />
             </template>
             <router-link :to="`payments/${row.data.id}/view`">
               <BaseDropdownItem>
diff --git a/resources/scripts/customer/views/payments/View.vue b/resources/scripts/customer/views/payments/View.vue
index 1e03a2d1..b5c49971 100644
--- a/resources/scripts/customer/views/payments/View.vue
+++ b/resources/scripts/customer/views/payments/View.vue
@@ -40,7 +40,7 @@
           @input="onSearch"
         >
           <template #right>
-            <BaseIcon name="SearchIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
           </template>
         </BaseInput>
 
@@ -52,7 +52,7 @@
           >
             <template #activator>
               <BaseButton variant="gray">
-                <BaseIcon name="FilterIcon" class="h-5" />
+                <BaseIcon name="FunnelIcon" class="h-5" />
               </BaseButton>
             </template>
 
diff --git a/resources/scripts/customer/views/settings/AddressInformation.vue b/resources/scripts/customer/views/settings/AddressInformation.vue
index 85e47100..13ff4a4f 100644
--- a/resources/scripts/customer/views/settings/AddressInformation.vue
+++ b/resources/scripts/customer/views/settings/AddressInformation.vue
@@ -230,7 +230,7 @@
           <template #left="slotProps">
             <BaseIcon
               v-if="!isSaving"
-              name="SaveIcon"
+              name="ArrowDownOnSquareIcon"
               :class="slotProps.class"
             />
           </template>
diff --git a/resources/scripts/customer/views/settings/CustomerSettings.vue b/resources/scripts/customer/views/settings/CustomerSettings.vue
index e17bec8c..c452df7c 100644
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@@ -72,7 +72,7 @@
           >
             <template #right>
               <BaseIcon
-                :name="isShowPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                 class="mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
@@ -95,7 +95,7 @@
           >
             <template #right>
               <BaseIcon
-                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeOffIcon'"
+                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
                 class="mr-1 text-gray-500 cursor-pointer"
                 @click="isShowConfirmPassword = !isShowConfirmPassword"
               />
@@ -106,7 +106,7 @@
 
       <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
         <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
+          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
         </template>
         {{ $t('general.save') }}
       </BaseButton>
@@ -115,7 +115,7 @@
 </template>
 
 <script setup>
-import { SaveIcon } from '@heroicons/vue/solid'
+import { ArrowDownOnSquareIcon } from '@heroicons/vue/24/solid'
 import { ref, computed } from 'vue'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useUserStore } from '@/scripts/customer/stores/user'
diff --git a/resources/scripts/customer/views/settings/SettingsIndex.vue b/resources/scripts/customer/views/settings/SettingsIndex.vue
index ea9ed3af..be504c3e 100644
--- a/resources/scripts/customer/views/settings/SettingsIndex.vue
+++ b/resources/scripts/customer/views/settings/SettingsIndex.vue
@@ -65,7 +65,7 @@
 import { ref, reactive, watchEffect, computed } from 'vue'
 import BaseList from '@/scripts/components/list/BaseList.vue'
 import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
-import { OfficeBuildingIcon, UserIcon } from '@heroicons/vue/outline'
+import { BuildingOfficeIcon, UserIcon } from '@heroicons/vue/24/outline'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
@@ -94,7 +94,7 @@ const menuItems = reactive([
   {
     link: `/${globalStore.companySlug}/customer/settings/address-info`,
     title: t('settings.menu_title.address_information'),
-    icon: OfficeBuildingIcon,
+    icon: BuildingOfficeIcon,
   },
 ])