diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 2c8d0341..05c0e317 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -238,12 +238,9 @@
               <Button
                 class="!size-4"
                 variant="ghost"
+                :icon="SelectIcon"
                 @click="activity.show_others = !activity.show_others"
-              >
-                <template #icon>
-                  <SelectIcon />
-                </template>
-              </Button>
+              />
             </div>
             <div
               v-else
diff --git a/frontend/src/components/Activities/ActivityHeader.vue b/frontend/src/components/Activities/ActivityHeader.vue
index 49512204..a762356c 100644
--- a/frontend/src/components/Activities/ActivityHeader.vue
+++ b/frontend/src/components/Activities/ActivityHeader.vue
@@ -9,23 +9,17 @@
     <Button
       v-if="title == 'Emails'"
       variant="solid"
+      :label="__('New Email')"
+      iconLeft="plus"
       @click="emailBox.show = true"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Email') }}</span>
-    </Button>
+    />
     <Button
       v-else-if="title == 'Comments'"
       variant="solid"
+      :label="__('New Comment')"
+      iconLeft="plus"
       @click="emailBox.showComment = true"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Comment') }}</span>
-    </Button>
+    />
     <MultiActionButton
       v-else-if="title == 'Calls'"
       variant="solid"
@@ -34,59 +28,45 @@
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
+      :label="__('New Note')"
+      iconLeft="plus"
       @click="modalRef.showNote()"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Note') }}</span>
-    </Button>
+    />
     <Button
       v-else-if="title == 'Tasks'"
       variant="solid"
+      :label="__('New Task')"
+      iconLeft="plus"
       @click="modalRef.showTask()"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('New Task') }}</span>
-    </Button>
+    />
     <Button
       v-else-if="title == 'Attachments'"
       variant="solid"
+      :label="__('Upload Attachment')"
+      iconLeft="plus"
       @click="showFilesUploader = true"
-    >
-      <template #prefix>
-        <FeatherIcon name="plus" class="h-4 w-4" />
-      </template>
-      <span>{{ __('Upload Attachment') }}</span>
-    </Button>
+    />
     <div class="flex gap-2 shrink-0" v-else-if="title == 'WhatsApp'">
       <Button
         :label="__('Send Template')"
         @click="showWhatsappTemplates = true"
       />
-      <Button variant="solid" @click="whatsappBox.show()">
-        <template #prefix>
-          <FeatherIcon name="plus" class="h-4 w-4" />
-        </template>
-        <span>{{ __('New Message') }}</span>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('New Message')"
+        iconLeft="plus"
+        @click="whatsappBox.show()"
+      />
     </div>
     <Dropdown v-else :options="defaultActions" @click.stop>
       <template v-slot="{ open }">
-        <Button variant="solid" class="flex items-center gap-1">
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4 w-4" />
-          </template>
-          <span>{{ __('New') }}</span>
-          <template #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 w-4"
-            />
-          </template>
-        </Button>
+        <Button
+          variant="solid"
+          class="flex items-center gap-1"
+          :label="__('New')"
+          iconLeft="plus"
+          :iconRight="open ? 'chevron-up' : 'chevron-down'"
+        />
       </template>
     </Dropdown>
   </div>
diff --git a/frontend/src/components/Activities/AttachmentArea.vue b/frontend/src/components/Activities/AttachmentArea.vue
index 7627b5e2..d5ada2aa 100644
--- a/frontend/src/components/Activities/AttachmentArea.vue
+++ b/frontend/src/components/Activities/AttachmentArea.vue
@@ -38,42 +38,31 @@
             </div>
           </Tooltip>
           <div class="flex gap-1">
-            <Tooltip
-              :text="
+            <Button
+              :tooltip="
                 attachment.is_private ? __('Make public') : __('Make private')
               "
+              class="!size-5"
+              @click.stop="
+                togglePrivate(attachment.name, attachment.is_private)
+              "
             >
-              <div>
-                <Button
-                  class="!size-5"
-                  @click.stop="
-                    togglePrivate(attachment.name, attachment.is_private)
-                  "
-                >
-                  <template #icon>
-                    <FeatherIcon
-                      :name="attachment.is_private ? 'lock' : 'unlock'"
-                      class="size-3 text-ink-gray-7"
-                    />
-                  </template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Delete attachment')">
-              <div>
-                <Button
-                  class="!size-5"
-                  @click.stop="() => deleteAttachment(attachment.name)"
-                >
-                  <template #icon>
-                    <FeatherIcon
-                      name="trash-2"
-                      class="size-3 text-ink-gray-7"
-                    />
-                  </template>
-                </Button>
-              </div>
-            </Tooltip>
+              <template #icon>
+                <FeatherIcon
+                  :name="attachment.is_private ? 'lock' : 'unlock'"
+                  class="size-3 text-ink-gray-7"
+                />
+              </template>
+            </Button>
+            <Button
+              :tooltip="__('Delete attachment')"
+              class="!size-5"
+              @click.stop="() => deleteAttachment(attachment.name)"
+            >
+              <template #icon>
+                <FeatherIcon name="trash-2" class="size-3 text-ink-gray-7" />
+              </template>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/Activities/AudioPlayer.vue b/frontend/src/components/Activities/AudioPlayer.vue
index 71b28b1c..ebb62b94 100644
--- a/frontend/src/components/Activities/AudioPlayer.vue
+++ b/frontend/src/components/Activities/AudioPlayer.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="w-full text-sm text-ink-gray-5">
     <div class="flex items-center gap-2">
-      <Button variant="ghost" @click="playPause">
-        <template #icon>
-          <PlayIcon v-if="isPaused" class="size-4 text-ink-gray-5" />
-          <PauseIcon v-else class="size-4 text-ink-gray-5" />
-        </template>
-      </Button>
+      <Button
+        variant="ghost"
+        class="text-ink-gray-5"
+        :icon="isPaused ? PlayIcon : PauseIcon"
+        @click="playPause"
+      />
       <div class="flex gap-2 items-center justify-between flex-1">
         <input
           class="w-full slider !h-[0.5] bg-surface-gray-3 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
@@ -61,11 +61,11 @@
           </Button>
         </div>
         <Dropdown :options="options">
-          <Button variant="ghost" @click="showPlaybackSpeed = false">
-            <template #icon>
-              <FeatherIcon class="size-4" name="more-horizontal" />
-            </template>
-          </Button>
+          <Button
+            icon="more-horizontal"
+            variant="ghost"
+            @click="showPlaybackSpeed = false"
+          />
         </Dropdown>
       </div>
     </div>
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index 5b864ef1..bbe8e16c 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -14,12 +14,10 @@
     <div class="flex gap-1">
       <Button
         v-if="isManager() && !isMobileView"
+        :tooltip="__('Edit fields layout')"
+        :icon="EditIcon"
         @click="showDataFieldsModal = true"
-      >
-        <template #icon>
-          <EditIcon />
-        </template>
-      </Button>
+      />
       <Button
         label="Save"
         :disabled="!document.isDirty"
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index 9fcf5e9c..6aac01aa 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -2,7 +2,9 @@
   <div
     class="cursor-pointer flex flex-col rounded-md shadow bg-surface-cards px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
-    <div class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9">
+    <div
+      class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9"
+    >
       <div class="flex items-center gap-2 truncate">
         <span>{{ activity.data.sender_full_name }}</span>
         <span class="sm:flex hidden text-sm text-ink-gray-5">
@@ -28,32 +30,20 @@
           </div>
         </Tooltip>
         <div class="flex gap-0.5">
-          <Tooltip :text="__('Reply')">
-            <div>
-              <Button
-                variant="ghost"
-                class="text-ink-gray-7"
-                @click="reply(activity.data)"
-              >
-                <template #icon>
-                  <ReplyIcon />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
-          <Tooltip :text="__('Reply All')">
-            <div>
-              <Button
-                variant="ghost"
-                class="text-ink-gray-7"
-                @click="reply(activity.data, true)"
-              >
-                <template #icon>
-                  <ReplyAllIcon />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
+          <Button
+            :tooltip="__('Reply')"
+            variant="ghost"
+            class="text-ink-gray-7"
+            :icon="ReplyIcon"
+            @click="reply(activity.data)"
+          />
+          <Button
+            :tooltip="__('Reply All')"
+            variant="ghost"
+            :icon="ReplyAllIcon"
+            class="text-ink-gray-7"
+            @click="reply(activity.data, true)"
+          />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/Activities/TaskArea.vue b/frontend/src/components/Activities/TaskArea.vue
index 1b479e6f..5c2d93b6 100644
--- a/frontend/src/components/Activities/TaskArea.vue
+++ b/frontend/src/components/Activities/TaskArea.vue
@@ -41,13 +41,13 @@
             :options="taskStatusOptions(modalRef.updateTaskStatus, task)"
             @click.stop
           >
-            <Tooltip :text="__('Change Status')">
-              <div>
-                <Button variant="ghosted" class="hover:bg-surface-gray-4">
-                  <TaskStatusIcon :status="task.status" />
-                </Button>
-              </div>
-            </Tooltip>
+            <Button
+              :tooltip="__('Change status')"
+              variant="ghosted"
+              class="hover:bg-surface-gray-4"
+            >
+              <TaskStatusIcon :status="task.status" />
+            </Button>
           </Dropdown>
           <Dropdown
             :options="[
