diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index b3aecff4..5b97e80a 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -16,7 +16,9 @@
         v-if="isManager() && !isMobileView"
         @click="showDataFieldsModal = true"
       >
-        <EditIcon class="h-4 w-4" />
+        <template #icon>
+          <EditIcon />
+        </template>
       </Button>
       <Button
         label="Save"
diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index b358ca4f..b98792c7 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -30,20 +30,24 @@
                   <DragIcon class="h-3.5" />
                   <div>{{ __(element.label) }}</div>
                 </div>
-                <div class="flex cursor-pointer items-center gap-1">
+                <div class="flex cursor-pointer items-center gap-0.5">
                   <Button
                     variant="ghost"
                     class="!h-5 w-5 !p-1"
                     @click="editColumn(element)"
                   >
-                    <EditIcon class="h-3.5" />
+                    <template #icon>
+                      <EditIcon class="h-3.5" />
+                    </template>
                   </Button>
                   <Button
                     variant="ghost"
                     class="!h-5 w-5 !p-1"
                     @click="removeColumn(element)"
                   >
-                    <FeatherIcon name="x" class="h-3.5" />
+                    <template #icon>
+                      <FeatherIcon name="x" class="h-3.5" />
+                    </template>
                   </Button>
                 </div>
               </div>
@@ -215,7 +219,9 @@ const fields = computed(() => {
 })
 
 function addColumn(c) {
-  let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type) ? 'right' : 'left'
+  let align = ['Float', 'Int', 'Percent', 'Currency'].includes(c.type)
+    ? 'right'
+    : 'left'
   let _column = {
     label: c.label,
     type: c.fieldtype,
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 19240a86..dcfa2846 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -58,7 +58,9 @@
             variant="outline"
             @click="showGridFieldsEditorModal = true"
           >
-            <FeatherIcon name="settings" class="h-4 w-4 text-ink-gray-7" />
+            <template #icon>
+              <FeatherIcon name="settings" class="size-4 text-ink-gray-7" />
+            </template>
           </Button>
         </div>
       </div>
@@ -281,7 +283,9 @@
                   variant="outline"
                   @click="showRowList[index] = true"
                 >
-                  <EditIcon class="h-4 w-4 text-ink-gray-7" />
+                  <template #icon>
+                    <EditIcon class="text-ink-gray-7" />
+                  </template>
                 </Button>
               </div>
               <GridRowModal
diff --git a/frontend/src/components/Controls/GridRowModal.vue b/frontend/src/components/Controls/GridRowModal.vue
index ef2bc854..e38dd87c 100644
--- a/frontend/src/components/Controls/GridRowModal.vue
+++ b/frontend/src/components/Controls/GridRowModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openGridRowFieldsModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
index 8f2ed2da..d9592c13 100644
--- a/frontend/src/components/DropdownItem.vue
+++ b/frontend/src/components/DropdownItem.vue
@@ -31,7 +31,9 @@
               class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="option.onClick"
             >
-              <SuccessIcon />
+              <template #icon>
+                <SuccessIcon />
+              </template>
             </Button>
           </div>
         </Tooltip>
@@ -43,7 +45,9 @@
               class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
               @click="toggleEditMode"
             >
-              <EditIcon />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
           </div>
         </Tooltip>
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index 6428c9a4..e7c4543f 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/CallLogDetailModal.vue b/frontend/src/components/Modals/CallLogDetailModal.vue
index 04a30d5c..739f78ef 100644
--- a/frontend/src/components/Modals/CallLogDetailModal.vue
+++ b/frontend/src/components/Modals/CallLogDetailModal.vue
@@ -39,10 +39,14 @@
               class="w-7"
               @click="openCallLogModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index d61dbc45..8ab881cd 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -16,10 +16,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="w-4 h-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="w-4 h-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index b275d574..25a0c022 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/CreateDocumentModal.vue b/frontend/src/components/Modals/CreateDocumentModal.vue
index 05e277b9..be5bbf01 100644
--- a/frontend/src/components/Modals/CreateDocumentModal.vue
+++ b/frontend/src/components/Modals/CreateDocumentModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index e4ce7419..8bf9498b 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 1976ad3c..d82dbe52 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="h-4 w-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="h-4 w-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index c4b87536..d038011c 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -15,10 +15,14 @@
               class="w-7"
               @click="openQuickEntryModal"
             >
-              <EditIcon class="w-4 h-4" />
+              <template #icon>
+                <EditIcon />
+              </template>
             </Button>
             <Button variant="ghost" class="w-7" @click="show = false">
-              <FeatherIcon name="x" class="w-4 h-4" />
+              <template #icon>
+                <FeatherIcon name="x" class="size-4" />
+              </template>
             </Button>
           </div>
         </div>
diff --git a/frontend/src/components/SidePanelLayoutEditor.vue b/frontend/src/components/SidePanelLayoutEditor.vue
index 3b7ab0a3..09493c61 100644
--- a/frontend/src/components/SidePanelLayoutEditor.vue
+++ b/frontend/src/components/SidePanelLayoutEditor.vue
@@ -41,7 +41,9 @@
                 variant="ghost"
                 @click="section.editingLabel = true"
               >
-                <EditIcon class="h-3.5" />
+                <template #icon>
+                  <EditIcon class="h-3.5" />
+                </template>
               </Button>
               <Button
                 v-if="section.editable !== false"