From a02e1f5e7c85d1ca1454bc2f35f99835a7c3854b Mon Sep 17 00:00:00 2001
From: Brandon Wees <brandonwees@gmail.com>
Date: Mon, 2 Jun 2025 09:47:23 -0500
Subject: [PATCH] chore(web): migrate CircleIconButton to @immich/ui IconButton
 (#18486)

* remove import and referenced file

* first pass at replacing all CircleIconButtons

* fix linting issues

* fix combobox formatting issues

* fix button context menu coloring

* remove circle icon button from search history box

* use theme switcher from UI lib

* dark mode force the asset viewer icons

* fix forced dark mode icons

* dark mode memory viewer icons

* fix: back button in memory viewer

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 web/src/lib/cast/cast-button.svelte           |  39 ++-----
 .../admin-page/jobs/job-tile.svelte           |  10 +-
 .../machine-learning-settings.svelte          |  14 ++-
 .../components/album-page/album-card.svelte   |  13 +--
 .../components/album-page/album-map.svelte    |  12 ++-
 .../album-page/album-options.svelte           |   2 +-
 .../album-page/album-shared-link.svelte       |  12 ++-
 .../components/album-page/album-viewer.svelte |  18 ++--
 .../asset-viewer/actions/close-action.svelte  |  11 +-
 .../asset-viewer/actions/delete-action.svelte |  10 +-
 .../actions/download-action.svelte            |  10 +-
 .../actions/favorite-action.svelte            |  10 +-
 .../actions/motion-photo-action.svelte        |   9 +-
 .../asset-viewer/actions/share-action.svelte  |  11 +-
 .../actions/show-detail-action.svelte         |  11 +-
 .../asset-viewer/activity-viewer.svelte       |  23 ++--
 .../asset-viewer/asset-viewer-nav-bar.svelte  |  44 ++++----
 .../asset-viewer/detail-panel.svelte          |  53 ++++++----
 .../asset-viewer/download-panel.svelte        |  11 +-
 .../editor/crop-tool/crop-tool.svelte         |  28 ++++-
 .../asset-viewer/editor/editor-panel.svelte   |  18 +++-
 .../asset-viewer/slideshow-bar.svelte         |   8 +-
 .../asset-viewer/video-remote-viewer.svelte   |  10 +-
 .../__test__/circle-icon-button.spec.ts       |  29 -----
 .../buttons/circle-icon-button.svelte         | 100 ------------------
 .../lib/components/elements/search-bar.svelte |  24 +++--
 .../faces-page/assign-face-side-panel.svelte  |  45 ++++++--
 .../manage-people-visibility.svelte           |  30 +++++-
 .../faces-page/merge-face-selector.svelte     |  12 ++-
 .../components/faces-page/people-card.svelte  |   5 +-
 .../components/faces-page/people-list.svelte  |  16 +--
 .../faces-page/person-side-panel.svelte       |  37 ++++---
 .../forms/library-import-paths-form.svelte    |  10 +-
 .../forms/library-scan-settings-form.svelte   |   9 +-
 .../lib/components/layouts/ErrorLayout.svelte |   7 +-
 .../memory-page/memory-viewer.svelte          |  68 ++++++++----
 .../photos-page/actions/archive-action.svelte |  13 ++-
 .../actions/create-shared-link.svelte         |  11 +-
 .../photos-page/actions/delete-assets.svelte  |  20 +++-
 .../actions/download-action.svelte            |  11 +-
 .../actions/favorite-action.svelte            |  15 ++-
 .../actions/link-live-photo-action.svelte     |  14 ++-
 .../actions/remove-from-album.svelte          |  11 +-
 .../actions/remove-from-shared-link.svelte    |  11 +-
 .../actions/select-all-assets.svelte          |  10 +-
 .../photos-page/actions/tag-action.svelte     |  13 ++-
 .../individual-shared-viewer.svelte           |  27 ++++-
 .../shared-components/combobox.svelte         |  12 ++-
 .../context-menu/button-context-menu.svelte   |  20 ++--
 .../shared-components/control-app-bar.svelte  |  15 ++-
 .../shared-components/modal-header.svelte     |  14 ++-
 .../navigation-bar/account-info-panel.svelte  |  12 +--
 .../navigation-bar/navigation-bar.svelte      |   4 +-
 .../notification/notification-card.svelte     |  12 ++-
 .../search-bar/search-bar.svelte              |  33 +++++-
 .../search-bar/search-history-box.svelte      |  12 ++-
 .../side-bar/purchase-info.svelte             |  12 ++-
 .../shared-components/theme-button.svelte     |  26 ++---
 .../shared-components/tree/breadcrumbs.svelte |  20 ++--
 .../shared-components/upload-panel.svelte     |  32 +++---
 .../actions/shared-link-copy.svelte           |  11 +-
 .../actions/shared-link-delete.svelte         |  11 +-
 .../actions/shared-link-edit.svelte           |  11 +-
 .../sharedlinks-page/shared-link-card.svelte  |   5 +-
 .../user-settings-page/device-card.svelte     |  12 ++-
 .../partner-settings.svelte                   |  12 ++-
 .../user-api-key-list.svelte                  |  17 +--
 web/src/lib/modals/AlbumUsersModal.svelte     |   2 +-
 .../modals/PersonMergeSuggestionModal.svelte  |  10 +-
 .../[[assetId=id]]/+page.svelte               |  73 +++++++++----
 .../[[assetId=id]]/+page.svelte               |  11 +-
 .../[[assetId=id]]/+page.svelte               |  20 +++-
 .../routes/(user)/user-settings/+page.svelte  |  10 +-
 .../[[assetId=id]]/+page.svelte               |  11 +-
 .../admin/library-management/+page.svelte     |   3 +-
 75 files changed, 822 insertions(+), 556 deletions(-)
 delete mode 100644 web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts
 delete mode 100644 web/src/lib/components/elements/buttons/circle-icon-button.svelte

diff --git a/web/src/lib/cast/cast-button.svelte b/web/src/lib/cast/cast-button.svelte
index c6be1c11d7..392418daa5 100644
--- a/web/src/lib/cast/cast-button.svelte
+++ b/web/src/lib/cast/cast-button.svelte
@@ -2,44 +2,23 @@
   import { t } from 'svelte-i18n';
   import { onMount } from 'svelte';
   import { mdiCast, mdiCastConnected } from '@mdi/js';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { CastDestinationType, castManager } from '$lib/managers/cast-manager.svelte';
   import { GCastDestination } from '$lib/utils/cast/gcast-destination.svelte';
   import { IconButton } from '@immich/ui';
 
-  interface Props {
-    whiteHover?: boolean;
-    navBar?: boolean;
-  }
-
-  let { whiteHover, navBar }: Props = $props();
-
   onMount(async () => {
     await castManager.initialize();
   });
-
-  const getButtonColor = () => {
-    return castManager.isCasting ? 'primary' : whiteHover ? undefined : 'opaque';
-  };
 </script>
 
 {#if castManager.availableDestinations.length > 0 && castManager.availableDestinations[0].type === CastDestinationType.GCAST}
-  {#if navBar}
-    <IconButton
-      shape="round"
-      variant="ghost"
-      size="medium"
-      color={castManager.isCasting ? 'primary' : 'secondary'}
-      icon={castManager.isCasting ? mdiCastConnected : mdiCast}
-      onclick={() => void GCastDestination.showCastDialog()}
-      aria-label={$t('cast')}
-    />
-  {:else}
-    <CircleIconButton
-      color={getButtonColor()}
-      icon={castManager.isCasting ? mdiCastConnected : mdiCast}
-      onclick={GCastDestination.showCastDialog}
-      title={$t('cast')}
-    />
-  {/if}
+  <IconButton
+    shape="round"
+    variant="ghost"
+    size="medium"
+    color={castManager.isCasting ? 'primary' : 'secondary'}
+    icon={castManager.isCasting ? mdiCastConnected : mdiCast}
+    onclick={() => void GCastDestination.showCastDialog()}
+    aria-label={$t('cast')}
+  />
 {/if}
diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
index c77ff60f22..e85232deaa 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import Badge from '$lib/components/elements/badge.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
@@ -18,6 +17,7 @@
   import { t } from 'svelte-i18n';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     title: string;
@@ -76,12 +76,12 @@
                 <span class="text-sm">
                   {$t('admin.jobs_failed', { values: { jobCount: jobCounts.failed.toLocaleString($locale) } })}
                 </span>
-                <CircleIconButton
+                <IconButton
                   color="primary"
                   icon={mdiClose}
-                  title={$t('clear_message')}
-                  size="12"
-                  padding="1"
+                  aria-label={$t('clear_message')}
+                  size="tiny"
+                  shape="round"
                   onclick={() => onCommand({ command: JobCommand.ClearFailed, force: false })}
                 />
               </div>
diff --git a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
index cd2684a3e3..c120cb3750 100644
--- a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
@@ -9,7 +8,7 @@
   import { SettingInputFieldType } from '$lib/constants';
   import { featureFlags } from '$lib/stores/server-config.store';
   import type { SystemConfigDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiMinusCircle } from '@mdi/js';
   import { isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
@@ -49,12 +48,11 @@
           {#each config.machineLearning.urls as _, i (i)}
             {#snippet removeButton()}
               {#if config.machineLearning.urls.length > 1}
-                <CircleIconButton
-                  size="24"
-                  class="ms-2"
-                  padding="2"
-                  color="red"
-                  title=""
+                <IconButton
+                  size="large"
+                  shape="round"
+                  color="danger"
+                  aria-label=""
                   onclick={() => config.machineLearning.urls.splice(i, 1)}
                   icon={mdiMinusCircle}
                 />
diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index de3b0134b3..b6b44cadfe 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { user } from '$lib/stores/user.store';
   import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
   import type { AlbumResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -43,12 +43,13 @@
       class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
       data-testid="context-button-parent"
     >
-      <CircleIconButton
-        color="opaque"
-        title={$t('show_album_options')}
+      <IconButton
+        color="secondary"
+        aria-label={$t('show_album_options')}
         icon={mdiDotsVertical}
-        size="20"
-        padding="2"
+        shape="round"
+        variant="ghost"
+        size="medium"
         class="icon-white-drop-shadow"
         onclick={showAlbumContextMenu}
       />
diff --git a/web/src/lib/components/album-page/album-map.svelte b/web/src/lib/components/album-page/album-map.svelte
index d668f65d0e..a3ccc15d4d 100644
--- a/web/src/lib/components/album-page/album-map.svelte
+++ b/web/src/lib/components/album-page/album-map.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { timeToLoadTheMap } from '$lib/constants';
   import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
@@ -8,7 +7,7 @@
   import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
   import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
-  import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
+  import { IconButton, LoadingSpinner, Modal, ModalBody } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -104,7 +103,14 @@
   }
 </script>
 
-<CircleIconButton title={$t('map')} onclick={openMap} icon={mdiMapOutline} />
+<IconButton
+  variant="ghost"
+  shape="round"
+  color="secondary"
+  icon={mdiMapOutline}
+  onclick={openMap}
+  aria-label={$t('map')}
+/>
 
 {#if albumMapViewManager.isInMapView}
   <Modal title={$t('map')} size="medium" onClose={closeMap}>
diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index 9fbcf4e2ad..3a20e10602 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -167,7 +167,7 @@
                   {$t('role_editor')}
                 {/if}
                 {#if user.id !== album.ownerId}
-                  <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
+                  <ButtonContextMenu icon={mdiDotsVertical} size="medium" title={$t('options')}>
                     {#if role === AlbumUserRole.Viewer}
                       <MenuOption
                         onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Editor)}
diff --git a/web/src/lib/components/album-page/album-shared-link.svelte b/web/src/lib/components/album-page/album-shared-link.svelte
index b56aa11b6d..e7d6503da3 100644
--- a/web/src/lib/components/album-page/album-shared-link.svelte
+++ b/web/src/lib/components/album-page/album-shared-link.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
-  import { Text } from '@immich/ui';
+  import { IconButton, Text } from '@immich/ui';
   import { mdiQrcode } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -41,7 +40,14 @@
     <Text size="tiny" color="muted">{getShareProperties()}</Text>
   </div>
   <div class="flex">
-    <CircleIconButton title={$t('view_qr_code')} icon={mdiQrcode} onclick={onViewQrCode} />
+    <IconButton
+      aria-label={$t('view_qr_code')}
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      icon={mdiQrcode}
+      onclick={onViewQrCode}
+    />
     <SharedLinkCopy link={sharedLink} />
   </div>
 </div>
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index b540be2ed8..59d4b5e6ea 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -16,13 +16,13 @@
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
   import AssetGrid from '../photos-page/asset-grid.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
   import AlbumSummary from './album-summary.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -105,19 +105,25 @@
       {/snippet}
 
       {#snippet trailing()}
-        <CastButton whiteHover />
+        <CastButton />
 
         {#if sharedLink.allowUpload}
-          <CircleIconButton
-            title={$t('add_photos')}
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            aria-label={$t('add_photos')}
             onclick={() => openFileUploadDialog({ albumId: album.id })}
             icon={mdiFileImagePlusOutline}
           />
         {/if}
 
         {#if album.assetCount > 0 && sharedLink.allowDownload}
-          <CircleIconButton
-            title={$t('download')}
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            aria-label={$t('download')}
             onclick={() => downloadAlbum(album)}
             icon={mdiFolderDownloadOutline}
           />
diff --git a/web/src/lib/components/asset-viewer/actions/close-action.svelte b/web/src/lib/components/asset-viewer/actions/close-action.svelte
index 26a9c3e165..7b3f525a3a 100644
--- a/web/src/lib/components/asset-viewer/actions/close-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/close-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -13,4 +13,11 @@
 
 <svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
 
-<CircleIconButton color="opaque" icon={mdiArrowLeft} title={$t('go_back')} onclick={onClose} />
+<IconButton
+  color="secondary"
+  variant="ghost"
+  shape="round"
+  icon={mdiArrowLeft}
+  aria-label={$t('go_back')}
+  onclick={onClose}
+/>
diff --git a/web/src/lib/components/asset-viewer/actions/delete-action.svelte b/web/src/lib/components/asset-viewer/actions/delete-action.svelte
index cf2de7211d..82b88127f6 100644
--- a/web/src/lib/components/asset-viewer/actions/delete-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/delete-action.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
   import {
     NotificationType,
@@ -16,6 +15,7 @@
   import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     asset: AssetResponseDto;
@@ -81,10 +81,12 @@
   ]}
 />
 
-<CircleIconButton
-  color="opaque"
+<IconButton
+  color="secondary"
+  shape="round"
+  variant="ghost"
   icon={asset.isTrashed ? mdiDeleteForeverOutline : mdiDeleteOutline}
-  title={asset.isTrashed ? $t('permanently_delete') : $t('delete')}
+  aria-label={asset.isTrashed ? $t('permanently_delete') : $t('delete')}
   onclick={() => trashOrDelete(asset.isTrashed)}
 />
 
diff --git a/web/src/lib/components/asset-viewer/actions/download-action.svelte b/web/src/lib/components/asset-viewer/actions/download-action.svelte
index 1dfcc8b0f6..89bf5b72cb 100644
--- a/web/src/lib/components/asset-viewer/actions/download-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/download-action.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
   import { downloadFile } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiFolderDownloadOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -22,7 +22,13 @@
 <svelte:document use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />
 
 {#if !menuItem}
-  <CircleIconButton color="opaque" icon={mdiFolderDownloadOutline} title={$t('download')} onclick={onDownloadFile} />
+  <IconButton
+    color="primary"
+    shape="round"
+    icon={mdiFolderDownloadOutline}
+    aria-label={$t('download')}
+    onclick={onDownloadFile}
+  />
 {:else}
   <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={onDownloadFile} />
 {/if}
diff --git a/web/src/lib/components/asset-viewer/actions/favorite-action.svelte b/web/src/lib/components/asset-viewer/actions/favorite-action.svelte
index 3c6c7d7621..d299786bc9 100644
--- a/web/src/lib/components/asset-viewer/actions/favorite-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/favorite-action.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import {
     NotificationType,
     notificationController,
@@ -12,6 +11,7 @@
   import { mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction } from './action';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     asset: AssetResponseDto;
@@ -48,9 +48,11 @@
 
 <svelte:document use:shortcut={{ shortcut: { key: 'f' }, onShortcut: toggleFavorite }} />
 
-<CircleIconButton
-  color="opaque"
+<IconButton
+  color="secondary"
+  shape="round"
+  variant="ghost"
   icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
-  title={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
+  aria-label={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
   onclick={toggleFavorite}
 />
diff --git a/web/src/lib/components/asset-viewer/actions/motion-photo-action.svelte b/web/src/lib/components/asset-viewer/actions/motion-photo-action.svelte
index f629a42db7..e36c173b1d 100644
--- a/web/src/lib/components/asset-viewer/actions/motion-photo-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/motion-photo-action.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiMotionPauseOutline, mdiPlaySpeed } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -11,9 +11,10 @@
   let { isPlaying, onClick }: Props = $props();
 </script>
 
-<CircleIconButton
-  color="opaque"
+<IconButton
+  shape="round"
+  color="primary"
   icon={isPlaying ? mdiMotionPauseOutline : mdiPlaySpeed}
-  title={isPlaying ? $t('stop_motion_photo') : $t('play_motion_photo')}
+  aria-label={isPlaying ? $t('stop_motion_photo') : $t('play_motion_photo')}
   onclick={() => onClick(!isPlaying)}
 />
diff --git a/web/src/lib/components/asset-viewer/actions/share-action.svelte b/web/src/lib/components/asset-viewer/actions/share-action.svelte
index 7e2ffa1b94..5ab60fcb4c 100644
--- a/web/src/lib/components/asset-viewer/actions/share-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/share-action.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { makeSharedLinkUrl } from '$lib/utils';
   import type { AssetResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -23,4 +23,11 @@
   };
 </script>
 
-<CircleIconButton color="opaque" icon={mdiShareVariantOutline} onclick={handleClick} title={$t('share')} />
+<IconButton
+  color="secondary"
+  shape="round"
+  variant="ghost"
+  icon={mdiShareVariantOutline}
+  onclick={handleClick}
+  aria-label={$t('share')}
+/>
diff --git a/web/src/lib/components/asset-viewer/actions/show-detail-action.svelte b/web/src/lib/components/asset-viewer/actions/show-detail-action.svelte
index 5f6ac715db..8ac087bca6 100644
--- a/web/src/lib/components/asset-viewer/actions/show-detail-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/show-detail-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -13,4 +13,11 @@
 
 <svelte:document use:shortcut={{ shortcut: { key: 'i' }, onShortcut: onShowDetail }} />
 
-<CircleIconButton color="opaque" icon={mdiInformationOutline} onclick={onShowDetail} title={$t('info')} />
+<IconButton
+  color="secondary"
+  shape="round"
+  variant="ghost"
+  icon={mdiInformationOutline}
+  onclick={onShowDetail}
+  aria-label={$t('info')}
+/>
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index e98769d495..3c0775ad34 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -12,10 +12,10 @@
   import { handleError } from '$lib/utils/handle-error';
   import { isTenMinutesApart } from '$lib/utils/timesince';
   import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
   import * as luxon from 'luxon';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import UserAvatar from '../shared-components/user-avatar.svelte';
@@ -125,7 +125,14 @@
       bind:clientHeight={activityHeight}
     >
       <div class="flex place-items-center gap-2">
-        <CircleIconButton onclick={onClose} icon={mdiClose} title={$t('close')} />
+        <IconButton
+          shape="round"
+          variant="ghost"
+          color="secondary"
+          onclick={onClose}
+          icon={mdiClose}
+          aria-label={$t('close')}
+        />
 
         <p class="text-lg text-immich-fg dark:text-immich-dark-fg">{$t('activity')}</p>
       </div>
@@ -159,7 +166,7 @@
                     title={$t('comment_options')}
                     align="top-right"
                     direction="left"
-                    size="16"
+                    size="small"
                   >
                     <MenuOption
                       activeColor="bg-red-200"
@@ -212,7 +219,7 @@
                       title={$t('reaction_options')}
                       align="top-right"
                       direction="left"
-                      size="16"
+                      size="small"
                     >
                       <MenuOption
                         activeColor="bg-red-200"
@@ -269,9 +276,11 @@
             </div>
           {:else if message}
             <div class="flex items-end w-fit ms-0">
-              <CircleIconButton
-                title={$t('send_message')}
-                size="15"
+              <IconButton
+                shape="round"
+                aria-label={$t('send_message')}
+                size="small"
+                variant="ghost"
                 icon={mdiSend}
                 class="dark:text-immich-dark-gray"
                 onclick={() => handleSendComment()}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index c433881c2f..e562f60319 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -17,7 +17,6 @@
   import ShareAction from '$lib/components/asset-viewer/actions/share-action.svelte';
   import ShowDetailAction from '$lib/components/asset-viewer/actions/show-detail-action.svelte';
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
@@ -36,6 +35,7 @@
     type PersonResponseDto,
     type StackResponseDto,
   } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import {
     mdiAlertOutline,
     mdiCogRefreshOutline,
@@ -111,34 +111,49 @@
 <div
   class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 transition-transform duration-200"
 >
-  <div class="text-white">
+  <div class="dark">
     {#if showCloseButton}
       <CloseAction {onClose} />
     {/if}
   </div>
-  <div class="flex gap-2 overflow-x-auto text-white" data-testid="asset-viewer-navbar-actions">
+  <div class="flex gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
     <CastButton />
 
     {#if !asset.isTrashed && $user && !isLocked}
       <ShareAction {asset} />
     {/if}
     {#if asset.isOffline}
-      <CircleIconButton color="alert" icon={mdiAlertOutline} onclick={onShowDetail} title={$t('asset_offline')} />
+      <IconButton
+        shape="round"
+        color="danger"
+        icon={mdiAlertOutline}
+        onclick={onShowDetail}
+        aria-label={$t('asset_offline')}
+      />
     {/if}
     {#if asset.livePhotoVideoId}
       {@render motionPhoto?.()}
     {/if}
     {#if asset.type === AssetTypeEnum.Image}
-      <CircleIconButton
-        color="opaque"
-        hideMobile={true}
+      <IconButton
+        class="hidden sm:flex"
+        color="secondary"
+        variant="ghost"
+        shape="round"
         icon={$photoZoomState && $photoZoomState.currentZoom > 1 ? mdiMagnifyMinusOutline : mdiMagnifyPlusOutline}
-        title={$t('zoom_image')}
+        aria-label={$t('zoom_image')}
         onclick={onZoomImage}
       />
     {/if}
     {#if canCopyImageToClipboard() && asset.type === AssetTypeEnum.Image}
-      <CircleIconButton color="opaque" icon={mdiContentCopy} title={$t('copy_image')} onclick={() => onCopyImage?.()} />
+      <IconButton
+        color="secondary"
+        variant="ghost"
+        shape="round"
+        icon={mdiContentCopy}
+        aria-label={$t('copy_image')}
+        onclick={() => onCopyImage?.()}
+      />
     {/if}
 
     {#if !isOwner && showDownloadButton}
@@ -152,20 +167,11 @@
     {#if isOwner}
       <FavoriteAction {asset} {onAction} />
     {/if}
-    <!-- {#if showEditorButton}
-      <CircleIconButton
-        color="opaque"
-        hideMobile={true}
-        icon={mdiImageEditOutline}
-        onclick={showEditorHandler}
-        title={$t('editor')}
-      />
-    {/if} -->
 
     {#if isOwner}
       <DeleteAction {asset} {onAction} {preAction} />
 
-      <ButtonContextMenu direction="left" align="top-right" color="opaque" title={$t('more')} icon={mdiDotsVertical}>
+      <ButtonContextMenu direction="left" align="top-right" color="secondary" title={$t('more')} icon={mdiDotsVertical}>
         {#if showSlideshow && !isLocked}
           <MenuOption icon={mdiPresentationPlay} text={$t('slideshow')} onClick={onPlaySlideshow} />
         {/if}
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 4d0c164ae1..de8e355d33 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -27,6 +27,7 @@
     type AssetResponseDto,
     type ExifResponseDto,
   } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import {
     mdiCalendar,
     mdiCameraIris,
@@ -42,7 +43,6 @@
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import PersonSidePanel from '../faces-page/person-side-panel.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
@@ -158,7 +158,14 @@
 
 <section class="relative p-2">
   <div class="flex place-items-center gap-2">
-    <CircleIconButton icon={mdiClose} title={$t('close')} onclick={onClose} />
+    <IconButton
+      icon={mdiClose}
+      aria-label={$t('close')}
+      onclick={onClose}
+      shape="round"
+      color="secondary"
+      variant="ghost"
+    />
     <p class="text-lg text-immich-fg dark:text-immich-dark-fg">{$t('info')}</p>
   </div>
 
@@ -193,30 +200,34 @@
         <h2>{$t('people').toUpperCase()}</h2>
         <div class="flex gap-2 items-center">
           {#if people.some((person) => person.isHidden)}
-            <CircleIconButton
-              title={$t('show_hidden_people')}
+            <IconButton
+              aria-label={$t('show_hidden_people')}
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
-              padding="1"
-              buttonSize="32"
+              size="medium"
+              shape="round"
+              color="secondary"
+              variant="ghost"
               onclick={() => (showingHiddenPeople = !showingHiddenPeople)}
             />
           {/if}
-          <CircleIconButton
-            title={$t('tag_people')}
+          <IconButton
+            aria-label={$t('tag_people')}
             icon={mdiPlus}
-            padding="1"
-            size="20"
-            buttonSize="32"
+            size="medium"
+            shape="round"
+            color="secondary"
+            variant="ghost"
             onclick={() => (isFaceEditMode.value = !isFaceEditMode.value)}
           />
 
           {#if people.length > 0 || unassignedFaces.length > 0}
-            <CircleIconButton
-              title={$t('edit_people')}
+            <IconButton
+              aria-label={$t('edit_people')}
               icon={mdiPencil}
-              padding="1"
-              size="20"
-              buttonSize="32"
+              size="medium"
+              shape="round"
+              color="secondary"
+              variant="ghost"
               onclick={() => (showEditFaces = true)}
             />
           {/if}
@@ -369,11 +380,13 @@
         <p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
           {asset.originalFileName}
           {#if isOwner}
-            <CircleIconButton
+            <IconButton
               icon={mdiInformationOutline}
-              title={$t('show_file_location')}
-              size="16"
-              padding="2"
+              aria-label={$t('show_file_location')}
+              size="small"
+              shape="round"
+              color="secondary"
+              variant="ghost"
               onclick={toggleAssetPath}
             />
           {/if}
diff --git a/web/src/lib/components/asset-viewer/download-panel.svelte b/web/src/lib/components/asset-viewer/download-panel.svelte
index b4e128e2f4..2eafaf72ed 100644
--- a/web/src/lib/components/asset-viewer/download-panel.svelte
+++ b/web/src/lib/components/asset-viewer/download-panel.svelte
@@ -5,7 +5,7 @@
   import { t } from 'svelte-i18n';
   import { fly, slide } from 'svelte/transition';
   import { getByteUnitString } from '../../utils/byte-units';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { IconButton } from '@immich/ui';
 
   const abort = (downloadKey: string, download: DownloadProgress) => {
     download.abort?.abort();
@@ -42,10 +42,13 @@
             </div>
           </div>
           <div class="absolute end-2">
-            <CircleIconButton
-              title={$t('close')}
+            <IconButton
+              variant="ghost"
+              shape="round"
+              color="secondary"
+              aria-label={$t('close')}
               onclick={() => abort(downloadKey, download)}
-              size="20"
+              size="large"
               icon={mdiClose}
               class="dark:text-immich-dark-gray"
             />
diff --git a/web/src/lib/components/asset-viewer/editor/crop-tool/crop-tool.svelte b/web/src/lib/components/asset-viewer/editor/crop-tool/crop-tool.svelte
index daeccd9074..13e662ac32 100644
--- a/web/src/lib/components/asset-viewer/editor/crop-tool/crop-tool.svelte
+++ b/web/src/lib/components/asset-viewer/editor/crop-tool/crop-tool.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import {
     cropAspectRatio,
     cropImageScale,
@@ -10,11 +9,12 @@
     rotateDegrees,
     type CropAspectRatio,
   } from '$lib/stores/asset-editor.store';
+  import { IconButton } from '@immich/ui';
   import { mdiBackupRestore, mdiCropFree, mdiRotateLeft, mdiRotateRight, mdiSquareOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import { onImageLoad } from './image-loading';
   import { tick } from 'svelte';
+  import { t } from 'svelte-i18n';
   import CropPreset from './crop-preset.svelte';
+  import { onImageLoad } from './image-loading';
 
   let rotateHorizontal = $derived([90, 270].includes($normaizedRorateDegrees));
   const icon_16_9 = `M200-280q-33 0-56.5-23.5T120-360v-240q0-33 23.5-56.5T200-680h560q33 0 56.5 23.5T840-600v240q0 33-23.5 56.5T760-280H200Zm0-80h560v-240H200v240Zm0 0v-240 240Z`;
@@ -148,7 +148,25 @@
     <h2>{$t('editor_crop_tool_h2_rotation').toUpperCase()}</h2>
   </div>
   <ul class="flex-wrap flex-row flex gap-x-6 gap-y-4 justify-center">
-    <li><CircleIconButton title={$t('anti_clockwise')} onclick={() => rotate(false)} icon={mdiRotateLeft} /></li>
-    <li><CircleIconButton title={$t('clockwise')} onclick={() => rotate(true)} icon={mdiRotateRight} /></li>
+    <li>
+      <IconButton
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label={$t('anti_clockwise')}
+        onclick={() => rotate(false)}
+        icon={mdiRotateLeft}
+      />
+    </li>
+    <li>
+      <IconButton
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label={$t('clockwise')}
+        onclick={() => rotate(true)}
+        icon={mdiRotateRight}
+      />
+    </li>
   </ul>
 </div>
diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
index eee76f4db5..f4d5c69c62 100644
--- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
@@ -4,10 +4,10 @@
   import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { type AssetResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '../../elements/buttons/circle-icon-button.svelte';
 
   onMount(() => {
     return websocketEvents.on('on_asset_update', (assetUpdate) => {
@@ -44,17 +44,25 @@
 
 <section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
   <div class="flex place-items-center gap-2">
-    <CircleIconButton icon={mdiClose} title={$t('close')} onclick={onClose} />
+    <IconButton
+      shape="round"
+      variant="ghost"
+      color="secondary"
+      icon={mdiClose}
+      aria-label={$t('close')}
+      onclick={onClose}
+    />
     <p class="text-lg text-immich-fg dark:text-immich-dark-fg capitalize">{$t('editor')}</p>
   </div>
   <section class="px-4 py-4">
     <ul class="flex w-full justify-around">
       {#each editTypes as etype (etype.name)}
         <li>
-          <CircleIconButton
-            color={etype.name === selectedType ? 'primary' : 'opaque'}
+          <IconButton
+            shape="round"
+            color={etype.name === selectedType ? 'primary' : 'secondary'}
             icon={etype.icon}
-            title={etype.name}
+            aria-label={etype.name}
             onclick={() => selectType(etype.name)}
           />
         </li>
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index d1c2730da9..df35c6fb02 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -132,7 +132,7 @@
 
 {#if showControls}
   <div
-    class="m-4 flex gap-2"
+    class="m-4 flex gap-2 dark"
     onmouseenter={() => (isOverControls = true)}
     onmouseleave={() => (isOverControls = false)}
     transition:fly={{ duration: 150 }}
@@ -145,7 +145,6 @@
       icon={mdiClose}
       onclick={onClose}
       aria-label={$t('exit_slideshow')}
-      class="text-white"
     />
 
     <IconButton
@@ -155,7 +154,6 @@
       icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
       onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())}
       aria-label={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
-      class="text-white"
     />
     <IconButton
       variant="ghost"
@@ -164,7 +162,6 @@
       icon={mdiChevronLeft}
       onclick={onPrevious}
       aria-label={$t('previous')}
-      class="text-white"
     />
     <IconButton
       variant="ghost"
@@ -173,7 +170,6 @@
       icon={mdiChevronRight}
       onclick={onNext}
       aria-label={$t('next')}
-      class="text-white"
     />
     <IconButton
       variant="ghost"
@@ -182,7 +178,6 @@
       icon={mdiCog}
       onclick={onShowSettings}
       aria-label={$t('slideshow_settings')}
-      class="text-white"
     />
     {#if !isFullScreen}
       <IconButton
@@ -192,7 +187,6 @@
         icon={mdiFullscreen}
         onclick={onSetToFullScreen}
         aria-label={$t('set_slideshow_to_fullscreen')}
-        class="text-white"
       />
     {/if}
   </div>
diff --git a/web/src/lib/components/asset-viewer/video-remote-viewer.svelte b/web/src/lib/components/asset-viewer/video-remote-viewer.svelte
index 7d2cd14859..da522df99f 100644
--- a/web/src/lib/components/asset-viewer/video-remote-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-remote-viewer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { castManager, CastState } from '$lib/managers/cast-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
+  import { IconButton } from '@immich/ui';
   import { mdiCastConnected, mdiPause, mdiPlay } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -84,11 +84,13 @@
       <LoadingSpinner />
     </div>
   {:else}
-    <CircleIconButton
-      color="opaque"
+    <IconButton
+      color="primary"
+      shape="round"
+      variant="ghost"
       icon={castManager.castState == CastState.PLAYING ? mdiPause : mdiPlay}
       onclick={() => handlePlayPauseButton()}
-      title={castManager.castState == CastState.PLAYING ? 'Pause' : 'Play'}
+      aria-label={castManager.castState == CastState.PLAYING ? 'Pause' : 'Play'}
     />
   {/if}
 
diff --git a/web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts b/web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts
deleted file mode 100644
index eef4508c4e..0000000000
--- a/web/src/lib/components/elements/buttons/__test__/circle-icon-button.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-import { render, screen } from '@testing-library/svelte';
-
-describe('CircleIconButton component', () => {
-  it('should render as a button', () => {
-    render(CircleIconButton, { icon: '', title: 'test' });
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('type', 'button');
-    expect(button).not.toHaveAttribute('href');
-    expect(button).toHaveAttribute('title', 'test');
-  });
-
-  it('should render as a link if href prop is set', () => {
-    render(CircleIconButton, { props: { href: '/test', icon: '', title: 'test' } });
-    const link = screen.getByRole('link');
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test');
-    expect(link).not.toHaveAttribute('type');
-  });
-
-  it('should render icon inside button', () => {
-    render(CircleIconButton, { icon: '', title: 'test' });
-    const button = screen.getByRole('button');
-    const icon = button.querySelector('svg');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('aria-label', 'test');
-  });
-});
diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
deleted file mode 100644
index c243c06f92..0000000000
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts" module>
-  export type Color = 'transparent' | 'light' | 'dark' | 'red' | 'gray' | 'primary' | 'opaque' | 'alert' | 'neutral';
-  export type Padding = '1' | '2' | '3';
-</script>
-
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-
-  /**
-   * Override the default styling of the button for specific use cases, such as the icon color.
-   */
-  interface Props {
-    id?: string;
-    type?: string;
-    href?: string;
-    icon: string;
-    color?: Color;
-    title: string;
-    /**
-     * The padding of the button, used by the `p-{padding}` Tailwind CSS class.
-     */
-    padding?: Padding;
-    /**
-     * Size of the button, used for a CSS value.
-     */
-    size?: string;
-    hideMobile?: boolean;
-    buttonSize?: string | undefined;
-    /**
-     * viewBox attribute for the SVG icon.
-     */
-    viewBox?: string | undefined;
-    class?: string;
-
-    'aria-hidden'?: boolean | undefined | null;
-    'aria-checked'?: 'true' | 'false' | undefined | null;
-    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | undefined | null;
-    'aria-controls'?: string | undefined | null;
-    'aria-expanded'?: boolean;
-    'aria-haspopup'?: boolean;
-    tabindex?: number | undefined | null;
-    role?: string | undefined | null;
-    onclick: (e: MouseEvent) => void;
-    disabled?: boolean;
-  }
-
-  let {
-    type = 'button',
-    href = undefined,
-    icon,
-    color = 'transparent',
-    title,
-    padding = '3',
-    size = '24',
-    hideMobile = false,
-    buttonSize = undefined,
-    viewBox = undefined,
-    class: className = '',
-    onclick,
-    ...rest
-  }: Props = $props();
-
-  const colorClasses: Record<Color, string> = {
-    transparent: 'bg-transparent hover:bg-[#d3d3d3] dark:text-immich-dark-fg',
-    opaque: 'bg-transparent hover:bg-immich-bg/30 text-white hover:dark:text-white',
-    light: 'bg-white hover:bg-[#d3d3d3]',
-    red: 'text-red-400 bg-red-100 hover:bg-[#d3d3d3]',
-    dark: 'bg-[#202123] hover:bg-[#d3d3d3]',
-    alert: 'text-[#ff0000] hover:text-white',
-    gray: 'bg-[#d3d3d3] hover:bg-[#e2e7e9] text-immich-dark-gray hover:text-black',
-    neutral:
-      'dark:bg-immich-dark-gray dark:text-gray-300 hover:dark:bg-immich-dark-gray/50 hover:dark:text-gray-300 bg-gray-200 text-gray-700 hover:bg-gray-300',
-    primary:
-      'bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 hover:dark:bg-immich-dark-primary/80 text-white dark:text-immich-dark-gray',
-  };
-
-  const paddingClasses: Record<Padding, string> = {
-    '1': 'p-1',
-    '2': 'p-2',
-    '3': 'p-3',
-  };
-
-  let colorClass = $derived(colorClasses[color]);
-  let mobileClass = $derived(hideMobile ? 'hidden sm:flex' : '');
-  let paddingClass = $derived(paddingClasses[padding]);
-</script>
-
-<svelte:element
-  this={href ? 'a' : 'button'}
-  type={href ? undefined : type}
-  {title}
-  {href}
-  style:width={buttonSize ? buttonSize + 'px' : ''}
-  style:height={buttonSize ? buttonSize + 'px' : ''}
-  class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}"
-  {onclick}
-  {...rest}
->
-  <Icon path={icon} {size} ariaLabel={title} {viewBox} color="currentColor" />
-</svelte:element>
diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte
index c852be3b68..2440285704 100644
--- a/web/src/lib/components/elements/search-bar.svelte
+++ b/web/src/lib/components/elements/search-bar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { mdiClose, mdiMagnify } from '@mdi/js';
   import type { SearchOptions } from '$lib/utils/dipatch';
+  import { mdiClose, mdiMagnify } from '@mdi/js';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { t } from 'svelte-i18n';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     name: string;
@@ -43,11 +43,13 @@
     ? 'rounded-2xl'
     : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
 >
-  <CircleIconButton
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
     icon={mdiMagnify}
-    title={$t('search')}
-    size="16"
-    padding="2"
+    aria-label={$t('search')}
+    size="small"
     onclick={() => onSearch({ force: true })}
   />
   <input
@@ -65,6 +67,14 @@
     </div>
   {/if}
   {#if name}
-    <CircleIconButton icon={mdiClose} title={$t('clear_value')} size="16" padding="2" onclick={resetSearch} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      icon={mdiClose}
+      aria-label={$t('clear_value')}
+      size="small"
+      onclick={resetSearch}
+    />
   {/if}
 </div>
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
index d45a8d2320..30f3828913 100644
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
@@ -8,6 +7,7 @@
   import { zoomImageToBase64 } from '$lib/utils/people-utils';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
   import { AssetTypeEnum, getAllPeople, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -79,19 +79,36 @@
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}
       <div class="flex items-center gap-2">
-        <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+        <IconButton
+          color="secondary"
+          variant="ghost"
+          shape="round"
+          icon={mdiArrowLeftThin}
+          aria-label={$t('back')}
+          onclick={onClose}
+        />
         <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">{$t('select_face')}</p>
       </div>
       <div class="flex justify-end gap-2">
-        <CircleIconButton
+        <IconButton
+          color="secondary"
+          variant="ghost"
+          shape="round"
           icon={mdiMagnify}
-          title={$t('search_for_existing_person')}
+          aria-label={$t('search_for_existing_person')}
           onclick={() => {
             searchFaces = true;
           }}
         />
         {#if !isShowLoadingNewPerson}
-          <CircleIconButton icon={mdiPlus} title={$t('create_new_person')} onclick={handleCreatePerson} />
+          <IconButton
+            color="secondary"
+            variant="ghost"
+            shape="round"
+            icon={mdiPlus}
+            aria-label={$t('create_new_person')}
+            onclick={handleCreatePerson}
+          />
         {:else}
           <div class="flex place-content-center place-items-center">
             <LoadingSpinner />
@@ -99,7 +116,14 @@
         {/if}
       </div>
     {:else}
-      <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+      <IconButton
+        color="secondary"
+        variant="ghost"
+        shape="round"
+        icon={mdiArrowLeftThin}
+        aria-label={$t('back')}
+        onclick={onClose}
+      />
       <div class="w-full flex">
         <SearchPeople
           type="input"
@@ -113,7 +137,14 @@
           </div>
         {/if}
       </div>
-      <CircleIconButton icon={mdiClose} title={$t('cancel_search')} onclick={() => (searchFaces = false)} />
+      <IconButton
+        color="secondary"
+        variant="ghost"
+        shape="round"
+        icon={mdiClose}
+        aria-label={$t('cancel_search')}
+        onclick={() => (searchFaces = false)}
+      />
     {/if}
   </div>
   <div class="px-4 py-4 text-sm">
diff --git a/web/src/lib/components/faces-page/manage-people-visibility.svelte b/web/src/lib/components/faces-page/manage-people-visibility.svelte
index 00e41d59ec..b8154bc36e 100644
--- a/web/src/lib/components/faces-page/manage-people-visibility.svelte
+++ b/web/src/lib/components/faces-page/manage-people-visibility.svelte
@@ -11,10 +11,9 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePeople, type PersonResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   interface Props {
     people: PersonResponseDto[];
@@ -114,7 +113,14 @@
   class="fixed top-0 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
 >
   <div class="flex items-center">
-    <CircleIconButton title={$t('close')} icon={mdiClose} onclick={onClose} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('close')}
+      icon={mdiClose}
+      onclick={onClose}
+    />
     <div class="flex gap-2 items-center">
       <p id={titleId} class="ms-2">{$t('show_and_hide_people')}</p>
       <p class="text-sm text-gray-400 dark:text-gray-600">({totalPeopleCount.toLocaleString($locale)})</p>
@@ -122,8 +128,22 @@
   </div>
   <div class="flex items-center justify-end">
     <div class="flex items-center md:me-4">
-      <CircleIconButton title={$t('reset_people_visibility')} icon={mdiRestart} onclick={handleResetVisibility} />
-      <CircleIconButton title={toggleButton.label} icon={toggleButton.icon} onclick={handleToggleVisibility} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        aria-label={$t('reset_people_visibility')}
+        icon={mdiRestart}
+        onclick={handleResetVisibility}
+      />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        aria-label={toggleButton.label}
+        icon={toggleButton.icon}
+        onclick={handleToggleVisibility}
+      />
     </div>
     <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
   </div>
diff --git a/web/src/lib/components/faces-page/merge-face-selector.svelte b/web/src/lib/components/faces-page/merge-face-selector.svelte
index fbef296961..7eed929386 100644
--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/merge-face-selector.svelte
@@ -6,14 +6,13 @@
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { flip } from 'svelte/animate';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import FaceThumbnail from './face-thumbnail.svelte';
@@ -133,10 +132,13 @@
                 </div>
                 {#if selectedPeople.length === 1}
                   <div class="absolute bottom-2">
-                    <CircleIconButton
-                      title={$t('swap_merge_direction')}
+                    <IconButton
+                      shape="round"
+                      color="secondary"
+                      variant="ghost"
+                      aria-label={$t('swap_merge_direction')}
                       icon={mdiSwapHorizontal}
-                      size="24"
+                      size="large"
                       onclick={handleSwapPeople}
                     />
                   </div>
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index f82e601b00..51fd53b7d5 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -65,9 +65,8 @@
     <div class="absolute top-2 end-2 z-1">
       <ButtonContextMenu
         buttonClass="icon-white-drop-shadow focus:opacity-100 {showVerticalDots ? 'opacity-100' : 'opacity-0'}"
-        color="opaque"
-        padding="2"
-        size="20"
+        color="primary"
+        size="medium"
         icon={mdiDotsVertical}
         title={$t('show_person_options')}
       >
diff --git a/web/src/lib/components/faces-page/people-list.svelte b/web/src/lib/components/faces-page/people-list.svelte
index 1c1eee39ec..7a401fefa3 100644
--- a/web/src/lib/components/faces-page/people-list.svelte
+++ b/web/src/lib/components/faces-page/people-list.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { type PersonResponseDto } from '@immich/sdk';
-  import FaceThumbnail from './face-thumbnail.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import FaceThumbnail from './face-thumbnail.svelte';
   import { mdiSwapVertical } from '@mdi/js';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     screenHeight: number;
@@ -32,15 +32,17 @@
   </div>
 
   {#if handleSearch}
-    <CircleIconButton
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
       icon={mdiSwapVertical}
       onclick={() => {
         sortBySimilarirty = !sortBySimilarirty;
         handleSearch(sortBySimilarirty);
       }}
-      color="neutral"
-      title={$t('sort_people_by_similarity')}
-    ></CircleIconButton>
+      aria-label={$t('sort_people_by_similarity')}
+    />
   {/if}
 </div>
 
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte
index 315739f996..b2e1382a57 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
@@ -29,6 +28,7 @@
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     assetId: string;
@@ -197,7 +197,14 @@
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">
-      <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        icon={mdiArrowLeftThin}
+        aria-label={$t('back')}
+        onclick={onClose}
+      />
       <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">{$t('edit_faces')}</p>
     </div>
     {#if !isShowLoadingDone}
@@ -304,22 +311,22 @@
 
               <div class="absolute -end-[5px] -top-[5px] h-[20px] w-[20px] rounded-full">
                 {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
-                  <CircleIconButton
+                  <IconButton
+                    shape="round"
+                    variant="ghost"
                     color="primary"
                     icon={mdiRestart}
-                    title={$t('reset')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('reset')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => handleReset(face.id)}
                   />
                 {:else}
-                  <CircleIconButton
+                  <IconButton
                     color="primary"
                     icon={mdiPencil}
-                    title={$t('select_new_face')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('select_new_face')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => handleFacePicker(face)}
                   />
@@ -336,12 +343,12 @@
               </div>
               {#if face.person != null}
                 <div class="absolute -end-[5px] top-[25px] h-[20px] w-[20px] rounded-full">
-                  <CircleIconButton
-                    color="red"
+                  <IconButton
+                    shape="round"
+                    color="danger"
                     icon={mdiTrashCan}
-                    title={$t('delete_face')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('delete_face')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => deleteAssetFace(face)}
                   />
diff --git a/web/src/lib/components/forms/library-import-paths-form.svelte b/web/src/lib/components/forms/library-import-paths-form.svelte
index d664f3f635..c6042d5ce5 100644
--- a/web/src/lib/components/forms/library-import-paths-form.svelte
+++ b/web/src/lib/components/forms/library-import-paths-form.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
   import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { validate, type LibraryResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -188,12 +187,13 @@
 
           <td class="w-4/5 text-ellipsis px-4 text-sm">{validatedPath.importPath}</td>
           <td class="w-1/5 text-ellipsis flex justify-center">
-            <CircleIconButton
+            <IconButton
+              shape="round"
               color="primary"
               icon={mdiPencilOutline}
-              title={$t('edit_import_path')}
-              size="16"
+              aria-label={$t('edit_import_path')}
               onclick={() => onEditImportPath(listIndex)}
+              size="small"
             />
           </td>
         </tr>
diff --git a/web/src/lib/components/forms/library-scan-settings-form.svelte b/web/src/lib/components/forms/library-scan-settings-form.svelte
index 398c54b89c..639771f8a9 100644
--- a/web/src/lib/components/forms/library-scan-settings-form.svelte
+++ b/web/src/lib/components/forms/library-scan-settings-form.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import LibraryExclusionPatternModal from '$lib/modals/LibraryExclusionPatternModal.svelte';
   import { type LibraryResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiPencilOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -117,12 +116,14 @@
         >
           <td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
           <td class="w-1/4 text-ellipsis flex justify-center">
-            <CircleIconButton
+            <IconButton
+              shape="round"
               color="primary"
               icon={mdiPencilOutline}
               title={$t('edit_exclusion_pattern')}
-              size="16"
               onclick={() => onEditExclusionPattern(listIndex)}
+              aria-label={$t('edit_exclusion_pattern')}
+              size="small"
             />
           </td>
         </tr>
diff --git a/web/src/lib/components/layouts/ErrorLayout.svelte b/web/src/lib/components/layouts/ErrorLayout.svelte
index dbf3b136be..f2f59457f7 100644
--- a/web/src/lib/components/layouts/ErrorLayout.svelte
+++ b/web/src/lib/components/layouts/ErrorLayout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import { copyToClipboard } from '$lib/utils';
+  import { IconButton } from '@immich/ui';
   import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -41,10 +41,11 @@
               🚨 {$t('error_title')}
             </h1>
             <div class="flex justify-end">
-              <CircleIconButton
+              <IconButton
+                shape="round"
                 color="primary"
                 icon={mdiContentCopy}
-                title={$t('copy_error')}
+                aria-label={$t('copy_error')}
                 onclick={() => handleCopy()}
               />
             </div>
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 795b0a5045..92118b4d8c 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -4,7 +4,6 @@
   import { intersectionObserver } from '$lib/actions/intersection-observer';
   import { resizeObserver } from '$lib/actions/resize-observer';
   import { shortcuts } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
   import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
@@ -314,14 +313,21 @@
 />
 
 {#if assetInteraction.selectionActive}
-  <div class="sticky top-0 z-1">
+  <div class="sticky top-0 z-1 dark">
     <AssetSelectControlBar
       forceDark
       assets={assetInteraction.selectedAssets}
       clearSelect={() => cancelMultiselect(assetInteraction)}
     >
       <CreateSharedLink />
-      <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        aria-label={$t('select_all')}
+        icon={mdiSelectAll}
+        onclick={handleSelectAll}
+      />
 
       <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
         <AddToAlbum />
@@ -362,8 +368,11 @@
       {/snippet}
 
       <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-        <CircleIconButton
-          title={paused ? $t('play_memories') : $t('pause_memories')}
+        <IconButton
+          shape="round"
+          variant="ghost"
+          color="secondary"
+          aria-label={paused ? $t('play_memories') : $t('pause_memories')}
           icon={paused ? mdiPlay : mdiPause}
           onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
           class="hover:text-black"
@@ -381,8 +390,11 @@
             {(current.assetIndex + 1).toLocaleString($locale)}/{current.memory.assets.length.toLocaleString($locale)}
           </p>
         </div>
-        <CircleIconButton
-          title={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
+        <IconButton
+          shape="round"
+          variant="ghost"
+          color="secondary"
+          aria-label={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
           icon={$videoViewerMuted ? mdiVolumeOff : mdiVolumeHigh}
           onclick={() => ($videoViewerMuted = !$videoViewerMuted)}
         />
@@ -400,7 +412,14 @@
           onclick={() => memoryWrapper?.scrollIntoView({ behavior: 'smooth' })}
           disabled={!galleryInView}
         >
-          <CircleIconButton title={$t('hide_gallery')} icon={mdiChevronUp} color="light" onclick={() => {}} />
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label={$t('hide_gallery')}
+            icon={mdiChevronUp}
+            onclick={() => {}}
+          />
         </button>
       </div>
     {/if}
@@ -476,7 +495,7 @@
             {/key}
 
             <div
-              class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2"
+              class="absolute bottom-0 end-0 p-2 transition-all flex h-full justify-between flex-col items-end gap-2 dark"
               class:opacity-0={galleryInView}
               class:opacity-100={!galleryInView}
             >
@@ -488,7 +507,7 @@
                   color="secondary"
                   aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
                   onclick={() => handleSaveMemory()}
-                  class="text-white dark:text-white w-[48px] h-[48px]"
+                  class="w-[48px] h-[48px]"
                 />
                 <!-- <IconButton
                   icon={mdiShareVariantOutline}
@@ -500,13 +519,11 @@
                 /> -->
                 <ButtonContextMenu
                   icon={mdiDotsVertical}
-                  padding="3"
                   title={$t('menu')}
                   onclick={() => handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
                   direction="left"
-                  size="20"
+                  size="medium"
                   align="bottom-right"
-                  class="text-white dark:text-white"
                 >
                   <MenuOption onClick={() => handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
                   <MenuOption
@@ -526,17 +543,18 @@
                   color="secondary"
                   variant="ghost"
                   shape="round"
-                  class="text-white dark:text-white"
                 />
               </div>
             </div>
             <!-- CONTROL BUTTONS -->
             {#if current.previous}
               <div class="absolute top-1/2 start-0 ms-4">
-                <CircleIconButton
-                  title={$t('previous_memory')}
+                <IconButton
+                  shape="round"
+                  aria-label={$t('previous_memory')}
                   icon={mdiChevronLeft}
-                  color="dark"
+                  variant="ghost"
+                  color="secondary"
                   onclick={handlePreviousAsset}
                 />
               </div>
@@ -544,10 +562,12 @@
 
             {#if current.next}
               <div class="absolute top-1/2 end-0 me-4">
-                <CircleIconButton
-                  title={$t('next_memory')}
+                <IconButton
+                  shape="round"
+                  aria-label={$t('next_memory')}
                   icon={mdiChevronRight}
-                  color="dark"
+                  variant="ghost"
+                  color="secondary"
                   onclick={handleNextAsset}
                 />
               </div>
@@ -615,10 +635,12 @@
       class:opacity-0={galleryInView}
       class:opacity-100={!galleryInView}
     >
-      <CircleIconButton
-        title={$t('show_gallery')}
+      <IconButton
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label={$t('show_gallery')}
         icon={mdiChevronDown}
-        color="light"
         onclick={() => memoryGallery?.scrollIntoView({ behavior: 'smooth' })}
       />
     </div>
diff --git a/web/src/lib/components/photos-page/actions/archive-action.svelte b/web/src/lib/components/photos-page/actions/archive-action.svelte
index 8e8311a2ed..e36038972f 100644
--- a/web/src/lib/components/photos-page/actions/archive-action.svelte
+++ b/web/src/lib/components/photos-page/actions/archive-action.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { OnArchive } from '$lib/utils/actions';
   import { archiveAssets } from '$lib/utils/asset-utils';
   import { AssetVisibility } from '@immich/sdk';
@@ -7,6 +6,7 @@
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onArchive?: OnArchive;
@@ -42,8 +42,15 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={handleArchive} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleArchive} />
   {/if}
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/create-shared-link.svelte b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
index 65a389cd0a..95e0277cb0 100644
--- a/web/src/lib/components/photos-page/actions/create-shared-link.svelte
+++ b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
@@ -7,6 +6,7 @@
   import { makeSharedLinkUrl } from '$lib/utils';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { IconButton } from '@immich/ui';
 
   const { getAssets } = getAssetControlContext();
 
@@ -21,4 +21,11 @@
   };
 </script>
 
-<CircleIconButton title={$t('share')} icon={mdiShareVariantOutline} onclick={handleClick} />
+<IconButton
+  shape="round"
+  color="secondary"
+  variant="ghost"
+  aria-label={$t('share')}
+  icon={mdiShareVariantOutline}
+  onclick={handleClick}
+/>
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index 5cdcffb937..b16e046523 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, deleteAssets } from '$lib/utils/actions';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
@@ -7,6 +6,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import DeleteAssetDialog from '../delete-asset-dialog.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onAssetDelete: OnDelete;
@@ -45,9 +45,23 @@
 {#if menuItem}
   <MenuOption text={label} icon={mdiDeleteOutline} onClick={handleTrash} />
 {:else if loading}
-  <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('loading')}
+    icon={mdiTimerSand}
+    onclick={() => {}}
+  />
 {:else}
-  <CircleIconButton title={label} icon={mdiDeleteForeverOutline} onclick={handleTrash} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={label}
+    icon={mdiDeleteForeverOutline}
+    onclick={handleTrash}
+  />
 {/if}
 
 {#if isShowConfirmation}
diff --git a/web/src/lib/components/photos-page/actions/download-action.svelte b/web/src/lib/components/photos-page/actions/download-action.svelte
index 8f29adcb4e..73f1a77742 100644
--- a/web/src/lib/components/photos-page/actions/download-action.svelte
+++ b/web/src/lib/components/photos-page/actions/download-action.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
@@ -9,6 +8,7 @@
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     filename?: string;
@@ -40,5 +40,12 @@
 {#if menuItem}
   <MenuOption text={$t('download')} icon={menuItemIcon} onClick={handleDownloadFiles} />
 {:else}
-  <CircleIconButton title={$t('download')} icon={mdiCloudDownloadOutline} onclick={handleDownloadFiles} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('download')}
+    icon={mdiCloudDownloadOutline}
+    onclick={handleDownloadFiles}
+  />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/favorite-action.svelte b/web/src/lib/components/photos-page/actions/favorite-action.svelte
index c06bbcdc6d..98ff33cff8 100644
--- a/web/src/lib/components/photos-page/actions/favorite-action.svelte
+++ b/web/src/lib/components/photos-page/actions/favorite-action.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import {
     NotificationType,
@@ -9,8 +8,9 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { t } from 'svelte-i18n';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onFavorite?: OnFavorite;
@@ -68,8 +68,15 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={handleFavorite} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleFavorite} />
   {/if}
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/link-live-photo-action.svelte b/web/src/lib/components/photos-page/actions/link-live-photo-action.svelte
index 8b648c465d..1d36c79730 100644
--- a/web/src/lib/components/photos-page/actions/link-live-photo-action.svelte
+++ b/web/src/lib/components/photos-page/actions/link-live-photo-action.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
-
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
@@ -11,6 +9,7 @@
   import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onLink: OnLink;
@@ -77,8 +76,15 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={onClick} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={onClick} />
   {/if}
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/remove-from-album.svelte b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
index 91db8d0432..747cc1d01c 100644
--- a/web/src/lib/components/photos-page/actions/remove-from-album.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-album.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
@@ -61,5 +61,12 @@
 {#if menuItem}
   <MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} onClick={removeFromAlbum} />
 {:else}
-  <CircleIconButton title={$t('remove_from_album')} icon={mdiDeleteOutline} onclick={removeFromAlbum} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('remove_from_album')}
+    icon={mdiDeleteOutline}
+    onclick={removeFromAlbum}
+  />
 {/if}
diff --git a/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte b/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
index 2c41f77cf9..53dba07bbc 100644
--- a/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
+++ b/web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
@@ -8,6 +7,7 @@
   import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -59,4 +59,11 @@
   };
 </script>
 
-<CircleIconButton title={$t('remove_from_shared_link')} onclick={handleRemove} icon={mdiDeleteOutline} />
+<IconButton
+  shape="round"
+  color="secondary"
+  variant="ghost"
+  aria-label={$t('remove_from_shared_link')}
+  onclick={handleRemove}
+  icon={mdiDeleteOutline}
+/>
diff --git a/web/src/lib/components/photos-page/actions/select-all-assets.svelte b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
index 8fa7351609..f07bfd53cc 100644
--- a/web/src/lib/components/photos-page/actions/select-all-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/select-all-assets.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
   import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -35,8 +34,11 @@
     {$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
   </Button>
 {:else}
-  <CircleIconButton
-    title={$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
     icon={$isSelectingAllAssets ? mdiSelectRemove : mdiSelectAll}
     onclick={$isSelectingAllAssets ? handleCancel : handleSelectAll}
   />
diff --git a/web/src/lib/components/photos-page/actions/tag-action.svelte b/web/src/lib/components/photos-page/actions/tag-action.svelte
index 7d511a67f9..8915897a74 100644
--- a/web/src/lib/components/photos-page/actions/tag-action.svelte
+++ b/web/src/lib/components/photos-page/actions/tag-action.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
   import { tagAssets } from '$lib/utils/asset-utils';
   import { mdiTagMultipleOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { IconButton } from '@immich/ui';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
@@ -43,9 +43,16 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={handleOpen} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleOpen} />
   {/if}
 {/if}
 
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 4fbbc6b6e3..fd3dec5e75 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/web/src/lib/components/share-page/individual-shared-viewer.svelte
@@ -16,13 +16,13 @@
   import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
   import RemoveFromSharedLink from '../photos-page/actions/remove-from-shared-link.svelte';
   import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -95,7 +95,14 @@
         assets={assetInteraction.selectedAssets}
         clearSelect={() => cancelMultiselect(assetInteraction)}
       >
-        <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+        <IconButton
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          aria-label={$t('select_all')}
+          icon={mdiSelectAll}
+          onclick={handleSelectAll}
+        />
         {#if sharedLink?.allowDownload}
           <DownloadAction filename="immich-shared.zip" />
         {/if}
@@ -111,15 +118,25 @@
 
         {#snippet trailing()}
           {#if sharedLink?.allowUpload}
-            <CircleIconButton
-              title={$t('add_photos')}
+            <IconButton
+              shape="round"
+              color="secondary"
+              variant="ghost"
+              aria-label={$t('add_photos')}
               onclick={() => handleUploadAssets()}
               icon={mdiFileImagePlusOutline}
             />
           {/if}
 
           {#if sharedLink?.allowDownload}
-            <CircleIconButton title={$t('download')} onclick={downloadAssets} icon={mdiFolderDownloadOutline} />
+            <IconButton
+              shape="round"
+              color="secondary"
+              variant="ghost"
+              aria-label={$t('download')}
+              onclick={downloadAssets}
+              icon={mdiFolderDownloadOutline}
+            />
           {/if}
         {/snippet}
       </ControlAppBar>
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index b6d32f20b0..91282ae9bc 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -22,9 +22,9 @@
 <script lang="ts">
   import { focusOutside } from '$lib/actions/focus-outside';
   import { shortcuts } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { generateId } from '$lib/utils/generate-id';
+  import { IconButton } from '@immich/ui';
   import { mdiClose, mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -330,7 +330,15 @@
       class:pointer-events-none={!selectedOption}
     >
       {#if selectedOption}
-        <CircleIconButton onclick={onClear} title={$t('clear_value')} icon={mdiClose} size="16" padding="2" />
+        <IconButton
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          onclick={onClear}
+          aria-label={$t('clear_value')}
+          icon={mdiClose}
+          size="small"
+        />
       {:else if !isOpen}
         <Icon path={mdiUnfoldMoreHorizontal} ariaHidden={true} />
       {/if}
diff --git a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
index 9e5d5d2391..0eb65ef75c 100644
--- a/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { shortcuts } from '$lib/actions/shortcut';
-  import CircleIconButton, {
-    type Color,
-    type Padding,
-  } from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
@@ -14,6 +10,7 @@
     type Align,
   } from '$lib/utils/context-menu';
   import { generateId } from '$lib/utils/generate-id';
+  import { IconButton, type Color, type Size, type Variants } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
@@ -30,8 +27,8 @@
     // TODO change to start vs end
     direction?: 'left' | 'right';
     color?: Color;
-    size?: string | undefined;
-    padding?: Padding | undefined;
+    size?: Size | undefined;
+    variant?: Variants | undefined;
     /**
      * Additional classes to apply to the button.
      */
@@ -49,9 +46,9 @@
     title,
     align = 'top-left',
     direction = 'right',
-    color = 'transparent',
+    color = 'secondary',
     size = undefined,
-    padding = undefined,
+    variant = 'ghost',
     buttonClass = undefined,
     hideContent = false,
     children,
@@ -161,12 +158,13 @@
   {...restProps}
 >
   <div bind:this={buttonContainer}>
-    <CircleIconButton
+    <IconButton
       {color}
       {icon}
-      {padding}
       {size}
-      {title}
+      shape="round"
+      {variant}
+      aria-label={title}
       aria-controls={menuId}
       aria-expanded={isOpen}
       aria-haspopup={true}
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index 6830dfefa0..340964b224 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -2,11 +2,11 @@
   import { browser } from '$app/environment';
 
   import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onDestroy, onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   interface Props {
     showBackButton?: boolean;
@@ -80,9 +80,18 @@
       forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-subtle dark:bg-immich-dark-gray',
     ]}
   >
-    <div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg">
+    <div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg {forceDark ? 'dark' : ''}">
       {#if showBackButton}
-        <CircleIconButton title={$t('close')} onclick={handleClose} icon={backIcon} size="24" class={buttonClass} />
+        <IconButton
+          aria-label={$t('close')}
+          onclick={handleClose}
+          color="secondary"
+          shape="round"
+          variant="ghost"
+          icon={backIcon}
+          size="large"
+          class={buttonClass}
+        />
       {/if}
       {@render leading?.()}
     </div>
diff --git a/web/src/lib/components/shared-components/modal-header.svelte b/web/src/lib/components/shared-components/modal-header.svelte
index d7ec142012..57dbba87e0 100644
--- a/web/src/lib/components/shared-components/modal-header.svelte
+++ b/web/src/lib/components/shared-components/modal-header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -37,5 +37,13 @@
     </h1>
   </div>
 
-  <CircleIconButton onclick={onClose} icon={mdiClose} size="20" title={$t('close')} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    onclick={onClose}
+    icon={mdiClose}
+    size="medium"
+    aria-label={$t('close')}
+  />
 </div>
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index aaa8a3cdcf..40ae672e0c 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { focusTrap } from '$lib/actions/focus-trap';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
@@ -10,7 +9,7 @@
   import { user } from '$lib/stores/user.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -44,13 +43,12 @@
     <div class="relative">
       <UserAvatar user={$user} size="xl" />
       <div class="absolute bottom-0 end-0 rounded-full w-6 h-6">
-        <CircleIconButton
+        <IconButton
           color="primary"
           icon={mdiPencil}
-          title={$t('edit_avatar')}
-          class="border"
-          size="12"
-          padding="2"
+          aria-label={$t('edit_avatar')}
+          size="tiny"
+          shape="round"
           onclick={async () => {
             onClose();
             await modalManager.show(AvatarEditModal, {});
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index bd16262514..c886ff1cc4 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -117,7 +117,7 @@
           />
         {/if}
 
-        <ThemeButton padding="2" />
+        <ThemeButton />
 
         <div
           use:clickOutside={{
@@ -140,7 +140,7 @@
           {/if}
         </div>
 
-        <CastButton navBar />
+        <CastButton />
 
         <div
           use:clickOutside={{
diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
index a3b82bde9b..d4fc4023d3 100644
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import {
     isComponentNotification,
@@ -8,6 +7,7 @@
     type ComponentNotification,
     type Notification,
   } from '$lib/components/shared-components/notification/notification';
+  import { IconButton } from '@immich/ui';
   import { mdiCloseCircleOutline, mdiInformationOutline, mdiWindowClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -88,12 +88,14 @@
         {:else if notification.type == NotificationType.Info}{$t('info')}{/if}
       </h2>
     </div>
-    <CircleIconButton
+    <IconButton
+      variant="ghost"
+      shape="round"
+      color="secondary"
       icon={mdiWindowClose}
-      title={$t('close')}
+      aria-label={$t('close')}
       class="dark:text-immich-dark-gray"
-      size="20"
-      padding="2"
+      size="medium"
       onclick={discard}
       aria-hidden={true}
       tabindex={-1}
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 95c49b5757..262c10adfd 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -2,7 +2,6 @@
   import { goto } from '$app/navigation';
   import { focusOutside } from '$lib/actions/focus-outside';
   import { shortcuts } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { AppRoute } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import SearchFilterModal from '$lib/modals/SearchFilterModal.svelte';
@@ -15,6 +14,7 @@
   import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import SearchHistoryBox from './search-history-box.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     value?: string;
@@ -272,7 +272,15 @@
     </div>
 
     <div class="absolute inset-y-0 {showClearIcon ? 'end-14' : 'end-2'} flex items-center ps-6 transition-all">
-      <CircleIconButton title={$t('show_search_options')} icon={mdiTune} onclick={onFilterClick} size="20" />
+      <IconButton
+        aria-label={$t('show_search_options')}
+        shape="round"
+        icon={mdiTune}
+        onclick={onFilterClick}
+        size="medium"
+        color="secondary"
+        variant="ghost"
+      />
     </div>
 
     {#if isFocus}
@@ -291,11 +299,28 @@
 
     {#if showClearIcon}
       <div class="absolute inset-y-0 end-0 flex items-center pe-2">
-        <CircleIconButton onclick={onClear} icon={mdiClose} title={$t('clear')} size="20" />
+        <IconButton
+          onclick={onClear}
+          icon={mdiClose}
+          aria-label={$t('clear')}
+          size="medium"
+          color="secondary"
+          variant="ghost"
+          shape="round"
+        />
       </div>
     {/if}
     <div class="absolute inset-y-0 start-0 flex items-center ps-2">
-      <CircleIconButton type="submit" title={$t('search')} icon={mdiMagnify} size="20" onclick={() => {}} />
+      <IconButton
+        type="submit"
+        aria-label={$t('search')}
+        icon={mdiMagnify}
+        size="medium"
+        onclick={() => {}}
+        shape="round"
+        color="secondary"
+        variant="ghost"
+      />
     </div>
   </form>
 </div>
diff --git a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
index 5c4202dd77..3c4d757ea9 100644
--- a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { searchStore } from '$lib/stores/search.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiClose, mdiMagnify } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -133,11 +133,13 @@
               {savedSearchTerm}
             </div>
             <div aria-hidden={true} class="absolute end-5 top-0 items-center justify-center py-3">
-              <CircleIconButton
+              <IconButton
+                shape="round"
+                color="secondary"
+                variant="ghost"
                 icon={mdiClose}
-                title={$t('remove')}
-                size="18"
-                padding="1"
+                aria-label={$t('remove')}
+                size="medium"
                 tabindex={-1}
                 onclick={() => handleClearSingle(savedSearchTerm)}
               />
diff --git a/web/src/lib/components/shared-components/side-bar/purchase-info.svelte b/web/src/lib/components/shared-components/side-bar/purchase-info.svelte
index d247c9448d..665c620563 100644
--- a/web/src/lib/components/shared-components/side-bar/purchase-info.svelte
+++ b/web/src/lib/components/shared-components/side-bar/purchase-info.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
@@ -14,7 +13,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { getButtonVisibility } from '$lib/utils/purchase-utils';
   import { updateMyPreferences } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiClose, mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -130,13 +129,16 @@
         <div class="h-10 w-10">
           <ImmichLogo noText class="h-[32px]" />
         </div>
-        <CircleIconButton
+        <IconButton
+          shape="round"
+          color="secondary"
+          variant="ghost"
           icon={mdiClose}
           onclick={() => {
             showMessage = false;
           }}
-          title={$t('close')}
-          size="18"
+          aria-label={$t('close')}
+          size="medium"
           class="text-immich-dark-gray/85 dark:text-immich-gray"
         />
       </div>
diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index 2ed59e6cf7..7493770340 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -1,27 +1,13 @@
 <script lang="ts">
-  import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { Theme } from '$lib/constants';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
-  import { t } from 'svelte-i18n';
-
-  let icon = $derived(themeManager.isDark ? sunPath : moonPath);
-  let viewBox = $derived(themeManager.isDark ? sunViewBox : moonViewBox);
-
-  interface Props {
-    padding?: Padding;
-  }
-
-  let { padding = '3' }: Props = $props();
+  import { ThemeSwitcher } from '@immich/ui';
 </script>
 
 {#if !themeManager.theme.system}
-  <CircleIconButton
-    title={$t('toggle_theme')}
-    {icon}
-    {viewBox}
-    role="switch"
-    aria-checked={themeManager.isDark ? 'true' : 'false'}
-    onclick={() => themeManager.toggleTheme()}
-    {padding}
+  <ThemeSwitcher
+    size="medium"
+    color="secondary"
+    onChange={(theme) => themeManager.setTheme(theme == 'dark' ? Theme.DARK : Theme.LIGHT)}
   />
 {/if}
diff --git a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte b/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
index a0d4d250f7..135dda0aca 100644
--- a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
+++ b/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowUpLeft, mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -19,12 +19,14 @@
 <nav class="flex items-center py-2">
   {#if !isRoot}
     <div>
-      <CircleIconButton
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
         icon={mdiArrowUpLeft}
-        title={$t('to_parent')}
+        aria-label={$t('to_parent')}
         href={getLink(pathSegments.slice(0, -1).join('/'))}
         class="me-2"
-        padding="2"
         onclick={() => {}}
       />
     </div>
@@ -35,12 +37,14 @@
   >
     <ol class="flex gap-2 items-center">
       <li>
-        <CircleIconButton
+        <IconButton
+          shape="round"
+          color="secondary"
+          variant="ghost"
           {icon}
           href={getLink('')}
-          {title}
-          size="1.25em"
-          padding="2"
+          aria-label={title}
+          size="medium"
           aria-current={isRoot ? 'page' : undefined}
           onclick={() => {}}
         />
diff --git a/web/src/lib/components/shared-components/upload-panel.svelte b/web/src/lib/components/shared-components/upload-panel.svelte
index 661bb6d961..08426682ba 100644
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/web/src/lib/components/shared-components/upload-panel.svelte
@@ -3,11 +3,11 @@
   import { locale } from '$lib/stores/preferences.store';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import { uploadExecutionQueue } from '$lib/utils/file-uploader';
+  import { IconButton } from '@immich/ui';
   import { mdiCancel, mdiCloudUploadOutline, mdiCog, mdiWindowMinimize } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { quartInOut } from 'svelte/easing';
   import { fade, scale } from 'svelte/transition';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { notificationController, NotificationType } from './notification/notification';
   import UploadAssetPreview from './upload-asset-preview.svelte';
 
@@ -79,27 +79,33 @@
           </div>
           <div class="flex flex-col items-end">
             <div class="flex flex-row">
-              <CircleIconButton
-                title={$t('toggle_settings')}
+              <IconButton
+                variant="ghost"
+                shape="round"
+                color="secondary"
                 icon={mdiCog}
-                size="14"
-                padding="1"
+                size="small"
                 onclick={() => (showOptions = !showOptions)}
+                aria-label={$t('toggle_settings')}
               />
-              <CircleIconButton
-                title={$t('minimize')}
+              <IconButton
+                variant="ghost"
+                shape="round"
+                color="secondary"
+                aria-label={$t('minimize')}
                 icon={mdiWindowMinimize}
-                size="14"
-                padding="1"
+                size="small"
                 onclick={() => (showDetail = false)}
               />
             </div>
             {#if $isDismissible}
-              <CircleIconButton
-                title={$t('dismiss_all_errors')}
+              <IconButton
+                variant="ghost"
+                shape="round"
+                color="secondary"
+                aria-label={$t('dismiss_all_errors')}
                 icon={mdiCancel}
-                size="14"
-                padding="1"
+                size="small"
                 onclick={() => uploadAssetsStore.dismissErrors()}
               />
             {/if}
diff --git a/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte b/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte
index 7edf305a56..7ef421409f 100644
--- a/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte
+++ b/web/src/lib/components/sharedlinks-page/actions/shared-link-copy.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
   import type { SharedLinkResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiContentCopy } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -21,5 +21,12 @@
 {#if menuItem}
   <MenuOption text={$t('copy_link')} icon={mdiContentCopy} onClick={handleCopy} />
 {:else}
-  <CircleIconButton title={$t('copy_link')} icon={mdiContentCopy} onclick={handleCopy} />
+  <IconButton
+    color="secondary"
+    shape="round"
+    variant="ghost"
+    aria-label={$t('copy_link')}
+    icon={mdiContentCopy}
+    onclick={handleCopy}
+  />
 {/if}
diff --git a/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte b/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte
index 8c81e736bb..f844d8483e 100644
--- a/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte
+++ b/web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiDelete } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -15,5 +15,12 @@
 {#if menuItem}
   <MenuOption text={$t('delete_link')} icon={mdiDelete} onClick={onDelete} />
 {:else}
-  <CircleIconButton title={$t('delete_link')} icon={mdiDelete} onclick={onDelete} />
+  <IconButton
+    color="secondary"
+    shape="round"
+    variant="ghost"
+    aria-label={$t('delete_link')}
+    icon={mdiDelete}
+    onclick={onDelete}
+  />
 {/if}
diff --git a/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte b/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte
index 9d427e9317..7482c1b6eb 100644
--- a/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte
+++ b/web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
   import type { SharedLinkResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiCircleEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -22,5 +22,12 @@
 {#if menuItem}
   <MenuOption text={$t('edit_link')} icon={mdiCircleEditOutline} onClick={onEdit} />
 {:else}
-  <CircleIconButton title={$t('edit_link')} icon={mdiCircleEditOutline} onclick={onEdit} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('edit_link')}
+    icon={mdiCircleEditOutline}
+    onclick={onEdit}
+  />
 {/if}
diff --git a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
index 15a4468c0e..3e827281e7 100644
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
@@ -103,11 +103,10 @@
 
     <div class="sm:hidden">
       <ButtonContextMenu
-        color="transparent"
+        color="primary"
         title={$t('shared_link_options')}
         icon={mdiDotsVertical}
-        size="24"
-        padding="3"
+        size="large"
         hideContent
       >
         <SharedLinkEdit menuItem sharedLink={link} />
diff --git a/web/src/lib/components/user-settings-page/device-card.svelte b/web/src/lib/components/user-settings-page/device-card.svelte
index 47636fe4bf..622de54629 100644
--- a/web/src/lib/components/user-settings-page/device-card.svelte
+++ b/web/src/lib/components/user-settings-page/device-card.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import type { SessionResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import {
     mdiAndroid,
     mdiApple,
@@ -75,11 +75,13 @@
     </div>
     {#if !device.current && onDelete}
       <div>
-        <CircleIconButton
-          color="primary"
+        <IconButton
+          color="danger"
+          variant="ghost"
+          shape="round"
           icon={mdiTrashCanOutline}
-          title={$t('log_out')}
-          size="16"
+          aria-label={$t('log_out')}
+          size="small"
           onclick={onDelete}
         />
       </div>
diff --git a/web/src/lib/components/user-settings-page/partner-settings.svelte b/web/src/lib/components/user-settings-page/partner-settings.svelte
index 008d6476c7..6a221a1b3b 100644
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -12,12 +12,11 @@
     type PartnerResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Icon from '../elements/icon.svelte';
 
   interface PartnerSharing {
@@ -144,11 +143,14 @@
           </div>
 
           {#if partner.sharedByMe}
-            <CircleIconButton
+            <IconButton
+              shape="round"
+              color="secondary"
+              variant="ghost"
               onclick={() => handleRemovePartner(partner.user)}
               icon={mdiClose}
-              size="16"
-              title={$t('stop_sharing_photos_with_user')}
+              size="small"
+              aria-label={$t('stop_sharing_photos_with_user')}
             />
           {/if}
         </div>
diff --git a/web/src/lib/components/user-settings-page/user-api-key-list.svelte b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
index 12b100826f..5958015c0f 100644
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { dateFormats } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
   import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -126,18 +125,20 @@
                 >{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
               </td>
               <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/4">
-                <CircleIconButton
+                <IconButton
+                  shape="round"
                   color="primary"
                   icon={mdiPencilOutline}
-                  title={$t('edit_key')}
-                  size="16"
+                  aria-label={$t('edit_key')}
+                  size="small"
                   onclick={() => handleUpdate(key)}
                 />
-                <CircleIconButton
+                <IconButton
+                  shape="round"
                   color="primary"
                   icon={mdiTrashCanOutline}
-                  title={$t('delete_key')}
-                  size="16"
+                  aria-label={$t('delete_key')}
+                  size="small"
                   onclick={() => handleDelete(key)}
                 />
               </td>
diff --git a/web/src/lib/modals/AlbumUsersModal.svelte b/web/src/lib/modals/AlbumUsersModal.svelte
index 78976bf6d1..4f1b8aa94d 100644
--- a/web/src/lib/modals/AlbumUsersModal.svelte
+++ b/web/src/lib/modals/AlbumUsersModal.svelte
@@ -126,7 +126,7 @@
               {/if}
             </div>
             {#if isOwned}
-              <ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
+              <ButtonContextMenu icon={mdiDotsVertical} size="medium" title={$t('options')}>
                 {#if role === AlbumUserRole.Viewer}
                   <MenuOption onClick={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
                 {:else}
diff --git a/web/src/lib/modals/PersonMergeSuggestionModal.svelte b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
index e762b30c03..decf2f37d1 100644
--- a/web/src/lib/modals/PersonMergeSuggestionModal.svelte
+++ b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
@@ -7,12 +7,11 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { mergePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { Button, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiArrowLeft, mdiMerge } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import ImageThumbnail from '../components/assets/thumbnail/image-thumbnail.svelte';
-  import CircleIconButton from '../components/elements/buttons/circle-icon-button.svelte';
 
   interface Props {
     personToMerge: PersonResponseDto;
@@ -75,8 +74,11 @@
           />
         </div>
         <div class="mx-0.5 flex md:mx-2">
-          <CircleIconButton
-            title={$t('swap_merge_direction')}
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label={$t('swap_merge_direction')}
             icon={mdiMerge}
             onclick={() => ([personToMerge, personToBeMergedInto] = [personToBeMergedInto, personToMerge])}
           />
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 1d246d257b..bf870f8b0c 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -9,7 +9,6 @@
   import AlbumTitle from '$lib/components/album-page/album-title.svelte';
   import ActivityStatus from '$lib/components/asset-viewer/activity-status.svelte';
   import ActivityViewer from '$lib/components/asset-viewer/activity-viewer.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
@@ -70,7 +69,7 @@
     updateAlbumInfo,
     type AlbumUserAddDto,
   } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import {
     mdiArrowLeft,
     mdiCogOutline,
@@ -494,10 +493,11 @@
                 <div class="my-3 flex gap-x-1">
                   <!-- link -->
                   {#if album.hasSharedLink && isOwned}
-                    <CircleIconButton
-                      title={$t('create_link_to_share')}
-                      color="gray"
-                      size="20"
+                    <IconButton
+                      aria-label={$t('create_link_to_share')}
+                      color="secondary"
+                      size="medium"
+                      shape="round"
                       icon={mdiLink}
                       onclick={handleShareLink}
                     />
@@ -517,22 +517,24 @@
 
                   <!-- display ellipsis if there are readonly users too -->
                   {#if albumHasViewers}
-                    <CircleIconButton
-                      title={$t('view_all_users')}
-                      color="gray"
-                      size="20"
+                    <IconButton
+                      shape="round"
+                      aria-label={$t('view_all_users')}
+                      color="secondary"
+                      size="medium"
                       icon={mdiDotsVertical}
                       onclick={handleEditUsers}
                     />
                   {/if}
 
                   {#if isOwned}
-                    <CircleIconButton
-                      color="gray"
-                      size="20"
+                    <IconButton
+                      shape="round"
+                      color="secondary"
+                      size="medium"
                       icon={mdiPlus}
                       onclick={handleShare}
-                      title={$t('add_more_users')}
+                      aria-label={$t('add_more_users')}
                     />
                   {/if}
                 </div>
@@ -629,11 +631,14 @@
       {#if viewMode === AlbumPageViewMode.VIEW}
         <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}>
           {#snippet trailing()}
-            <CastButton whiteHover />
+            <CastButton />
 
             {#if isEditor}
-              <CircleIconButton
-                title={$t('add_photos')}
+              <IconButton
+                variant="ghost"
+                shape="round"
+                color="secondary"
+                aria-label={$t('add_photos')}
                 onclick={async () => {
                   assetStore.suspendTransitions = true;
                   viewMode = AlbumPageViewMode.SELECT_ASSETS;
@@ -648,7 +653,14 @@
             {/if}
 
             {#if isOwned}
-              <CircleIconButton title={$t('share')} onclick={handleShare} icon={mdiShareVariantOutline} />
+              <IconButton
+                shape="round"
+                variant="ghost"
+                color="secondary"
+                aria-label={$t('share')}
+                onclick={handleShare}
+                icon={mdiShareVariantOutline}
+              />
             {/if}
 
             {#if $featureFlags.loaded && $featureFlags.map}
@@ -656,12 +668,31 @@
             {/if}
 
             {#if album.assetCount > 0}
-              <CircleIconButton title={$t('slideshow')} onclick={handleStartSlideshow} icon={mdiPresentationPlay} />
-              <CircleIconButton title={$t('download')} onclick={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
+              <IconButton
+                shape="round"
+                variant="ghost"
+                color="secondary"
+                aria-label={$t('slideshow')}
+                onclick={handleStartSlideshow}
+                icon={mdiPresentationPlay}
+              />
+              <IconButton
+                shape="round"
+                variant="ghost"
+                color="secondary"
+                aria-label={$t('download')}
+                onclick={handleDownloadAlbum}
+                icon={mdiFolderDownloadOutline}
+              />
             {/if}
 
             {#if isOwned}
-              <ButtonContextMenu icon={mdiDotsVertical} title={$t('album_options')} offset={{ x: 175, y: 25 }}>
+              <ButtonContextMenu
+                icon={mdiDotsVertical}
+                title={$t('album_options')}
+                color="secondary"
+                offset={{ x: 175, y: 25 }}
+              >
                 {#if album.assetCount > 0}
                   <MenuOption
                     icon={mdiImageOutline}
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
index a0ec649fea..a907040490 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { afterNavigate, goto, invalidateAll } from '$app/navigation';
   import { page } from '$app/stores';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -30,6 +29,7 @@
   import { cancelMultiselect } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
+  import { IconButton } from '@immich/ui';
   import { mdiDotsVertical, mdiFolder, mdiFolderHome, mdiFolderOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -135,7 +135,14 @@
       clearSelect={() => cancelMultiselect(assetInteraction)}
     >
       <CreateSharedLink />
-      <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAllAssets} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        aria-label={$t('select_all')}
+        icon={mdiSelectAll}
+        onclick={handleSelectAllAssets}
+      />
       <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
         <AddToAlbum onAddToAlbum={() => cancelMultiselect(assetInteraction)} />
         <AddToAlbum onAddToAlbum={() => cancelMultiselect(assetInteraction)} shared />
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 32600cdec3..e1aa6f9d27 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -3,7 +3,6 @@
   import { page } from '$app/state';
   import { shortcut } from '$lib/actions/shortcut';
   import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
@@ -45,6 +44,7 @@
     searchSmart,
     type SmartSearchDto,
   } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
   import { tick } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -269,7 +269,14 @@
         clearSelect={() => cancelMultiselect(assetInteraction)}
       >
         <CreateSharedLink />
-        <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+        <IconButton
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          aria-label={$t('select_all')}
+          icon={mdiSelectAll}
+          onclick={handleSelectAll}
+        />
         <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
           <AddToAlbum {onAddToAlbum} />
           <AddToAlbum shared {onAddToAlbum} />
@@ -401,7 +408,14 @@
           clearSelect={() => cancelMultiselect(assetInteraction)}
         >
           <CreateSharedLink />
-          <CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
+          <IconButton
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            aria-label={$t('select_all')}
+            icon={mdiSelectAll}
+            onclick={handleSelectAll}
+          />
           <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
             <AddToAlbum {onAddToAlbum} />
             <AddToAlbum shared {onAddToAlbum} />
diff --git a/web/src/routes/(user)/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
index c434bc7de6..fb3af28823 100644
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/web/src/routes/(user)/user-settings/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import { Container } from '@immich/ui';
+  import { Container, IconButton } from '@immich/ui';
   import { mdiKeyboard } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -18,9 +17,12 @@
 
 <UserPageLayout title={data.meta.title}>
   {#snippet buttons()}
-    <CircleIconButton
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
       icon={mdiKeyboard}
-      title={$t('show_keyboard_shortcuts')}
+      aria-label={$t('show_keyboard_shortcuts')}
       onclick={() => modalManager.show(ShortcutsModal, {})}
     />
   {/snippet}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index bbad882b24..22fc8dac01 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import {
     NotificationType,
@@ -194,11 +193,13 @@
         <div class="text-sm dark:text-white">
           <p>{$t('duplicates_description')}</p>
         </div>
-        <CircleIconButton
+        <IconButton
+          shape="round"
+          variant="ghost"
+          color="secondary"
           icon={mdiInformationOutline}
-          title={$t('deduplication_info')}
-          size="16"
-          padding="2"
+          aria-label={$t('deduplication_info')}
+          size="small"
           onclick={() => modalManager.show(DuplicatesInformationModal, {})}
         />
       </div>
diff --git a/web/src/routes/admin/library-management/+page.svelte b/web/src/routes/admin/library-management/+page.svelte
index ed968a7df4..450e0d8c8d 100644
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -329,9 +329,10 @@
                     align="top-right"
                     direction="left"
                     color="primary"
-                    size="16"
+                    size="medium"
                     icon={mdiDotsVertical}
                     title={$t('library_options')}
+                    variant="filled"
                   >
                     <MenuOption onClick={() => onScanClicked(library)} text={$t('scan_library')} />
                     <hr />