diff --git a/frontend/src/components/AssignToBody.vue b/frontend/src/components/AssignToBody.vue
index e4e226b0..a903d9ba 100644
--- a/frontend/src/components/AssignToBody.vue
+++ b/frontend/src/components/AssignToBody.vue
@@ -25,23 +25,21 @@
             :key="assignee.name"
             @click.stop
           >
-            <div>
-              <div
-                class="flex items-center text-sm p-0.5 text-ink-gray-6 border border-outline-gray-1 bg-surface-modal rounded-full cursor-pointer"
-                @click.stop
+            <div
+              class="flex items-center text-sm p-0.5 text-ink-gray-6 border border-outline-gray-1 bg-surface-modal rounded-full cursor-pointer"
+              @click.stop
+            >
+              <UserAvatar :user="assignee.name" size="sm" />
+              <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
+              <Button
+                variant="ghost"
+                class="rounded-full !size-4 m-1"
+                @click.stop="removeValue(assignee.name)"
               >
-                <UserAvatar :user="assignee.name" size="sm" />
-                <div class="ml-1">{{ getUser(assignee.name).full_name }}</div>
-                <Button
-                  variant="ghost"
-                  class="rounded-full !size-4 m-1"
-                  @click.stop="removeValue(assignee.name)"
-                >
-                  <template #icon>
-                    <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
-                  </template>
-                </Button>
-              </div>
+                <template #icon>
+                  <FeatherIcon name="x" class="h-3 w-3 text-ink-gray-6" />
+                </template>
+              </Button>
             </div>
           </Tooltip>
         </div>
diff --git a/frontend/src/components/AttachmentItem.vue b/frontend/src/components/AttachmentItem.vue
index aa4dc2bd..17081ce8 100644
--- a/frontend/src/components/AttachmentItem.vue
+++ b/frontend/src/components/AttachmentItem.vue
@@ -5,11 +5,9 @@
         :label="label"
         theme="gray"
         variant="outline"
+        :iconLeft="getIcon()"
         @click="toggleDialog()"
       >
-        <template #prefix>
-          <component :is="getIcon()" class="h-4 w-4" />
-        </template>
         <template #suffix>
           <slot name="suffix" />
         </template>
diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index b98792c7..63b5b90d 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -65,37 +65,28 @@
                 <Button
                   class="w-full !justify-start !text-ink-gray-5"
                   variant="ghost"
-                  @click="togglePopover()"
                   :label="__('Add Column')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
             </Autocomplete>
             <Button
               v-if="columnsUpdated"
               class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
-              @click="reset(close)"
               :label="__('Reset Changes')"
-            >
-              <template #prefix>
-                <ReloadIcon class="h-4" />
-              </template>
-            </Button>
+              :iconLeft="ReloadIcon"
+              @click="reset(close)"
+            />
             <Button
               v-if="!is_default"
               class="w-full !justify-start !text-ink-gray-5"
               variant="ghost"
-              @click="resetToDefault(close)"
               :label="__('Reset to Default')"
-            >
-              <template #prefix>
-                <ReloadIcon class="h-4" />
-              </template>
-            </Button>
+              :iconLeft="ReloadIcon"
+              @click="resetToDefault(close)"
+            />
           </div>
         </div>
         <div v-else>
diff --git a/frontend/src/components/CommentBox.vue b/frontend/src/components/CommentBox.vue
index 86074750..2dbcbcf1 100644
--- a/frontend/src/components/CommentBox.vue
+++ b/frontend/src/components/CommentBox.vue
@@ -45,11 +45,12 @@
               v-slot="{ togglePopover }"
               @update:modelValue="() => appendEmoji()"
             >
-              <Button variant="ghost" @click="togglePopover()">
-                <template #icon>
-                  <SmileIcon class="h-4" />
-                </template>
-              </Button>
+              <Button
+                :tooltip="__('Insert Emoji')"
+                :icon="SmileIcon"
+                variant="ghost"
+                @click="togglePopover()"
+              />
             </IconPicker>
             <FileUploader
               :upload-args="{
@@ -61,14 +62,11 @@
             >
               <template #default="{ openFileSelector }">
                 <Button
-                  theme="gray"
+                  :tooltip="__('Attach a file')"
                   variant="ghost"
+                  :icon="AttachmentIcon"
                   @click="openFileSelector()"
-                >
-                  <template #icon>
-                    <AttachmentIcon class="h-4" />
-                  </template>
-                </Button>
+                />
               </template>
             </FileUploader>
           </div>
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 423adb75..1d5ead77 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -8,24 +8,18 @@
           showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
         ]"
         :label="__('Reply')"
+        :iconLeft="Email2Icon"
         @click="toggleEmailBox()"
-      >
-        <template #prefix>
-          <Email2Icon class="h-4" />
-        </template>
-      </Button>
+      />
       <Button
         variant="ghost"
         :label="__('Comment')"
         :class="[
           showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
         ]"
+        :iconLeft="CommentIcon"
         @click="toggleCommentBox()"
-      >
-        <template #prefix>
-          <CommentIcon class="h-4" />
-        </template>
-      </Button>
+      />
     </div>
   </div>
   <div
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index cce8b245..0eda551e 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -54,14 +54,12 @@
         </div>
         <div class="w-12">
           <Button
-            class="flex w-full items-center justify-center rounded !bg-surface-gray-2 border-0"
+            :tooltip="__('Edit grid fields')"
+            class="flex w-full items-center justify-center rounded !bg-surface-gray-2 border-0 !text-ink-gray-5"
             variant="outline"
+            icon="settings"
             @click="showGridFieldsEditorModal = true"
-          >
-            <template #icon>
-              <FeatherIcon name="settings" class="size-4 text-ink-gray-7" />
-            </template>
-          </Button>
+          />
         </div>
       </div>
       <!-- Rows -->
@@ -279,14 +277,12 @@
               </div>
               <div class="edit-row w-12">
                 <Button
-                  class="flex w-full items-center justify-center rounded border-0"
+                  :tooltip="__('Edit row')"
+                  class="flex w-full items-center justify-center rounded border-0 !text-ink-gray-7"
                   variant="outline"
+                  :icon="EditIcon"
                   @click="showRowList[index] = true"
-                >
-                  <template #icon>
-                    <EditIcon class="text-ink-gray-7" />
-                  </template>
-                </Button>
+                />
               </div>
               <GridRowModal
                 v-if="showRowList[index]"
diff --git a/frontend/src/components/Controls/GridFieldsEditorModal.vue b/frontend/src/components/Controls/GridFieldsEditorModal.vue
index 544cc22d..c56f56ff 100644
--- a/frontend/src/components/Controls/GridFieldsEditorModal.vue
+++ b/frontend/src/components/Controls/GridFieldsEditorModal.vue
@@ -54,13 +54,10 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              @click="togglePopover()"
               :label="__('Add Field')"
-            >
-              <template #prefix>
-                <FeatherIcon name="plus" class="h-4" />
-              </template>
-            </Button>
+              iconLeft="plus"
+              @click="togglePopover()"
+            />
           </template>
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1 text-ink-gray-9">
diff --git a/frontend/src/components/Controls/GridRowModal.vue b/frontend/src/components/Controls/GridRowModal.vue
index e38dd87c..3e6b5801 100644
--- a/frontend/src/components/Controls/GridRowModal.vue
+++ b/frontend/src/components/Controls/GridRowModal.vue
@@ -11,19 +11,18 @@
           <div class="flex items-center gap-1">
             <Button
               v-if="isManager()"
+              :tooltip="__('Edit fields layout')"
               variant="ghost"
               class="w-7"
+              :icon="EditIcon"
               @click="openGridRowFieldsModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              icon="x"
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+            />
           </div>
         </div>
         <div>
diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 633f2b2e..6ccec49e 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -48,24 +48,18 @@
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Create New')"
+            iconLeft="plus"
             @click="() => attrs.onCreate(value, close)"
-          >
-            <template #prefix>
-              <FeatherIcon name="plus" class="h-4" />
-            </template>
-          </Button>
+          />
         </div>
         <div>
           <Button
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Clear')"
+            iconLeft="x"
             @click="() => clearValue(close)"
-          >
-            <template #prefix>
-              <FeatherIcon name="x" class="h-4" />
-            </template>
-          </Button>
+          />
         </div>
       </template>
     </Autocomplete>
diff --git a/frontend/src/components/CustomActions.vue b/frontend/src/components/CustomActions.vue
index 8bb4b6d0..30a98c9c 100644
--- a/frontend/src/components/CustomActions.vue
+++ b/frontend/src/components/CustomActions.vue
@@ -18,14 +18,10 @@
     :key="g.label"
   >
     <Dropdown :options="g.action" v-slot="{ open }">
-      <Button :label="g.label">
-        <template #suffix>
-          <FeatherIcon
-            :name="open ? 'chevron-up' : 'chevron-down'"
-            class="h-4"
-          />
-        </template>
-      </Button>
+      <Button
+        :label="g.label"
+        :iconRight="open ? 'chevron-up' : 'chevron-down'"
+      />
     </Dropdown>
   </div>
 </template>
diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
index d9592c13..41256c73 100644
--- a/frontend/src/components/DropdownItem.vue
+++ b/frontend/src/components/DropdownItem.vue
@@ -19,53 +19,36 @@
           v-if="editMode"
           variant="ghost"
           :label="__('Save')"
-          size="sm"
           class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
           @click="saveOption"
         />
-        <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
-          <div>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-              @click="option.onClick"
-            >
-              <template #icon>
-                <SuccessIcon />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
-        <Tooltip v-if="!editMode" text="Edit">
-          <div>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-              @click="toggleEditMode"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-          </div>
-        </Tooltip>
-        <Tooltip text="Delete">
-          <div>
-            <Button
-              variant="ghost"
-              icon="x"
-              size="sm"
-              class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
-              @click="() => option.onDelete(option, isNew)"
-            />
-          </div>
-        </Tooltip>
+        <Button
+          v-if="!isNew && !option.selected"
+          tooltip="Set As Primary"
+          variant="ghost"
+          :icon="SuccessIcon"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+          @click="option.onClick"
+        />
+        <Button
+          v-if="!editMode"
+          tooltip="Edit"
+          variant="ghost"
+          :icon="EditIcon"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+          @click="toggleEditMode"
+        />
+        <Button
+          tooltip="Delete"
+          variant="ghost"
+          icon="x"
+          class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
+          @click="() => option.onDelete(option, isNew)"
+        />
       </div>
     </div>
     <div v-if="option.selected">
-      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" size="sm" />
+      <FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index ca468ecc..e59e7837 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -123,11 +123,12 @@
               v-slot="{ togglePopover }"
               @update:modelValue="() => appendEmoji()"
             >
-              <Button variant="ghost" @click="togglePopover()">
-                <template #icon>
-                  <SmileIcon class="h-4" />
-                </template>
-              </Button>
+              <Button
+                :tooltip="__('Insert Emoji')"
+                :icon="SmileIcon"
+                variant="ghost"
+                @click="togglePopover()"
+              />
             </IconPicker>
             <FileUploader
               :upload-args="{
@@ -138,21 +139,20 @@
               @success="(f) => attachments.push(f)"
             >
               <template #default="{ openFileSelector }">
-                <Button variant="ghost" @click="openFileSelector()">
-                  <template #icon>
-                    <AttachmentIcon class="h-4" />
-                  </template>
-                </Button>
+                <Button
+                  :tooltip="__('Attach a file')"
+                  :icon="AttachmentIcon"
+                  variant="ghost"
+                  @click="openFileSelector()"
+                />
               </template>
             </FileUploader>
             <Button
+              :tooltip="__('Insert Email Template')"
               variant="ghost"
+              :icon="EmailTemplateIcon"
               @click="showEmailTemplateSelectorModal = true"
-            >
-              <template #icon>
-                <EmailTemplateIcon class="h-4" />
-              </template>
-            </Button>
+            />
           </div>
           <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
             <Button v-bind="discardButtonProps || {}" :label="__('Discard')" />
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index a70ff591..e042a7a1 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -89,12 +89,9 @@
         v-if="data[field.fieldname] && field.edit"
         class="shrink-0"
         :label="__('Edit')"
+        :iconLeft="EditIcon"
         @click="field.edit(data[field.fieldname])"
-      >
-        <template #prefix>
-          <EditIcon class="h-4 w-4" />
-        </template>
-      </Button>
+      />
     </div>
 
     <TableMultiselectInput
diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index df8287db..ae988716 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -169,13 +169,10 @@
                         <Button
                           class="w-full !h-8 !bg-surface-modal"
                           variant="outline"
-                          @click="togglePopover()"
                           :label="__('Add Field')"
-                        >
-                          <template #prefix>
-                            <FeatherIcon name="plus" class="h-4" />
-                          </template>
-                        </Button>
+                          iconLeft="plus"
+                          @click="togglePopover()"
+                        />
                       </div>
                     </template>
                     <template #item-label="{ option }">
@@ -198,6 +195,7 @@
           class="w-full h-8"
           variant="subtle"
           :label="__('Add Section')"
+          iconLeft="plus"
           @click="
             tabs[tabIndex].sections.push({
               label: __('New Section'),
@@ -206,11 +204,7 @@
               columns: [{ name: 'column_' + getRandom(), fields: [] }],
             })
           "
-        >
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4" />
-          </template>
-        </Button>
+        />
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/FilesUploader/FilesUploader.vue b/frontend/src/components/FilesUploader/FilesUploader.vue
index 8fd5a08e..d0f27e89 100644
--- a/frontend/src/components/FilesUploader/FilesUploader.vue
+++ b/frontend/src/components/FilesUploader/FilesUploader.vue
@@ -29,6 +29,7 @@
               filesUploaderArea?.showWebLink || filesUploaderArea?.showCamera
             "
             :label="isMobileView ? __('Back') : __('Back to file upload')"
+            iconLeft="arrow-left"
             @click="
               () => {
                 filesUploaderArea.showWebLink = false
@@ -37,11 +38,7 @@
                 filesUploaderArea.cameraImage = null
               }
             "
-          >
-            <template #prefix>
-              <FeatherIcon name="arrow-left" class="size-4" />
-            </template>
-          </Button>
+          />
           <Button
             v-if="
               filesUploaderArea?.showCamera && !filesUploaderArea?.cameraImage
diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index bb45fb5b..d464ba9b 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -5,8 +5,8 @@
         <Button
           :label="__('Filter')"
           :class="filters?.size ? 'rounded-r-none' : ''"
+          :iconLeft="FilterIcon"
         >
-          <template #prefix><FilterIcon class="h-4" /></template>
           <template v-if="filters?.size" #suffix>
             <div
               class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
@@ -15,15 +15,13 @@
             </div>
           </template>
         </Button>
-        <Tooltip v-if="filters?.size" :text="__('Clear all Filter')">
-          <div>
-            <Button
-              class="rounded-l-none border-l"
-              icon="x"
-              @click.stop="clearfilter(false)"
-            />
-          </div>
-        </Tooltip>
+        <Button
+          v-if="filters?.size"
+          :tooltip="__('Clear all Filter')"
+          class="rounded-l-none border-l"
+          icon="x"
+          @click.stop="clearfilter(false)"
+        />
       </div>
     </template>
     <template #body="{ close }">
@@ -134,13 +132,10 @@
                 <Button
                   class="!text-ink-gray-5"
                   variant="ghost"
-                  @click="togglePopover()"
                   :label="__('Add Filter')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
             </Autocomplete>
             <Button
diff --git a/frontend/src/components/GroupBy.vue b/frontend/src/components/GroupBy.vue
index a71ab9a2..480715f1 100644
--- a/frontend/src/components/GroupBy.vue
+++ b/frontend/src/components/GroupBy.vue
@@ -7,18 +7,10 @@
             ? groupByValue?.label
             : __('Group By: ') + groupByValue?.label
         "
+        :iconLeft="DetailsIcon"
+        :iconRight="isOpen ? 'chevron-up' : 'chevron-down'"
         @click="togglePopover()"
-      >
-        <template #prefix>
-          <DetailsIcon />
-        </template>
-        <template #suffix>
-          <FeatherIcon
-            :name="isOpen ? 'chevron-up' : 'chevron-down'"
-            class="h-4"
-          />
-        </template>
-      </Button>
+      />
     </template>
   </Autocomplete>
 </template>
diff --git a/frontend/src/components/Kanban/KanbanSettings.vue b/frontend/src/components/Kanban/KanbanSettings.vue
index bfe6347d..ea1f3a86 100644
--- a/frontend/src/components/Kanban/KanbanSettings.vue
+++ b/frontend/src/components/Kanban/KanbanSettings.vue
@@ -3,11 +3,8 @@
     :label="__('Kanban Settings')"
     @click="showDialog = true"
     v-bind="$attrs"
-  >
-    <template #prefix>
-      <KanbanIcon class="h-4" />
-    </template>
-  </Button>
+    :iconLeft="KanbanIcon"
+  />
   <Dialog v-model="showDialog" :options="{ title: __('Kanban Settings') }">
     <template #body-content>
       <div>
@@ -23,8 +20,8 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full !justify-start"
-              @click="togglePopover()"
               :label="columnField.label"
+              @click="togglePopover()"
             />
           </template>
         </Autocomplete>
@@ -80,13 +77,10 @@
           <template #target="{ togglePopover }">
             <Button
               class="w-full mt-2"
-              @click="togglePopover()"
               :label="__('Add Field')"
-            >
-              <template #prefix>
-                <FeatherIcon name="plus" class="h-4" />
-              </template>
-            </Button>
+              iconLeft="plus"
+              @click="togglePopover()"
+            />
           </template>
           <template #item-label="{ option }">
             <div class="flex flex-col gap-1 text-ink-gray-9">
diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index dbf01962..fb512210 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -153,13 +153,10 @@
         <template #target="{ togglePopover }">
           <Button
             class="w-full mt-2.5 mb-1 mr-5"
-            @click="togglePopover()"
             :label="__('Add Column')"
-          >
-            <template #prefix>
-              <FeatherIcon name="plus" class="h-4" />
-            </template>
-          </Button>
+            iconLeft="plus"
+            @click="togglePopover()"
+          />
         </template>
       </Autocomplete>
     </div>
diff --git a/frontend/src/components/Modals/AddressModal.vue b/frontend/src/components/Modals/AddressModal.vue
index c1e9ba20..7f270103 100644
--- a/frontend/src/components/Modals/AddressModal.vue
+++ b/frontend/src/components/Modals/AddressModal.vue
@@ -11,19 +11,18 @@
           <div class="flex items-center gap-1">
             <Button
               v-if="isManager() && !isMobileView"
+              :tooltip="__('Edit fields layout')"
               variant="ghost"
+              :icon="EditIcon"
               class="w-7"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              icon="x"
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+            />
           </div>
         </div>
         <div v-if="tabs.data && _address.doc">
diff --git a/frontend/src/components/Modals/CallLogDetailModal.vue b/frontend/src/components/Modals/CallLogDetailModal.vue
index c7d336e1..991b490a 100644
--- a/frontend/src/components/Modals/CallLogDetailModal.vue
+++ b/frontend/src/components/Modals/CallLogDetailModal.vue
@@ -36,18 +36,17 @@
             <Button
               v-if="!isMobileView"
               variant="ghost"
+              :tooltip="__('Edit call log')"
+              :icon="EditIcon"
               class="w-7"
               @click="openCallLogModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              icon="x"
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+            />
           </div>
         </div>
         <div class="flex flex-col gap-3.5">
diff --git a/frontend/src/components/Modals/CallLogModal.vue b/frontend/src/components/Modals/CallLogModal.vue
index dab2374c..65ad7e8f 100644
--- a/frontend/src/components/Modals/CallLogModal.vue
+++ b/frontend/src/components/Modals/CallLogModal.vue
@@ -13,18 +13,17 @@
             <Button
               v-if="isManager() && !isMobileView"
               variant="ghost"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               class="w-7"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <div v-if="tabs.data">
diff --git a/frontend/src/components/Modals/ContactModal.vue b/frontend/src/components/Modals/ContactModal.vue
index d060d23d..94ae8350 100644
--- a/frontend/src/components/Modals/ContactModal.vue
+++ b/frontend/src/components/Modals/ContactModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <FieldLayout
@@ -90,12 +89,16 @@ const { document: _contact, triggerOnBeforeCreate } = useDocument('Contact')
 
 async function createContact() {
   if (_contact.doc.email_id) {
-    _contact.doc.email_ids = [{ email_id: _contact.doc.email_id, is_primary: 1 }]
+    _contact.doc.email_ids = [
+      { email_id: _contact.doc.email_id, is_primary: 1 },
+    ]
     delete _contact.doc.email_id
   }
 
   if (_contact.doc.mobile_no) {
-    _contact.doc.phone_nos = [{ phone: _contact.doc.mobile_no, is_primary_mobile_no: 1 }]
+    _contact.doc.phone_nos = [
+      { phone: _contact.doc.mobile_no, is_primary_mobile_no: 1 },
+    ]
     delete _contact.doc.mobile_no
   }
 
diff --git a/frontend/src/components/Modals/ConvertToDealModal.vue b/frontend/src/components/Modals/ConvertToDealModal.vue
index 427d688f..e4ab3e3c 100644
--- a/frontend/src/components/Modals/ConvertToDealModal.vue
+++ b/frontend/src/components/Modals/ConvertToDealModal.vue
@@ -23,12 +23,10 @@
           <Button
             v-if="isManager() && !isMobileView"
             variant="ghost"
+            :tooltip="__('Edit deal\'s mandatory fields layout')"
+            :icon="EditIcon"
             @click="openQuickEntryModal"
-          >
-            <template #icon>
-              <EditIcon class="h-4 w-4" />
-            </template>
-          </Button>
+          />
           <Button icon="x" variant="ghost" @click="show = false" />
         </div>
       </div>
diff --git a/frontend/src/components/Modals/CreateDocumentModal.vue b/frontend/src/components/Modals/CreateDocumentModal.vue
index 0a2933a7..464a9e96 100644
--- a/frontend/src/components/Modals/CreateDocumentModal.vue
+++ b/frontend/src/components/Modals/CreateDocumentModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              icon="x"
+              @click="show = false"
+            />
           </div>
         </div>
         <div v-if="tabs.data">
diff --git a/frontend/src/components/Modals/DealModal.vue b/frontend/src/components/Modals/DealModal.vue
index c9436e76..a1296782 100644
--- a/frontend/src/components/Modals/DealModal.vue
+++ b/frontend/src/components/Modals/DealModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              icon="x"
+              @click="show = false"
+            />
           </div>
         </div>
         <div>
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 9eb6ce50..6f315aed 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <div>
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 68d6a070..2b1e92e9 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -1,41 +1,59 @@
 <template>
-  <Dialog v-model="show" :options="{
-    size: 'xl',
-    actions: [
-      {
-        label: editMode ? __('Update') : __('Create'),
-        variant: 'solid',
-        onClick: () => updateNote(),
-      },
-    ],
-  }">
+  <Dialog
+    v-model="show"
+    :options="{
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? __('Update') : __('Create'),
+          variant: 'solid',
+          onClick: () => updateNote(),
+        },
+      ],
+    }"
+  >
     <template #body-title>
       <div class="flex items-center gap-3">
         <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
           {{ editMode ? __('Edit Note') : __('Create Note') }}
         </h3>
-        <Button v-if="_note?.reference_docname" size="sm" :label="_note.reference_doctype == 'CRM Deal'
-          ? __('Open Deal')
-          : __('Open Lead')
-          " @click="redirect()">
-          <template #suffix>
-            <ArrowUpRightIcon class="w-4 h-4" />
-          </template>
-        </Button>
+        <Button
+          v-if="_note?.reference_docname"
+          size="sm"
+          :label="
+            _note.reference_doctype == 'CRM Deal'
+              ? __('Open Deal')
+              : __('Open Lead')
+          "
+          :iconRight="ArrowUpRightIcon"
+          @click="redirect()"
+        />
       </div>
     </template>
     <template #body-content>
       <div class="flex flex-col gap-4">
         <div>
-          <FormControl ref="title" :label="__('Title')" v-model="_note.title" :placeholder="__('Call with John Doe')"
-            required />
+          <FormControl
+            ref="title"
+            :label="__('Title')"
+            v-model="_note.title"
+            :placeholder="__('Call with John Doe')"
+            required
+          />
         </div>
         <div>
           <div class="mb-1.5 text-xs text-ink-gray-5">{{ __('Content') }}</div>
-          <TextEditor variant="outline" ref="content"
+          <TextEditor
+            variant="outline"
+            ref="content"
             editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
-            :bubbleMenu="true" :content="_note.content" @change="(val) => (_note.content = val)" :placeholder="__('Took a call with John Doe and discussed the new project.')
-              " />
+            :bubbleMenu="true"
+            :content="_note.content"
+            @change="(val) => (_note.content = val)"
+            :placeholder="
+              __('Took a call with John Doe and discussed the new project.')
+            "
+          />
         </div>
         <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
       </div>
@@ -92,21 +110,25 @@ async function updateNote() {
       emit('after', d)
     }
   } else {
-    let d = await call('frappe.client.insert', {
-      doc: {
-        doctype: 'FCRM Note',
-        title: _note.value.title,
-        content: _note.value.content,
-        reference_doctype: props.doctype,
-        reference_docname: props.doc || '',
+    let d = await call(
+      'frappe.client.insert',
+      {
+        doc: {
+          doctype: 'FCRM Note',
+          title: _note.value.title,
+          content: _note.value.content,
+          reference_doctype: props.doctype,
+          reference_docname: props.doc || '',
+        },
       },
-    }, {
-      onError: (err) => {
-        if (err.error.exc_type == 'MandatoryError') {
-          error.value = "Title is mandatory"
-        }
-      }
-    })
+      {
+        onError: (err) => {
+          if (err.error.exc_type == 'MandatoryError') {
+            error.value = 'Title is mandatory'
+          }
+        },
+      },
+    )
     if (d.name) {
       updateOnboardingStep('create_first_note')
       capture('note_created')
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index c5ac5f5f..fad8da49 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -13,17 +13,16 @@
               v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
+              :tooltip="__('Edit fields layout')"
+              :icon="EditIcon"
               @click="openQuickEntryModal"
-            >
-              <template #icon>
-                <EditIcon />
-              </template>
-            </Button>
-            <Button variant="ghost" class="w-7" @click="show = false">
-              <template #icon>
-                <FeatherIcon name="x" class="size-4" />
-              </template>
-            </Button>
+            />
+            <Button
+              variant="ghost"
+              class="w-7"
+              @click="show = false"
+              icon="x"
+            />
           </div>
         </div>
         <FieldLayout
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 98c2cd71..6600e7e2 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -25,12 +25,9 @@
               ? __('Open Deal')
               : __('Open Lead')
           "
+          :iconRight="ArrowUpRightIcon"
           @click="redirect()"
-        >
-          <template #suffix>
-            <ArrowUpRightIcon class="w-4 h-4" />
-          </template>
-        </Button>
+        />
       </div>
     </template>
     <template #body-content>
diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
index 1c77f353..ac191642 100644
--- a/frontend/src/components/MultiActionButton.vue
+++ b/frontend/src/components/MultiActionButton.vue
@@ -9,21 +9,9 @@
         $attrs.class,
         showDropdown ? 'rounded-br-none rounded-tr-none' : '',
       ]"
+      :iconLeft="activeButton.icon"
       @click="() => activeButton.onClick()"
-    >
-      <template #prefix>
-        <FeatherIcon
-          v-if="activeButton.icon && typeof activeButton.icon === 'string'"
-          :name="activeButton.icon"
-          class="h-4 w-4"
-        />
-        <component
-          v-else-if="activeButton.icon"
-          :is="activeButton.icon"
-          class="h-4 w-4"
-        />
-      </template>
-    </Button>
+    />
     <Dropdown
       v-if="showDropdown"
       :options="parsedOptions"
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index db3281f9..9d5bc14c 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -16,24 +16,18 @@
       >
         <div class="text-base font-medium">{{ __('Notifications') }}</div>
         <div class="flex gap-1">
-          <Tooltip :text="__('Mark all as read')">
-            <div>
-              <Button variant="ghost" @click="() => markAllAsRead()">
-                <template #icon>
-                  <MarkAsDoneIcon class="h-4 w-4" />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
-          <Tooltip :text="__('Close')">
-            <div>
-              <Button variant="ghost" @click="() => toggle()">
-                <template #icon>
-                  <FeatherIcon name="x" class="h-4 w-4" />
-                </template>
-              </Button>
-            </div>
-          </Tooltip>
+          <Button
+            :tooltip="__('Mark all as read')"
+            :icon="MarkAsDoneIcon"
+            variant="ghost"
+            @click="markAllAsRead"
+          />
+          <Button
+            :tooltip="__('Close')"
+            icon="x"
+            variant="ghost"
+            @click="() => toggle()"
+          />
         </div>
       </div>
       <div
@@ -100,7 +94,6 @@ import { globalStore } from '@/stores/global'
 import { timeAgo } from '@/utils'
 import { onClickOutside } from '@vueuse/core'
 import { capture } from '@/telemetry'
-import { Tooltip } from 'frappe-ui'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 const { $socket } = globalStore()
diff --git a/frontend/src/components/SLASection.vue b/frontend/src/components/SLASection.vue
index 5d486ab8..ff5b71f4 100644
--- a/frontend/src/components/SLASection.vue
+++ b/frontend/src/components/SLASection.vue
@@ -27,14 +27,10 @@
           :options="s.options"
         >
           <template #default="{ open }">
-            <Button :label="s.value">
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4"
-                />
-              </template>
-            </Button>
+            <Button
+              :label="s.value"
+              :iconRight="open ? 'chevron-up' : 'chevron-down'"
+            />
           </template>
         </Dropdown>
       </div>
diff --git a/frontend/src/components/Settings/InviteUserPage.vue b/frontend/src/components/Settings/InviteUserPage.vue
index 6402f416..3881cb60 100644
--- a/frontend/src/components/Settings/InviteUserPage.vue
+++ b/frontend/src/components/Settings/InviteUserPage.vue
@@ -80,19 +80,16 @@
                 </span>
               </div>
               <div>
-                <Tooltip text="Delete Invitation">
-                  <div>
-                    <Button
-                      icon="x"
-                      variant="ghost"
-                      :loading="
-                        pendingInvitations.delete.loading &&
-                        pendingInvitations.delete.params.name === user.name
-                      "
-                      @click="pendingInvitations.delete.submit(user.name)"
-                    />
-                  </div>
-                </Tooltip>
+                <Button
+                  :tooltip="__('Delete invitation')"
+                  icon="x"
+                  variant="ghost"
+                  :loading="
+                    pendingInvitations.delete.loading &&
+                    pendingInvitations.delete.params.name === user.name
+                  "
+                  @click="pendingInvitations.delete.submit(user.name)"
+                />
               </div>
             </li>
           </ul>
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index a209c1da..2112cbc3 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -20,12 +20,9 @@
                   v-if="section.showEditButton"
                   variant="ghost"
                   class="w-7 mr-2"
+                  :icon="EditIcon"
                   @click="showSidePanelModal = true"
-                >
-                  <template #icon>
-                    <EditIcon />
-                  </template>
-                </Button>
+                />
               </slot>
             </template>
             <slot v-bind="{ section }">
@@ -135,12 +132,9 @@
                                     variant="ghost"
                                     class="w-full !justify-start"
                                     :label="__('Create New')"
+                                    iconLeft="plus"
                                     @click="field.create()"
-                                  >
-                                    <template #prefix>
-                                      <FeatherIcon name="plus" class="h-4" />
-                                    </template>
-                                  </Button>
+                                  />
                                 </div>
                               </div>
                             </template>
diff --git a/frontend/src/components/SidePanelLayoutEditor.vue b/frontend/src/components/SidePanelLayoutEditor.vue
index 09493c61..c8edc217 100644
--- a/frontend/src/components/SidePanelLayoutEditor.vue
+++ b/frontend/src/components/SidePanelLayoutEditor.vue
@@ -94,13 +94,10 @@
                 <Button
                   class="w-full h-8 mt-1.5 !bg-surface-gray-1"
                   variant="outline"
-                  @click="togglePopover()"
                   :label="__('Add Field')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
               <template #item-label="{ option }">
                 <div class="flex flex-col gap-1 text-ink-gray-9">
@@ -128,6 +125,7 @@
         class="w-full h-8"
         variant="subtle"
         :label="__('Add Section')"
+        iconLeft="plus"
         @click="
           sections.push({
             label: __('New Section'),
@@ -136,11 +134,7 @@
             columns: [{ name: 'column_' + getRandom(), fields: [] }],
           })
         "
-      >
-        <template #prefix>
-          <FeatherIcon name="plus" class="h-4" />
-        </template>
-      </Button>
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/SortBy.vue b/frontend/src/components/SortBy.vue
index 4e7e7fa4..b6ffc276 100644
--- a/frontend/src/components/SortBy.vue
+++ b/frontend/src/components/SortBy.vue
@@ -19,11 +19,12 @@
   </Autocomplete>
   <NestedPopover v-else>
     <template #target="{ open }">
-      <Button v-if="sortValues.size > 1" :label="__('Sort')">
-        <template v-if="hideLabel">
-          <SortIcon class="h-4" />
-        </template>
-        <template v-if="!hideLabel" #prefix><SortIcon class="h-4" /></template>
+      <Button
+        v-if="sortValues.size > 1"
+        :label="__('Sort')"
+        :icon="hideLabel && SortIcon"
+        :iconLeft="!hideLabel && SortIcon"
+      >
         <template v-if="sortValues?.size" #suffix>
           <div
             class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-white pt-px text-xs font-medium text-ink-gray-8 shadow-sm"
@@ -36,6 +37,11 @@
         <Button
           v-if="sortValues.size"
           class="rounded-r-none border-r"
+          :icon="
+            Array.from(sortValues)[0].direction == 'asc'
+              ? AscendingIcon
+              : DesendingIcon
+          "
           @click.stop="
             () => {
               Array.from(sortValues)[0].direction =
@@ -43,28 +49,16 @@
               apply()
             }
           "
-        >
-          <AscendingIcon
-            v-if="Array.from(sortValues)[0].direction == 'asc'"
-            class="h-4"
-          />
-          <DesendingIcon v-else class="h-4" />
-        </Button>
+        />
         <Button
           :label="getSortLabel()"
-          class="shrink-0"
+          class="shrink-0 [&_svg]:text-ink-gray-5"
+          :iconLeft="!hideLabel && !sortValues?.size && SortIcon"
+          :iconRight="
+            sortValues?.size && (open ? 'chevron-up' : 'chevron-down')
+          "
           :class="sortValues.size ? 'rounded-l-none' : ''"
-        >
-          <template v-if="!hideLabel && !sortValues?.size" #prefix>
-            <SortIcon class="h-4" />
-          </template>
-          <template v-if="sortValues?.size" #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-ink-gray-5"
-            />
-          </template>
-        </Button>
+        />
       </div>
     </template>
     <template #body="{ close }">
@@ -85,42 +79,42 @@
               <div class="handle flex h-7 w-7 items-center justify-center">
                 <DragIcon class="h-4 w-4 cursor-grab text-ink-gray-5" />
               </div>
-              <div class="flex flex-1 [&>_div]:w-full">
+              <div class="flex flex-1">
                 <Button
                   size="md"
                   class="rounded-r-none border-r"
+                  :icon="
+                    sort.direction == 'asc' ? AscendingIcon : DesendingIcon
+                  "
                   @click="
                     () => {
                       sort.direction = sort.direction == 'asc' ? 'desc' : 'asc'
                       apply()
                     }
                   "
-                >
-                  <AscendingIcon v-if="sort.direction == 'asc'" class="h-4" />
-                  <DesendingIcon v-else class="h-4" />
-                </Button>
+                />
                 <Autocomplete
+                  class="[&>_div]:w-full"
                   :value="sort.fieldname"
                   :options="sortOptions.data"
                   @change="(e) => updateSort(e, i)"
                   :placeholder="__('First Name')"
                 >
                   <template
-                    #target="{ togglePopover, selectedValue, displayValue }"
+                    #target="{
+                      open,
+                      togglePopover,
+                      selectedValue,
+                      displayValue,
+                    }"
                   >
                     <Button
                       class="flex w-full items-center justify-between rounded-l-none !text-ink-gray-5"
                       size="md"
+                      :label="displayValue(selectedValue)"
+                      :iconRight="open ? 'chevron-down' : 'chevron-up'"
                       @click="togglePopover()"
-                    >
-                      {{ displayValue(selectedValue) }}
-                      <template #suffix>
-                        <FeatherIcon
-                          name="chevron-down"
-                          class="h-4 text-ink-gray-5"
-                        />
-                      </template>
-                    </Button>
+                    />
                   </template>
                 </Autocomplete>
               </div>
@@ -143,14 +137,11 @@
               <template #target="{ togglePopover }">
                 <Button
                   class="!text-ink-gray-5"
-                  variant="ghost"
-                  @click="togglePopover()"
                   :label="__('Add Sort')"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
+                  variant="ghost"
+                  iconLeft="plus"
+                  @click="togglePopover()"
+                />
               </template>
             </Autocomplete>
             <Button
diff --git a/frontend/src/components/Telephony/ExotelCallUI.vue b/frontend/src/components/Telephony/ExotelCallUI.vue
index c1a3d503..a06e36d3 100644
--- a/frontend/src/components/Telephony/ExotelCallUI.vue
+++ b/frontend/src/components/Telephony/ExotelCallUI.vue
@@ -123,13 +123,11 @@
         <div class="flex">
           <Button
             @click="toggleCallPopup"
-            class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6 shrink-0"
+            class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6 shrink-0 cursor-pointer"
+            :tooltip="__('Minimize')"
+            :icon="MinimizeIcon"
             size="md"
-          >
-            <template #icon>
-              <MinimizeIcon class="h-4 w-4 cursor-pointer" />
-            </template>
-          </Button>
+          />
           <Button
             v-if="callStatus == 'Call ended' || callStatus == 'No answer'"
             @click="closeCallPopup"
@@ -182,33 +180,26 @@
         <div class="flex gap-2">
           <Button
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
+            :tooltip="__('Add a note')"
             size="md"
+            :icon="NoteIcon"
             @click="showNoteWindow"
-          >
-            <template #icon>
-              <NoteIcon class="w-4 h-4" />
-            </template>
-          </Button>
+          />
           <Button
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
             size="md"
+            :tooltip="__('Add a task')"
+            :icon="TaskIcon"
             @click="showTaskWindow"
-          >
-            <template #icon>
-              <TaskIcon class="w-4 h-4" />
-            </template>
-          </Button>
+          />
           <Button
             v-if="contact.deal || contact.lead"
             class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
             size="md"
+            :iconRight="ArrowUpRightIcon"
             :label="contact.deal ? __('Deal') : __('Lead')"
             @click="openDealOrLead"
-          >
-            <template #suffix>
-              <ArrowUpRightIcon class="w-4 h-4" />
-            </template>
-          </Button>
+          />
         </div>
 
         <Button
diff --git a/frontend/src/components/Telephony/TwilioCallUI.vue b/frontend/src/components/Telephony/TwilioCallUI.vue
index 7738b1d5..7ab67cd0 100644
--- a/frontend/src/components/Telephony/TwilioCallUI.vue
+++ b/frontend/src/components/Telephony/TwilioCallUI.vue
@@ -52,22 +52,18 @@
             <DialpadIcon class="cursor-pointer rounded-full" />
           </template>
         </Button> -->
-          <Button class="rounded-full">
-            <template #icon>
-              <NoteIcon
-                class="h-4 w-4 cursor-pointer rounded-full text-ink-gray-9"
-                @click="showNoteModal = true"
-              />
-            </template>
-          </Button>
-          <Button class="rounded-full bg-surface-red-5 hover:bg-surface-red-6">
-            <template #icon>
-              <PhoneIcon
-                class="h-4 w-4 rotate-[135deg] fill-white text-ink-white"
-                @click="hangUpCall"
-              />
-            </template>
-          </Button>
+          <Button
+            class="cursor-pointer rounded-full"
+            :tooltip="__('Add a note')"
+            :icon="NoteIcon"
+            @click="showNoteModal = true"
+          />
+          <Button
+            class="rounded-full bg-surface-red-5 hover:bg-surface-red-6 rotate-[135deg] text-ink-white"
+            :tooltip="__('Hang up')"
+            :icon="PhoneIcon"
+            @click="hangUpCall"
+          />
         </div>
         <div v-else-if="calling || callStatus == 'initiating'">
           <Button
@@ -76,13 +72,10 @@
             theme="red"
             :label="__('Cancel')"
             @click="cancelCall"
-            class="rounded-lg"
+            class="rounded-lg rotate-[135deg] text-ink-white"
             :disabled="callStatus == 'initiating'"
-          >
-            <template #prefix>
-              <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-            </template>
-          </Button>
+            :iconLeft="PhoneIcon"
+          />
         </div>
         <div v-else class="flex gap-2">
           <Button
@@ -90,25 +83,19 @@
             variant="solid"
             theme="green"
             :label="__('Accept')"
-            class="rounded-lg"
+            class="rounded-lg text-ink-white"
+            :iconLeft="PhoneIcon"
             @click="acceptIncomingCall"
-          >
-            <template #prefix>
-              <PhoneIcon class="h-4 w-4 fill-white" />
-            </template>
-          </Button>
+          />
           <Button
             size="md"
             variant="solid"
             theme="red"
             :label="__('Reject')"
-            class="rounded-lg"
+            class="rounded-lg rotate-[135deg] text-ink-white"
+            :iconLeft="PhoneIcon"
             @click="rejectIncomingCall"
-          >
-            <template #prefix>
-              <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-            </template>
-          </Button>
+          />
         </div>
       </div>
     </div>
@@ -134,14 +121,13 @@
       <div class="my-1 min-w-[40px] text-center">
         {{ counterUp?.updatedTime }}
       </div>
-      <Button variant="solid" theme="red" class="!h-6 !w-6 rounded-full">
-        <template #icon>
-          <PhoneIcon
-            class="h-4 w-4 rotate-[135deg] fill-white"
-            @click.stop="hangUpCall"
-          />
-        </template>
-      </Button>
+      <Button
+        variant="solid"
+        theme="red"
+        class="!h-6 !w-6 rounded-full rotate-[135deg] text-ink-white"
+        :icon="PhoneIcon"
+        @click.stop="hangUpCall"
+      />
     </div>
     <div v-else-if="calling" class="flex items-center gap-3">
       <div class="my-1">
@@ -150,35 +136,28 @@
       <Button
         variant="solid"
         theme="red"
-        class="!h-6 !w-6 rounded-full"
+        class="!h-6 !w-6 rounded-full rotate-[135deg] text-ink-white"
+        :icon="PhoneIcon"
         @click.stop="cancelCall"
-      >
-        <template #icon>
-          <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-        </template>
-      </Button>
+      />
     </div>
     <div v-else class="flex items-center gap-2">
       <Button
         variant="solid"
         theme="green"
-        class="pulse relative !h-6 !w-6 rounded-full"
+        class="pulse relative !h-6 !w-6 rounded-full animate-pulse text-ink-white"
+        :tooltip="__('Accept call')"
+        :icon="PhoneIcon"
         @click.stop="acceptIncomingCall"
-      >
-        <template #icon>
-          <PhoneIcon class="h-4 w-4 animate-pulse fill-white" />
-        </template>
-      </Button>
+      />
       <Button
         variant="solid"
         theme="red"
-        class="!h-6 !w-6 rounded-full"
+        class="!h-6 !w-6 rounded-full rotate-[135deg] text-ink-white"
+        :tooltip="__('Reject call')"
+        :icon="PhoneIcon"
         @click.stop="rejectIncomingCall"
-      >
-        <template #icon>
-          <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
-        </template>
-      </Button>
+      />
     </div>
   </div>
   <NoteModal
diff --git a/frontend/src/components/ViewBreadcrumbs.vue b/frontend/src/components/ViewBreadcrumbs.vue
index d1b59fbf..ccda9c46 100644
--- a/frontend/src/components/ViewBreadcrumbs.vue
+++ b/frontend/src/components/ViewBreadcrumbs.vue
@@ -24,16 +24,11 @@
           variant="ghost"
           class="text-lg font-medium text-nowrap"
           :label="__(viewControls.currentView.label)"
+          :iconRight="open ? 'chevron-up' : 'chevron-down'"
         >
           <template #prefix>
             <Icon :icon="viewControls.currentView.icon" class="h-4" />
           </template>
-          <template #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
-              class="h-4 text-ink-gray-8"
-            />
-          </template>
         </Button>
       </template>
       <template #item="{ item, active }">
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 6ac57f35..45a1ff4e 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -22,11 +22,7 @@
         </div>
 
         <div class="flex gap-2">
-          <Button :label="__('Refresh')" @click="reload()" :loading="isLoading">
-            <template #icon>
-              <RefreshIcon class="h-4 w-4" />
-            </template>
-          </Button>
+          <Button :icon="RefreshIcon" :loading="isLoading" @click="reload()" />
           <SortBy
             v-if="route.params.viewType !== 'kanban'"
             v-model="list"
@@ -100,13 +96,10 @@
           <Button
             class="whitespace-nowrap mr-2"
             variant="ghost"
-            @click="togglePopover()"
             :label="__('Add filter')"
-          >
-            <template #prefix>
-              <FeatherIcon name="plus" class="h-4" />
-            </template>
-          </Button>
+            iconLeft="plus"
+            @click="togglePopover()"
+          />
         </template>
         <template #item-label="{ option }">
           <Tooltip :text="option.value" :hover-delay="1">
@@ -124,11 +117,7 @@
         :loading="updateQuickFilters.loading"
         @click="saveQuickFilters"
       />
-      <Button @click="customizeQuickFilter = false">
-        <template #icon>
-          <FeatherIcon name="x" class="h-4 w-4" />
-        </template>
-      </Button>
+      <Button icon="x" @click="customizeQuickFilter = false" />
     </div>
   </div>
   <div v-else class="flex items-center justify-between gap-2 px-5 py-4">
@@ -157,11 +146,12 @@
         <Button :label="__('Save Changes')" @click="saveView" />
       </div>
       <div class="flex items-center gap-2">
-        <Button :label="__('Refresh')" @click="reload()" :loading="isLoading">
-          <template #icon>
-            <RefreshIcon class="h-4 w-4" />
-          </template>
-        </Button>
+        <Button
+          tooltip="Refresh"
+          :icon="RefreshIcon"
+          :loading="isLoading"
+          @click="reload()"
+        />
         <GroupBy
           v-if="route.params.viewType === 'group_by'"
           v-model="list"
@@ -218,7 +208,7 @@
           ]"
         >
           <template #default>
-            <Button icon="more-horizontal" />
+            <Button tooltip="More Options" icon="more-horizontal" />
           </template>
         </Dropdown>
       </div>
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 2f1d6ce6..ec683f3d 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -8,9 +8,12 @@
         v-if="callLogsListView?.customListActions"
         :actions="callLogsListView.customListActions"
       />
-      <Button variant="solid" :label="__('Create')" @click="createCallLog">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="createCallLog"
+      />
     </template>
   </LayoutHeader>
   <ViewControls
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index ccdd8e52..0d247ef4 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -93,17 +93,14 @@
                   v-if="callEnabled && contact.doc.mobile_no"
                   :label="__('Make Call')"
                   size="sm"
+                  :iconLeft="PhoneIcon"
                   @click="callEnabled && makeCall(contact.doc.mobile_no)"
-                >
-                  <template #prefix>
-                    <PhoneIcon class="h-4 w-4" />
-                  </template>
-                </Button>
+                />
                 <Button
                   :label="__('Delete')"
                   theme="red"
                   size="sm"
-                  icon-left="trash-2"
+                  iconLeft="trash-2"
                   @click="deleteContact()"
                 />
               </div>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 0044851e..2e758a0d 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showContactModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -57,9 +56,11 @@
     >
       <ContactsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Contacts')]) }}</span>
-      <Button :label="__('Create')" @click="showContactModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showContactModal = true"
+      />
     </div>
   </div>
   <ContactModal
diff --git a/frontend/src/pages/Dashboard.vue b/frontend/src/pages/Dashboard.vue
index ecaea290..bec91e92 100644
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@@ -8,36 +8,27 @@
         <Button
           v-if="!editing"
           :label="__('Refresh')"
+          :iconLeft="LucideRefreshCcw"
           @click="dashboardItems.reload"
-        >
-          <template #prefix>
-            <LucideRefreshCcw class="size-4" />
-          </template>
-        </Button>
+        />
         <Button
           v-if="!editing && isAdmin()"
           :label="__('Edit')"
+          :iconLeft="LucidePenLine"
           @click="enableEditing"
-        >
-          <template #prefix>
-            <LucidePenLine class="size-4" />
-          </template>
-        </Button>
+        />
         <Button
           v-if="editing"
           :label="__('Chart')"
-          icon-left="plus"
+          iconLeft="plus"
           @click="showAddChartModal = true"
         />
         <Button
           v-if="editing && isAdmin()"
           :label="__('Reset to default')"
+          :iconLeft="LucideUndo2"
           @click="resetToDefault"
-        >
-          <template #prefix>
-            <LucideUndo2 class="size-4" />
-          </template>
-        </Button>
+        />
         <Button v-if="editing" :label="__('Cancel')" @click="cancel" />
         <Button
           v-if="editing"
@@ -65,11 +56,7 @@
           iconRight: 'chevron-down',
           iconLeft: 'calendar',
         }"
-      >
-        <template #prefix>
-          <LucideCalendar class="size-4 text-ink-gray-5 mr-2" />
-        </template>
-      </Dropdown>
+      />
       <DateRangePicker
         v-else
         class="!w-48"
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 03ff0e5d..c5f3f7ac 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -23,16 +23,14 @@
         placement="right"
       >
         <template #default="{ open }">
-          <Button v-if="doc.status" :label="doc.status">
+          <Button
+            v-if="doc.status"
+            :label="doc.status"
+            :iconRight="open ? 'chevron-up' : 'chevron-down'"
+          >
             <template #prefix>
               <IndicatorIcon :class="getDealStatus(doc.status).color" />
             </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4"
-              />
-            </template>
           </Button>
         </template>
       </Dropdown>
@@ -78,54 +76,44 @@
             </div>
           </Tooltip>
           <div class="flex gap-1.5">
-            <Tooltip v-if="callEnabled" :text="__('Make a call')">
-              <div>
-                <Button @click="triggerCall">
-                  <template #icon><PhoneIcon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Send an email')">
-              <div>
-                <Button
-                  @click="
-                    doc.email ? openEmailBox() : toast.error(__('No email set'))
-                  "
-                >
-                  <template #icon><Email2Icon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Go to website')">
-              <div>
-                <Button
-                  @click="
-                    doc.website
-                      ? openWebsite(doc.website)
-                      : toast.error(__('No website set'))
-                  "
-                >
-                  <template #icon><LinkIcon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Attach a file')">
-              <div>
-                <Button @click="showFilesUploader = true">
-                  <template #icon><AttachmentIcon /></template>
-                </Button>
-              </div>
-            </Tooltip>
-            <Tooltip :text="__('Delete')">
-              <div>
-                <Button
-                  @click="deleteDeal"
-                  variant="subtle"
-                  icon="trash-2"
-                  theme="red"
-                />
-              </div>
-            </Tooltip>
+            <Button
+              v-if="callEnabled"
+              :tooltip="__('Make a call')"
+              :icon="PhoneIcon"
+              @click="triggerCall"
+            />
+
+            <Button
+              :tooltip="__('Send an email')"
+              :icon="Email2Icon"
+              @click="
+                doc.email ? openEmailBox() : toast.error(__('No email set'))
+              "
+            />
+
+            <Button
+              :tooltip="__('Go to website')"
+              :icon="LinkIcon"
+              @click="
+                doc.website
+                  ? openWebsite(doc.website)
+                  : toast.error(__('No website set'))
+              "
+            />
+
+            <Button
+              :tooltip="__('Attach a file')"
+              :icon="AttachmentIcon"
+              @click="showFilesUploader = true"
+            />
+
+            <Button
+              :tooltip="__('Delete')"
+              variant="subtle"
+              icon="trash-2"
+              theme="red"
+              @click="deleteDeal"
+            />
           </div>
         </div>
       </div>
@@ -228,26 +216,22 @@
                           </Dropdown>
                           <Button
                             variant="ghost"
+                            :tooltip="__('View contact')"
+                            :icon="ArrowUpRightIcon"
                             @click="
                               router.push({
                                 name: 'Contact',
                                 params: { contactId: contact.name },
                               })
                             "
-                          >
-                            <template #icon>
-                              <ArrowUpRightIcon class="h-4 w-4" />
-                            </template>
-                          </Button>
-                          <Button variant="ghost" @click="toggle()">
-                            <template #icon>
-                              <FeatherIcon
-                                name="chevron-right"
-                                class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
-                                :class="{ 'rotate-90': opened }"
-                              />
-                            </template>
-                          </Button>
+                          />
+                          <Button
+                            variant="ghost"
+                            class="transition-all duration-300 ease-in-out"
+                            :class="{ 'rotate-90': opened }"
+                            icon="chevron-right"
+                            @click="toggle()"
+                          />
                         </div>
                       </div>
                     </template>
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index e7ee7955..17abec8b 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showDealModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -233,9 +232,11 @@
     >
       <DealsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Deals')]) }}</span>
-      <Button :label="__('Create')" @click="showDealModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showDealModal = true"
+      />
     </div>
   </div>
   <DealModal
diff --git a/frontend/src/pages/InvalidPage.vue b/frontend/src/pages/InvalidPage.vue
index 875cec2d..29096428 100644
--- a/frontend/src/pages/InvalidPage.vue
+++ b/frontend/src/pages/InvalidPage.vue
@@ -3,11 +3,12 @@
     class="grid h-full place-items-center px-4 py-20 text-center text-lg text-ink-gray-5"
   >
     <div class="space-y-2">
-      <div>Invalid page or not permitted to access</div>
-      <Button :route="{ name: 'Leads' }">
-        <template #prefix><LeadsIcon class="w-4" /></template>
-        Leads
-      </Button>
+      <div>{{ __('Invalid page or not permitted to access') }}</div>
+      <Button
+        :route="{ name: 'Leads' }"
+        :label="__('Leads')"
+        :iconLeft="LeadsIcon"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index a2f7a145..6548bf4d 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -23,16 +23,14 @@
         placement="right"
       >
         <template #default="{ open }">
-          <Button v-if="doc.status" :label="doc.status">
+          <Button
+            v-if="doc.status"
+            :label="doc.status"
+            :iconRight="open ? 'chevron-up' : 'chevron-down'"
+          >
             <template #prefix>
               <IndicatorIcon :class="getLeadStatus(doc.status).color" />
             </template>
-            <template #suffix>
-              <FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4"
-              />
-            </template>
           </Button>
         </template>
       </Dropdown>
@@ -120,71 +118,48 @@
                 </div>
               </Tooltip>
               <div class="flex gap-1.5">
-                <Tooltip v-if="callEnabled" :text="__('Make a call')">
-                  <div>
-                    <Button
-                      @click="
-                        () =>
-                          doc.mobile_no
-                            ? makeCall(doc.mobile_no)
-                            : toast.error(__('No phone number set'))
-                      "
-                    >
-                      <template #icon>
-                        <PhoneIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Send an email')">
-                  <div>
-                    <Button
-                      @click="
-                        doc.email
-                          ? openEmailBox()
-                          : toast.error(__('No email set'))
-                      "
-                    >
-                      <template #icon>
-                        <Email2Icon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Go to website')">
-                  <div>
-                    <Button
-                      @click="
-                        doc.website
-                          ? openWebsite(doc.website)
-                          : toast.error(__('No website set'))
-                      "
-                    >
-                      <template #icon>
-                        <LinkIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Attach a file')">
-                  <div>
-                    <Button @click="showFilesUploader = true">
-                      <template #icon>
-                        <AttachmentIcon />
-                      </template>
-                    </Button>
-                  </div>
-                </Tooltip>
-                <Tooltip :text="__('Delete')">
-                  <div>
-                    <Button
-                      @click="deleteLead"
-                      variant="subtle"
-                      theme="red"
-                      icon="trash-2"
-                    />
-                  </div>
-                </Tooltip>
+                <Button
+                  v-if="callEnabled"
+                  :tooltip="__('Make a call')"
+                  :icon="PhoneIcon"
+                  @click="
+                    () =>
+                      doc.mobile_no
+                        ? makeCall(doc.mobile_no)
+                        : toast.error(__('No phone number set'))
+                  "
+                />
+
+                <Button
+                  :tooltip="__('Send an email')"
+                  :icon="Email2Icon"
+                  @click="
+                    doc.email ? openEmailBox() : toast.error(__('No email set'))
+                  "
+                />
+                <Button
+                  :tooltip="__('Go to website')"
+                  :icon="LinkIcon"
+                  @click="
+                    doc.website
+                      ? openWebsite(doc.website)
+                      : toast.error(__('No website set'))
+                  "
+                />
+
+                <Button
+                  :tooltip="__('Attach a file')"
+                  :icon="AttachmentIcon"
+                  @click="showFilesUploader = true"
+                />
+
+                <Button
+                  :tooltip="__('Delete')"
+                  variant="subtle"
+                  theme="red"
+                  icon="trash-2"
+                  @click="deleteLead"
+                />
               </div>
               <ErrorMessage :message="__(error)" />
             </div>
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index d099bfea..f931c74f 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showLeadModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -259,9 +258,11 @@
     >
       <LeadsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Leads')]) }}</span>
-      <Button :label="__('Create')" @click="showLeadModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showLeadModal = true"
+      />
     </div>
   </div>
   <LeadModal
diff --git a/frontend/src/pages/MobileContact.vue b/frontend/src/pages/MobileContact.vue
index 73dd6afd..18fdc220 100644
--- a/frontend/src/pages/MobileContact.vue
+++ b/frontend/src/pages/MobileContact.vue
@@ -72,12 +72,9 @@
                   v-if="callEnabled && contact.doc.mobile_no"
                   :label="__('Make Call')"
                   size="sm"
+                  :iconLeft="PhoneIcon"
                   @click="callEnabled && makeCall(contact.doc.mobile_no)"
-                >
-                  <template #prefix>
-                    <PhoneIcon class="h-4 w-4" />
-                  </template>
-                </Button>
+                />
                 <Button
                   :label="__('Delete')"
                   theme="red"
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
index 32d6b4c9..ffb24392 100644
--- a/frontend/src/pages/MobileDeal.vue
+++ b/frontend/src/pages/MobileDeal.vue
@@ -22,16 +22,14 @@
           "
         >
           <template #default="{ open }">
-            <Button v-if="doc.status" :label="doc.status">
+            <Button
+              v-if="doc.status"
+              :label="doc.status"
+              :iconRight="open ? 'chevron-up' : 'chevron-down'"
+            >
               <template #prefix>
                 <IndicatorIcon :class="getDealStatus(doc.status).color" />
               </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4"
-                />
-              </template>
             </Button>
           </template>
         </Dropdown>
diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
index 8f6a4cef..82018159 100644
--- a/frontend/src/pages/MobileLead.vue
+++ b/frontend/src/pages/MobileLead.vue
@@ -22,16 +22,14 @@
           "
         >
           <template #default="{ open }">
-            <Button v-if="doc.status" :label="doc.status">
+            <Button
+              v-if="doc.status"
+              :label="doc.status"
+              :iconRight="open ? 'chevron-up' : 'chevron-down'"
+            >
               <template #prefix>
                 <IndicatorIcon :class="getLeadStatus(doc.status).color" />
               </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4"
-                />
-              </template>
             </Button>
           </template>
         </Dropdown>
diff --git a/frontend/src/pages/MobileNotification.vue b/frontend/src/pages/MobileNotification.vue
index bcf283e5..35eb7a80 100644
--- a/frontend/src/pages/MobileNotification.vue
+++ b/frontend/src/pages/MobileNotification.vue
@@ -8,18 +8,12 @@
       />
     </template>
     <template #right-header>
-      <Tooltip :text="__('Mark all as read')">
-        <div>
-          <Button
-            :label="__('Mark all as read')"
-            @click="() => mark_as_read.reload()"
-          >
-            <template #prefix>
-              <MarkAsDoneIcon class="h-4 w-4" />
-            </template>
-          </Button>
-        </div>
-      </Tooltip>
+      <Button
+        :tooltip="__('Mark all as read')"
+        :label="__('Mark all as read')"
+        :iconLeft="MarkAsDoneIcon"
+        @click="() => mark_as_read.reload()"
+      />
     </template>
   </LayoutHeader>
   <div class="flex flex-col overflow-hidden text-ink-gray-9">
diff --git a/frontend/src/pages/MobileOrganization.vue b/frontend/src/pages/MobileOrganization.vue
index ce4dd57b..087f56d8 100644
--- a/frontend/src/pages/MobileOrganization.vue
+++ b/frontend/src/pages/MobileOrganization.vue
@@ -72,12 +72,9 @@
                   :label="__('Delete')"
                   theme="red"
                   size="sm"
+                  iconLeft="trash-2"
                   @click="deleteOrganization"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="trash-2" class="h-4 w-4" />
-                  </template>
-                </Button>
+                />
               </div>
               <ErrorMessage :message="__(error)" />
             </div>
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 0c111edd..9d5aa03d 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -4,9 +4,12 @@
       <ViewBreadcrumbs v-model="viewControls" routeName="Notes" />
     </template>
     <template #right-header>
-      <Button variant="solid" :label="__('Create')" @click="createNote">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="createNote"
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -90,9 +93,7 @@
     >
       <NoteIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Notes')]) }}</span>
-      <Button :label="__('Create')" @click="createNote">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button :label="__('Create')" iconLeft="plus" @click="createNote" />
     </div>
   </div>
   <NoteModal
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
index 0e0cc48f..e00b132c 100644
--- a/frontend/src/pages/Organization.vue
+++ b/frontend/src/pages/Organization.vue
@@ -83,19 +83,14 @@
                   :label="__('Delete')"
                   theme="red"
                   size="sm"
+                  iconLeft="trash-2"
                   @click="deleteOrganization()"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="trash-2" class="h-4 w-4" />
-                  </template>
-                </Button>
-                <Tooltip :text="__('Open website')">
-                  <div>
-                    <Button @click="openWebsite">
-                      <FeatherIcon name="link" class="h-4 w-4" />
-                    </Button>
-                  </div>
-                </Tooltip>
+                />
+                <Button
+                  :tooltip="__('Open website')"
+                  icon="link"
+                  @click="openWebsite"
+                />
               </div>
             </div>
           </template>
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 73c0d906..6edcff78 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -11,10 +11,9 @@
       <Button
         variant="solid"
         :label="__('Create')"
+        iconLeft="plus"
         @click="showOrganizationModal = true"
-      >
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -57,9 +56,11 @@
     >
       <OrganizationsIcon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Organizations')]) }}</span>
-      <Button :label="__('Create')" @click="showOrganizationModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showOrganizationModal = true"
+      />
     </div>
   </div>
   <OrganizationModal
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 5a2c2f1c..c6e9bcc6 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -8,9 +8,12 @@
         v-if="tasksListView?.customListActions"
         :actions="tasksListView.customListActions"
       />
-      <Button variant="solid" :label="__('Create')" @click="createTask">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        variant="solid"
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="createTask"
+      />
     </template>
   </LayoutHeader>
   <ViewControls
@@ -120,8 +123,8 @@
       <div class="flex gap-2 items-center justify-between">
         <div>
           <Button
-            class="-ml-2"
             v-if="getRow(itemName, 'reference_docname').label"
+            class="-ml-2"
             variant="ghost"
             size="sm"
             :label="
@@ -129,17 +132,14 @@
                 ? __('Deal')
                 : __('Lead')
             "
+            :iconRight="ArrowUpRightIcon"
             @click.stop="
               redirect(
                 getRow(itemName, 'reference_doctype').label,
                 getRow(itemName, 'reference_docname').label,
               )
             "
-          >
-            <template #suffix>
-              <ArrowUpRightIcon class="h-4 w-4" />
-            </template>
-          </Button>
+          />
         </div>
         <Dropdown
           class="flex items-center gap-2"
@@ -182,9 +182,11 @@
     >
       <Email2Icon class="h-10 w-10" />
       <span>{{ __('No {0} Found', [__('Tasks')]) }}</span>
-      <Button :label="__('Create')" @click="showTaskModal = true">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <Button
+        :label="__('Create')"
+        iconLeft="plus"
+        @click="showTaskModal = true"
+      />
     </div>
   </div>
   <TaskModal