diff --git a/frontend/package.json b/frontend/package.json
index bb9d72de8426..1702d8373c45 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,7 +63,6 @@
     "browserslist": "4.24.4",
     "lightningcss": "1.28.2",
     "unocss": "0.65.4",
-    "unplugin-icons": "22.0.0",
     "unplugin-vue-components": "28.0.0",
     "unplugin-vue-router": "0.10.9",
     "vite": "6.0.7",
diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
index 66a60aaedeac..dda1761628bf 100644
--- a/frontend/src/components/Buttons/FilterButton.vue
+++ b/frontend/src/components/Buttons/FilterButton.vue
@@ -3,10 +3,8 @@
     class="ma-2"
     :icon="$vuetify.display.smAndDown">
     {{ !$vuetify.display.smAndDown ? t('filter') : undefined }}
-    <VIcon :end="!$vuetify.display.smAndDown">
-      <IMdiMenuDown v-if="!$vuetify.display.smAndDown" />
-      <IMdiFilterVariant v-else />
-    </VIcon>
+    <JIcon
+      :class="$vuetify.display.smAndDown ? 'mdi-filter-variant' : 'i-mdi:menu-down'" />
     <VMenu
       :disabled="disabled"
       :close-on-content-click="false"
diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
index 38f1d2f91eff..ed18a959166b 100644
--- a/frontend/src/components/Buttons/LikeButton.vue
+++ b/frontend/src/components/Buttons/LikeButton.vue
@@ -1,17 +1,17 @@
 <template>
   <VBtn
-    :icon="isFavorite ? IMdiHeart : IMdiHeartOutline"
+    icon
     :size="size"
     :color="isFavorite ? 'primary' : undefined"
     :loading="loading"
-    @click.stop.prevent="isFavorite = !isFavorite" />
+    @click.stop.prevent="isFavorite = !isFavorite">
+    <JIcon :class="isFavorite ? 'i-mdi:heart' : 'i-mdi:heart-outline'" />
+  </VBtn>
 </template>
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
-import IMdiHeart from 'virtual:icons/mdi/heart';
-import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
 import { useApi } from '#/composables/apis';
 
diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
index 822f40ad8d97..03ba96007c66 100644
--- a/frontend/src/components/Buttons/MarkPlayedButton.vue
+++ b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -2,16 +2,17 @@
   <VBtn
     v-if="canMarkWatched(item)"
     :color="isPlayed ? 'primary' : undefined"
-    :icon="IMdiCheck"
+    icon
     :loading="loading"
     size="small"
-    @click.stop.prevent="isPlayed = !isPlayed" />
+    @click.stop.prevent="isPlayed = !isPlayed">
+    <JIcon class="i-mdi:check" />
+  </VBtn>
 </template>
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
-import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed, ref } from 'vue';
 import { canMarkWatched } from '#/utils/items';
 import { useApi } from '#/composables/apis';
diff --git a/frontend/src/components/Buttons/Playback/NextTrackButton.vue b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
index 11f2fc679dc5..af61739a82fd 100644
--- a/frontend/src/components/Buttons/Playback/NextTrackButton.vue
+++ b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
@@ -4,9 +4,9 @@
     icon
     :disabled="!playbackManager.nextItem.value"
     @click="playbackManager.setNextItem">
-    <VIcon v-bind="$attrs">
-      <IMdiSkipNext />
-    </VIcon>
+    <JIcon
+      v-bind="$attrs"
+      class="i-mdi:skip-next" />
   </VBtn>
 </template>
 
diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
index d2fd64e11c82..703ef9bef31f 100644
--- a/frontend/src/components/Buttons/Playback/PlayButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -8,16 +8,12 @@
       :loading="loading"
       :disabled="disabled"
       @click.prevent="playOrResume">
-      <VIcon
+      <JIcon
         v-if="shuffle"
-        :size="fab ? 36 : undefined">
-        <IMdiShuffle />
-      </VIcon>
-      <VIcon
+        class="i-mdi-shuffle" />
+      <JIcon
         v-else
-        :size="fab ? 36 : undefined">
-        <IMdiPlay />
-      </VIcon>
+        class="i-mdi-play" />
     </VBtn>
     <VBtn
       v-else-if="!fab"
diff --git a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
index b053ebfb2af2..de74165d68ad 100644
--- a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
@@ -3,27 +3,17 @@
     v-bind="$attrs"
     icon
     :loading="playbackManager.isBuffering.value"
-    @click="playbackManager.playPause">
-    <VIcon
+    @click.passive="playbackManager.playPause">
+    <JIcon
       v-bind="$attrs"
-      :icon="playPauseIcon" />
+      :class="{
+        'i-mdi:exclamation': playbackManager.status.value === PlaybackStatus.Error,
+        'i-mdi:play-circle-outline': playbackManager.isPaused.value,
+        'i-mdi:pause-circle-outline': !playbackManager.isPaused.value,
+      }" />
   </VBtn>
 </template>
 
 <script setup lang="ts">
-import IMdiExclamation from 'virtual:icons/mdi/exclamation';
-import IMdiPauseCircleOutline from 'virtual:icons/mdi/pause-circle-outline';
-import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
-import { computed } from 'vue';
 import { PlaybackStatus, playbackManager } from '#/store/playback-manager';
-
-const playPauseIcon = computed(() => {
-  if (playbackManager.isPaused.value) {
-    return IMdiPlayCircleOutline;
-  } else if (playbackManager.status.value === PlaybackStatus.Error) {
-    return IMdiExclamation;
-  }
-
-  return IMdiPauseCircleOutline;
-});
 </script>
diff --git a/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue b/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
index 1d350d9d3276..e721254cf4d1 100644
--- a/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
@@ -2,9 +2,7 @@
   <VBtn
     icon
     class="align-self-center">
-    <VIcon>
-      <IMdiCog />
-    </VIcon>
+    <JIcon class="i-mdi:cog" />
     <VTooltip
       :text="$t('playbackSettings')"
       location="top" />
diff --git a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
index a75fe326007e..dc32af5db8aa 100644
--- a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
+++ b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
@@ -2,15 +2,14 @@
   <VBtn
     v-bind="$attrs"
     icon
-    @click="() => playbackManager.setPreviousItem()"
-    @dblclick="() => playbackManager.setPreviousItem(true)">
-    <VIcon v-bind="$attrs">
-      <IMdiSkipPrevious />
-    </VIcon>
+    @click.passive="() => playbackManager.setPreviousItem()"
+    @dblclick.passive="() => playbackManager.setPreviousItem(true)">
+    <JIcon
+      v-bind="$attrs"
+      class="i-mdi:skip-previous" />
   </VBtn>
 </template>
 
 <script setup lang="ts">
-import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
 import { playbackManager } from '#/store/playback-manager';
 </script>
diff --git a/frontend/src/components/Buttons/Playback/RepeatButton.vue b/frontend/src/components/Buttons/Playback/RepeatButton.vue
index 8069ab1bb740..d3b4609f3b5a 100644
--- a/frontend/src/components/Buttons/Playback/RepeatButton.vue
+++ b/frontend/src/components/Buttons/Playback/RepeatButton.vue
@@ -3,22 +3,13 @@
     v-bind="$attrs"
     icon
     :color="playbackManager.isRepeating.value ? 'primary' : undefined"
-    @click="playbackManager.toggleRepeatMode">
-    <VIcon
+    @click.passive="playbackManager.toggleRepeatMode">
+    <JIcon
       v-bind="$attrs"
-      :icon="repeatIcon" />
+      :class="playbackManager.repeatMode.value === RepeatMode.RepeatOne ? 'i-mdi:repeat-once' : 'i-mdi:repeat'" />
   </VBtn>
 </template>
 
 <script setup lang="ts">
-import IMdiRepeat from 'virtual:icons/mdi/repeat';
-import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
-import { computed } from 'vue';
 import { RepeatMode, playbackManager } from '#/store/playback-manager';
-
-const repeatIcon = computed(() =>
-  playbackManager.repeatMode.value === RepeatMode.RepeatOne
-    ? IMdiRepeatOnce
-    : IMdiRepeat
-);
 </script>
diff --git a/frontend/src/components/Buttons/Playback/ShuffleButton.vue b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
index 2a97bb3e7b46..b3ed61dac8ee 100644
--- a/frontend/src/components/Buttons/Playback/ShuffleButton.vue
+++ b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
@@ -4,9 +4,9 @@
     icon
     :color="playbackManager.isShuffling.value ? 'primary' : undefined"
     @click="playbackManager.toggleShuffle">
-    <VIcon v-bind="$attrs">
-      <IMdiShuffle />
-    </VIcon>
+    <JIcon
+      v-bind="$attrs"
+      class="i-mdi:shuffle" />
   </VBtn>
 </template>
 
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
index aac5e2010f3f..fb7b1aefa505 100644
--- a/frontend/src/components/Buttons/QueueButton.vue
+++ b/frontend/src/components/Buttons/QueueButton.vue
@@ -2,9 +2,7 @@
   <VBtn
     icon
     class="align-self-center">
-    <VIcon>
-      <IMdiPlaylistPlay />
-    </VIcon>
+    <JIcon class="i-mdi:playlist-play" />
     <VTooltip
       :text="$t('queue')"
       location="top" />
@@ -22,9 +20,9 @@
                 <BlurhashImage
                   v-if="playbackManager.initiator.value"
                   :item="playbackManager.initiator.value" />
-                <VIcon
+                <JIcon
                   v-else
-                  :icon="modeIcon" />
+                  :class="modeIcon" />
               </VAvatar>
             </template>
             <template #subtitle>
@@ -46,9 +44,7 @@
           <VBtn
             icon
             @click="playbackManager.stop">
-            <VIcon>
-              <IMdiPlaylistRemove />
-            </VIcon>
+            <JIcon class="i-mdi:playlist-remove" />
             <VTooltip
               :text="$t('clearQueue')"
               location="top" />
@@ -56,9 +52,7 @@
           <VBtn
             icon
             disabled>
-            <VIcon>
-              <IMdiContentSave />
-            </VIcon>
+            <JIcon class="i-mdi:content-save" />
             <VTooltip
               :text="$t('saveAsPlaylist')"
               location="top" />
@@ -71,8 +65,6 @@
 </template>
 
 <script setup lang="ts">
-import IMdiPlaylistMusic from 'virtual:icons/mdi/playlist-music';
-import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { getTotalEndsAtTime } from '#/utils/time';
@@ -123,8 +115,8 @@ const sourceText = computed(() => {
 
 const modeIcon = computed(() =>
   playbackManager.playbackInitMode.value === InitMode.Shuffle
-    ? IMdiShuffle
-    : IMdiPlaylistMusic
+    ? 'i-mdi:shuffle'
+    : 'i-mdi:playlist-music'
 );
 </script>
 
diff --git a/frontend/src/components/Buttons/ScrollToTopButton.vue b/frontend/src/components/Buttons/ScrollToTopButton.vue
index 33fc58acfacf..82b71004784e 100644
--- a/frontend/src/components/Buttons/ScrollToTopButton.vue
+++ b/frontend/src/components/Buttons/ScrollToTopButton.vue
@@ -8,10 +8,8 @@
       location="bottom right"
       position="fixed"
       variant="elevated"
-      @click="scrollToTop">
-      <VIcon>
-        <IMdiChevronUp />
-      </VIcon>
+      @click.passive="scrollToTop">
+      <JIcon class="i-mdi:chevron-up" />
     </VBtn>
   </JTransition>
 </template>
diff --git a/frontend/src/components/Buttons/SortButton.vue b/frontend/src/components/Buttons/SortButton.vue
index d763aa2dd5ba..2cfbe2b17fb0 100644
--- a/frontend/src/components/Buttons/SortButton.vue
+++ b/frontend/src/components/Buttons/SortButton.vue
@@ -3,23 +3,24 @@
     icon
     :disabled="disabled"
     @click="emit('change', model[0], !ascending)">
-    <VIcon v-if="ascending">
-      <IMdiSortAscending />
-    </VIcon>
-    <VIcon v-else>
-      <IMdiSortDescending />
-    </VIcon>
+    <JIcon
+      v-if="ascending"
+      :class="ascending ? 'i-mdi:sort-ascending' : 'i-mdi:sort-descending'" />
   </VBtn>
   <VBtn class="my-2">
     {{ !$vuetify.display.smAndDown ? sortingLabel : undefined }}
-    <VIcon :end="!$vuetify.display.smAndDown">
-      <IMdiMenuDown v-if="!$vuetify.display.smAndDown" />
-      <IMdiSortAlphabeticalVariant
-        v-else-if="model.length === 0 || model[0] === items[0].value" />
-      <IMdiNumeric9PlusBoxOutline
-        v-else-if="model[0] === items[1].value" />
-      <IMdiCalendarRange v-else-if="model[0] === items[2].value" />
-    </VIcon>
+    <JIcon
+      v-if="!$vuetify.display.smAndDown"
+      class="i-mdi:menu-down" />
+    <JIcon
+      v-else-if="model.length === 0 || model[0] === items[0].value"
+      class="i-mdi:sort-alphabetical-variant" />
+    <JIcon
+      v-else-if="model[0] === items[1].value"
+      class="i-mdi:numeric-9-plus-box-outline" />
+    <JIcon
+      v-else-if="model[0] === items[2].value"
+      class="i-mdi:calendar-range" />
     <VMenu :disabled="disabled">
       <VList
         v-model:selected="model"
diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
index 78c6e2261ec9..c7ff33fffd7d 100644
--- a/frontend/src/components/Buttons/SubtitleSelectionButton.vue
+++ b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -6,10 +6,11 @@
       !playerElement.currentItemParsedSubtitleTracks.value ||
         playerElement.currentItemParsedSubtitleTracks.value.length === 0
     ">
-    <VIcon>
-      <IMdiClosedCaption v-if="playbackManager.currentSubtitleTrack.value" />
-      <IMdiClosedCaptionOutline v-else />
-    </VIcon>
+    <JIcon
+      :class="{
+        'i-mdi:closed-caption': playbackManager.currentSubtitleTrack.value,
+        'i-mdi:closed-caption-outline': !playbackManager.currentSubtitleTrack.value
+      }" />
     <VTooltip
       :text="$t('subtitles')"
       location="top" />
@@ -22,15 +23,16 @@
         <VListItem
           v-for="track of tracks"
           :key="track.srcIndex"
-          :append-icon="
-            track.srcIndex === playbackManager.currentSubtitleTrack.value?.Index
-              ? IMdiCheck
-              : undefined
-          "
           :title="track.label"
           @click="
             playbackManager.currentSubtitleTrack.value = track.srcIndex
-          " />
+          ">
+          <template
+            v-if="track.srcIndex === playbackManager.currentSubtitleTrack.value?.Index"
+            #prepend>
+            <JIcon class="i-mdi:check uno-w-10" />
+          </template>
+        </VListItem>
       </VList>
     </VMenu>
   </VBtn>
@@ -38,7 +40,6 @@
 
 <script setup lang="ts">
 import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
-import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { playbackManager } from '#/store/playback-manager';
diff --git a/frontend/src/components/Buttons/TypeButton.vue b/frontend/src/components/Buttons/TypeButton.vue
index 7a564ce47124..8e7a4adbfd47 100644
--- a/frontend/src/components/Buttons/TypeButton.vue
+++ b/frontend/src/components/Buttons/TypeButton.vue
@@ -9,10 +9,11 @@
           ? items[0].title
           : items.find((i) => i.value === innerModel[0])?.title
     }}
-    <VIcon :end="!$vuetify.display.smAndDown">
-      <IMdiMenuDown v-if="!$vuetify.display.smAndDown" />
-      <IMdiEye v-else />
-    </VIcon>
+    <JIcon
+      :class="{
+        'i-mdi:menu-down': !$vuetify.display.smAndDown,
+        'i-mdi:eye': $vuetify.display.smAndDown
+      }" />
     <VMenu>
       <VList
         :items="items"
diff --git a/frontend/src/components/Dialogs/GenericDialog.vue b/frontend/src/components/Dialogs/GenericDialog.vue
index cf166a98801d..3f4cf29be2f7 100644
--- a/frontend/src/components/Dialogs/GenericDialog.vue
+++ b/frontend/src/components/Dialogs/GenericDialog.vue
@@ -20,7 +20,7 @@
           <VBtn
             icon
             @click="model = false">
-            <IMdiClose />
+            <JIcon class="i-mdi:close" />
           </VBtn>
         </template>
         <VToolbarTitle>
diff --git a/frontend/src/components/Forms/LoginForm.vue b/frontend/src/components/Forms/LoginForm.vue
index c30a5423663e..ea371421537d 100644
--- a/frontend/src/components/Forms/LoginForm.vue
+++ b/frontend/src/components/Forms/LoginForm.vue
@@ -18,9 +18,13 @@
         hide-details
         class="mt-4"
         :label="$t('password')"
-        :append-inner-icon="showPassword ? IconEyeOff : IconEye"
-        :type="showPassword ? 'text' : 'password'"
-        @click:append-inner="() => (showPassword = !showPassword)" />
+        :type="showPassword ? 'text' : 'password'">
+        <template #append-inner>
+          <JIcon
+            :class="showPassword ? 'i-mdi:eye-off' : 'i-mdi:eye'"
+            @click.passive="() => (showPassword = !showPassword)" />
+        </template>
+      </VTextField>
       <VCheckbox
         v-model="login.rememberMe"
         hide-details
@@ -68,8 +72,6 @@
 
 <script setup lang="ts">
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
-import IconEye from 'virtual:icons/mdi/eye';
-import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { fetchIndexPage } from '#/utils/items';
diff --git a/frontend/src/components/Item/Card/ServerCard.vue b/frontend/src/components/Item/Card/ServerCard.vue
index ce232b8bf679..b5f2c4c83e04 100644
--- a/frontend/src/components/Item/Card/ServerCard.vue
+++ b/frontend/src/components/Item/Card/ServerCard.vue
@@ -14,25 +14,19 @@
           <VBtn
             icon
             disabled>
-            <VIcon>
-              <IMdiInformationOutline />
-            </VIcon>
+            <JIcon class="i-mdi:information-outline" />
           </VBtn>
           <VBtn
             icon
             :disabled="loading || serverInfo.isDefault"
             @click="removeServer">
-            <VIcon>
-              <IMdiDelete />
-            </VIcon>
+            <JIcon class="i-mdi:delete" />
           </VBtn>
           <VBtn
             icon
             :disabled="loading"
             @click="setServer">
-            <VIcon>
-              <IMdiArrowRight />
-            </VIcon>
+            <JIcon class="i-mdi:arrow-right" />
           </VBtn>
         </VCardActions>
       </VCol>
diff --git a/frontend/src/components/Item/Identify/IdentifyDialog.vue b/frontend/src/components/Item/Identify/IdentifyDialog.vue
index 27932c444087..7a5b2651349c 100644
--- a/frontend/src/components/Item/Identify/IdentifyDialog.vue
+++ b/frontend/src/components/Item/Identify/IdentifyDialog.vue
@@ -16,7 +16,7 @@
         icon
         :disabled="tabName === 'searchMenu'"
         @click="clear">
-        <IMdiArrowLeft />
+        <JIcon class="i-mdi:arrow-left" />
       </VBtn>
     </template>
 
diff --git a/frontend/src/components/Item/Identify/IdentifyResults.vue b/frontend/src/components/Item/Identify/IdentifyResults.vue
index 47350a934b16..6275625a2dbe 100644
--- a/frontend/src/components/Item/Identify/IdentifyResults.vue
+++ b/frontend/src/components/Item/Identify/IdentifyResults.vue
@@ -13,9 +13,7 @@
             :src="item.ImageUrl"
             :alt="item.Name ?? $t('imageSearchResult')"
             once>
-            <VIcon>
-              <IMdiImage />
-            </VIcon>
+            <JIcon class="i-mdi:image" />
           </JImg>
         </template>
         <template #title>
diff --git a/frontend/src/components/Item/ItemMenu.vue b/frontend/src/components/Item/ItemMenu.vue
index 86d54e769e55..c50cb27b5055 100644
--- a/frontend/src/components/Item/ItemMenu.vue
+++ b/frontend/src/components/Item/ItemMenu.vue
@@ -6,9 +6,7 @@
     size="small"
     @click.stop.prevent="onActivatorClick"
     @contextmenu.stop.prevent="onRightClick">
-    <VIcon>
-      <IMdiDotsVertical />
-    </VIcon>
+    <JIcon class="i-mdi:dots-vertical" />
     <VMenu
       v-model="show"
       :persistent="false"
@@ -28,8 +26,13 @@
             class="text"
             :disabled="menuOption.disabled"
             :title="menuOption.title"
-            :prepend-icon="menuOption.icon"
-            @click="menuOption.action" />
+            @click="menuOption.action">
+            <template #prepend>
+              <JIcon
+                :class="menuOption.icon"
+                class="uno-w-10" />
+            </template>
+          </VListItem>
         </template>
       </VList>
     </VMenu>
@@ -56,20 +59,6 @@
 <script lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { useClipboard, useEventListener } from '@vueuse/core';
-import IMdiArrowExpandDown from 'virtual:icons/mdi/arrow-expand-down';
-import IMdiArrowExpandUp from 'virtual:icons/mdi/arrow-expand-up';
-import IMdiCloudSearch from 'virtual:icons/mdi/cloud-search-outline';
-import IMdiContentCopy from 'virtual:icons/mdi/content-copy';
-import IMdiDelete from 'virtual:icons/mdi/delete';
-import IMdiDisc from 'virtual:icons/mdi/disc';
-import IMdiInformation from 'virtual:icons/mdi/information';
-import IMdiPencilOutline from 'virtual:icons/mdi/pencil-outline';
-import IMdiPlaySpeed from 'virtual:icons/mdi/play-speed';
-import IMdiPlaylistMinus from 'virtual:icons/mdi/playlist-minus';
-import IMdiPlaylistPlus from 'virtual:icons/mdi/playlist-plus';
-import IMdiRefresh from 'virtual:icons/mdi/refresh';
-import IMdiReplay from 'virtual:icons/mdi/replay';
-import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, getCurrentInstance, onMounted, shallowRef, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -93,7 +82,7 @@ import { useConfirmDialog } from '#/composables/use-confirm-dialog';
 
 interface MenuOption {
   title: string;
-  icon: typeof IMdiPlaySpeed;
+  icon: string;
   action: () => void;
   disabled?: boolean;
 }
@@ -184,7 +173,7 @@ const itemDeletionName = computed(() => {
  */
 const playNextAction = {
   title: t('playNext'),
-  icon: IMdiPlaySpeed,
+  icon: 'i-mdi:play-speed',
   action: async (): Promise<void> => {
     await playbackManager.playNext(item);
     useSnackbar(t('itemPlayNext'), 'success');
@@ -192,21 +181,21 @@ const playNextAction = {
 };
 const pushToTopOfQueueAction = {
   title: t('pushToTop'),
-  icon: IMdiArrowExpandUp,
+  icon: 'i-mdi:arrow-expand-up',
   action: (): void => {
     playbackManager.changeItemPosition(item.Id, 0);
   }
 };
 const removeFromQueueAction = {
   title: t('removeFromQueue'),
-  icon: IMdiPlaylistMinus,
+  icon: 'i-mdi:playlist-minus',
   action: (): void => {
     playbackManager.removeFromQueue(item.Id ?? '');
   }
 };
 const pushToBottomOfQueueAction = {
   title: t('pushToBottom'),
-  icon: IMdiArrowExpandDown,
+  icon: 'i-mdi:arrow-expand-down',
   action: (): void => {
     playbackManager.changeItemPosition(
       item.Id,
@@ -216,7 +205,7 @@ const pushToBottomOfQueueAction = {
 };
 const playFromBeginningAction = {
   title: t('playFromBeginning'),
-  icon: IMdiReplay,
+  icon: 'i-mdi:replay',
   action: async (): Promise<void> => {
     await playbackManager.play({
       item: item
@@ -225,7 +214,7 @@ const playFromBeginningAction = {
 };
 const shuffleAction = {
   title: t('shuffle'),
-  icon: IMdiShuffle,
+  icon: 'i-mdi:shuffle',
   action: async (): Promise<void> => {
     await playbackManager.play({
       item: item,
@@ -236,7 +225,7 @@ const shuffleAction = {
 };
 const addToQueueAction = {
   title: t('addToQueue'),
-  icon: IMdiPlaylistPlus,
+  icon: 'i-mdi:playlist-plus',
   action: async (): Promise<void> => {
     await playbackManager.addToQueue(item);
     useSnackbar(t('addedToQueue'), 'success');
@@ -244,7 +233,7 @@ const addToQueueAction = {
 };
 const instantMixAction = {
   title: t('instantMix'),
-  icon: IMdiDisc,
+  icon: 'i-mdi:disc',
   action: async (): Promise<void> => {
     if (item.Id) {
       try {
@@ -261,14 +250,14 @@ const instantMixAction = {
  */
 const mediaInfoAction = {
   title: t('mediaInfo'),
-  icon: IMdiInformation,
+  icon: 'i-mdi:information',
   action: (): void => {
     mediaInfoDialog.value = true;
   }
 };
 const refreshAction = {
   title: t('refreshMetadata'),
-  icon: IMdiRefresh,
+  icon: 'i-mdi:refresh',
   action: (): void => {
     refreshDialog.value = true;
   },
@@ -276,14 +265,14 @@ const refreshAction = {
 };
 const editMetadataAction = {
   title: t('editMetadata'),
-  icon: IMdiPencilOutline,
+  icon: 'i-mdi:pencil-outline',
   action: (): void => {
     metadataDialog.value = true;
   }
 };
 const deleteItemAction = {
   title: t('deleteItem'),
-  icon: IMdiDelete,
+  icon: 'i-mdi:delete',
   action: async (): Promise<void> => {
     await useConfirmDialog(
       async () => {
@@ -314,14 +303,14 @@ const deleteItemAction = {
 };
 const identifyItemAction = {
   title: t('identify'),
-  icon: IMdiCloudSearch,
+  icon: 'i-mdi:cloud-search',
   action: (): void => {
     identifyItemDialog.value = true;
   }
 };
 const copyDownloadURLAction = {
   title: t('copyStreamURL'),
-  icon: IMdiContentCopy,
+  icon: 'i-mdi:content-copy',
   action: async (): Promise<void> => {
     const clipboard = useClipboard();
     let streamUrls: Map<string, string> | string | undefined;
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
index b0aa9b153fd6..1fea767862e4 100644
--- a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
@@ -4,16 +4,13 @@
     <template v-if="!icon">
       {{ value }}
     </template>
-    <VIcon
+    <JIcon
       v-else
-      :icon="icon" />
+      :class="icon" />
   </p>
 </template>
 
 <script setup lang="ts">
-import IMdiCheck from 'virtual:icons/mdi/check';
-import IMdiClose from 'virtual:icons/mdi/close';
-import IMdiHelp from 'virtual:icons/mdi/help';
 import { computed } from 'vue';
 import { isBool } from '@jellyfin-vue/shared/validation';
 
@@ -24,9 +21,9 @@ const { name, value } = defineProps<{
 
 const icon = computed(() => {
   if (isBool(value)) {
-    return value ? IMdiCheck : IMdiClose;
+    return value ? 'i-mdi:check' : 'i-mdi:close';
   }
 
-  return value === 'undefined' ? IMdiHelp : undefined;
+  return value === 'undefined' ? 'i-mdi:help' : undefined;
 });
 </script>
diff --git a/frontend/src/components/Item/MediaInfo.vue b/frontend/src/components/Item/MediaInfo.vue
index eb30aa575f15..97054840f78f 100644
--- a/frontend/src/components/Item/MediaInfo.vue
+++ b/frontend/src/components/Item/MediaInfo.vue
@@ -11,11 +11,8 @@
     <span v-if="item.ProductionYear && year">{{ item.ProductionYear }}</span>
     <span v-if="item.OfficialRating && rating">{{ item.OfficialRating }}</span>
     <span v-if="item.CommunityRating && rating">
-      <VIcon
-        class="rating-icon"
-        size="16">
-        <IMdiStar />
-      </VIcon>
+      <JIcon
+        class="rating-icon i-mdi:star uno-opacity-60" />
       {{ item.CommunityRating.toFixed(1) }}
     </span>
     <span v-if="item.Type === 'MusicAlbum' && item.ChildCount && tracks">
@@ -57,8 +54,4 @@ span:first-of-type {
 span:last-of-type {
   margin-right: 0;
 }
-
-.rating-icon {
-  opacity: 0.6;
-}
 </style>
diff --git a/frontend/src/components/Item/MediaStreamSelector.vue b/frontend/src/components/Item/MediaStreamSelector.vue
index 7240ae3b1dd4..40b4aec2497f 100644
--- a/frontend/src/components/Item/MediaStreamSelector.vue
+++ b/frontend/src/components/Item/MediaStreamSelector.vue
@@ -16,8 +16,13 @@
       <VListItem
         v-bind="templateProps"
         :title="item.raw.title"
-        :subtitle="item.raw.subtitle"
-        :prepend-icon="item.raw.icon" />
+        :subtitle="item.raw.subtitle">
+        <template #prepend>
+          <JIcon
+            :class="item.raw.icon"
+            class="uno-w-10" />
+        </template>
+      </VListItem>
     </template>
   </VSelect>
 </template>
@@ -26,11 +31,6 @@
 import { ref, computed, watch } from 'vue';
 import type { MediaStream } from '@jellyfin/sdk/lib/generated-client';
 import { useI18n } from 'vue-i18n';
-import IMdiSurroundSound20 from 'virtual:icons/mdi/surround-sound-2-0';
-import IMdiSurroundSound31 from 'virtual:icons/mdi/surround-sound-3-1';
-import IMdiSurroundSound51 from 'virtual:icons/mdi/surround-sound-5-1';
-import IMdiSurroundSound71 from 'virtual:icons/mdi/surround-sound-7-1';
-import IMdiSurroundSound from 'virtual:icons/mdi/surround-sound';
 import { watchImmediate } from '@vueuse/core';
 import { isNil } from '@jellyfin-vue/shared/validation';
 import { getLocaleName } from '#/utils/i18n';
@@ -50,22 +50,22 @@ const { t, locale } = useI18n();
  * Audio layout to get related icon
  * @returns Icon name
  */
-function getSurroundIcon(layout: string): typeof IMdiSurroundSound {
+function getSurroundIcon(layout: string) {
   switch (layout) {
     case '2.0': {
-      return IMdiSurroundSound20;
+      return 'i-mdi:surround-sound-2-0';
     }
     case '3.1': {
-      return IMdiSurroundSound31;
+      return 'i-mdi:surround-sound-3-1';
     }
     case '5.1': {
-      return IMdiSurroundSound51;
+      return 'i-mdi:surround-sound-5-1';
     }
     case '7.1': {
-      return IMdiSurroundSound71;
+      return 'i-mdi:surround-sound-7-1';
     }
     default: {
-      return IMdiSurroundSound;
+      return 'i-mdi:surround-sound';
     }
   }
 }
@@ -76,7 +76,7 @@ function getSurroundIcon(layout: string): typeof IMdiSurroundSound {
  */
 function getTrackIcon(
   track: MediaStream
-): typeof IMdiSurroundSound | undefined {
+) {
   if (type === 'Audio' && track.ChannelLayout) {
     return getSurroundIcon(track.ChannelLayout);
   }
diff --git a/frontend/src/components/Item/Metadata/ImageEditor.vue b/frontend/src/components/Item/Metadata/ImageEditor.vue
index a655542ca995..a908b452fc2b 100644
--- a/frontend/src/components/Item/Metadata/ImageEditor.vue
+++ b/frontend/src/components/Item/Metadata/ImageEditor.vue
@@ -29,17 +29,13 @@
           <VBtn
             icon
             @click="onSearch">
-            <VIcon>
-              <IMdiMagnify />
-            </VIcon>
+            <JIcon class="i-mdi:magnify" />
           </VBtn>
           <VBtn
             icon
             class="ml-3"
             @click="onDelete(item)">
-            <VIcon>
-              <IMdiDelete />
-            </VIcon>
+            <JIcon class="i-mdi:delete" />
           </VBtn>
         </VCardActions>
       </VCard>
@@ -75,17 +71,13 @@
             <VBtn
               icon
               @click="onSearch">
-              <VIcon>
-                <IMdiMagnify />
-              </VIcon>
+              <JIcon class="i-mdi:magnify" />
             </VBtn>
             <VBtn
               icon
               class="ml-3"
               @click="onDelete(item)">
-              <VIcon>
-                <IMdiDelete />
-              </VIcon>
+              <JIcon class="i-mdi:delete" />
             </VBtn>
           </VCardActions>
         </VCard>
diff --git a/frontend/src/components/Item/Metadata/ImageSearch.vue b/frontend/src/components/Item/Metadata/ImageSearch.vue
index 67d7d58971fc..88f39c4b8d4e 100644
--- a/frontend/src/components/Item/Metadata/ImageSearch.vue
+++ b/frontend/src/components/Item/Metadata/ImageSearch.vue
@@ -100,9 +100,7 @@
                 icon
                 :disabled="loading"
                 @click="onDownload(item)">
-                <VIcon>
-                  <IMdiCloudDownload />
-                </VIcon>
+                <JIcon class="i-mdi:cloud-download" />
               </VBtn>
             </VCardActions>
           </VCard>
diff --git a/frontend/src/components/Item/Metadata/MetadataEditor.vue b/frontend/src/components/Item/Metadata/MetadataEditor.vue
index 3b0f8bed6185..357f028bdefa 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditor.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditor.vue
@@ -140,9 +140,7 @@
               @click="onPersonAdd">
               <template #append>
                 <VAvatar>
-                  <VIcon>
-                    <IMdiPlusCircle />
-                  </VIcon>
+                  <JIcon class="i-mdi:plus-circle" />
                 </VAvatar>
               </template>
             </VListItem>
@@ -164,19 +162,15 @@
                       )
                     ">
                     <template #placeholder>
-                      <VIcon
-                        class="bg-grey-darken-3">
-                        <IMdiAccount />
-                      </VIcon>
+                      <JIcon
+                        class="bg-grey-darken-3 i-mdi:account" />
                     </template>
                   </JImg>
                 </VAvatar>
               </template>
               <template #append>
                 <VAvatar @click.stop="onPersonDel(i)">
-                  <VIcon>
-                    <IMdiDelete />
-                  </VIcon>
+                  <JIcon class="i-mdi:delete" />
                 </VAvatar>
               </template>
             </VListItem>
diff --git a/frontend/src/components/Item/Metadata/PersonEditor.vue b/frontend/src/components/Item/Metadata/PersonEditor.vue
index 3994c711996a..0054909e6f88 100644
--- a/frontend/src/components/Item/Metadata/PersonEditor.vue
+++ b/frontend/src/components/Item/Metadata/PersonEditor.vue
@@ -18,10 +18,8 @@
                 "
                 :alt="$t('person')">
                 <template #placeholder>
-                  <VIcon
-                    class="bg-grey-darken-3">
-                    <IMdiAccount />
-                  </VIcon>
+                  <JIcon
+                    class="bg-grey-darken-3 i-mdi:account" />
                 </template>
               </JImg>
             </VAvatar>
diff --git a/frontend/src/components/Item/WatchedIndicator.vue b/frontend/src/components/Item/WatchedIndicator.vue
index 33afcbc0a01e..049bf9093508 100644
--- a/frontend/src/components/Item/WatchedIndicator.vue
+++ b/frontend/src/components/Item/WatchedIndicator.vue
@@ -3,9 +3,7 @@
     color="success"
     size="small"
     variant="elevated">
-    <VIcon>
-      <IMdiCheck />
-    </VIcon>
+    <JIcon class="i-mdi:check" />
   </VChip>
 </template>
 
diff --git a/frontend/src/components/Layout/AppBar/AppBar.vue b/frontend/src/components/Layout/AppBar/AppBar.vue
index cfffd3ba3b88..c7c024e2e4ad 100644
--- a/frontend/src/components/Layout/AppBar/AppBar.vue
+++ b/frontend/src/components/Layout/AppBar/AppBar.vue
@@ -10,9 +10,7 @@
       @click="navigationDrawer = !navigationDrawer" />
     <AppBarButtonLayout @click="$router.back()">
       <template #icon>
-        <VIcon>
-          <IMdiArrowLeft />
-        </VIcon>
+        <JIcon class="i-mdi:arrow-left" />
       </template>
     </AppBarButtonLayout>
     <VSpacer />
@@ -22,9 +20,7 @@
       v-hide="remote.socket.isConnected.value && isConnectedToServer"
       :color="isConnectedToServer ? 'yellow' : 'red'">
       <template #icon>
-        <VIcon>
-          <IMdiNetworkOffOutline />
-        </VIcon>
+        <JIcon class="i-mdi:network-off-outline" />
       </template>
       <template #tooltip>
         <span>{{ !remote.socket.isConnected.value ? $t('noWebSocketConnection') : $t('noServerConnection') }}</span>
@@ -33,11 +29,12 @@
     <TaskManagerButton />
     <AppBarButtonLayout @click="switchColorTheme">
       <template #icon>
-        <VIcon>
-          <IMdiBrightnessAuto v-if="clientSettings.isAutoTheme.value" />
-          <IMdiWeatherSunny v-else-if="clientSettings.currentThemeIsDark.value" />
-          <IMdiWeatherNight v-else />
-        </VIcon>
+        <JIcon
+          :class="{
+            'i-mdi:weather-sunny': clientSettings.isAutoTheme.value,
+            'i-mdi:weather-night': !clientSettings.currentThemeIsDark.value,
+            'i-mdi:brightness-auto': clientSettings.currentThemeIsDark.value
+          }" />
       </template>
       <template #tooltip>
         <span v-if="clientSettings.isAutoTheme.value">
diff --git a/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue b/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue
index 59b7c8ba25e3..3a49e9433e35 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue
@@ -1,9 +1,7 @@
 <template>
   <AppBarButtonLayout disabled>
     <template #icon>
-      <VIcon>
-        <IMdiCast />
-      </VIcon>
+      <JIcon class="i-mdi:cast" />
       <VMenu
         v-model="menu"
         :close-on-content-click="false"
@@ -13,33 +11,23 @@
         <VCard>
           <VList color="transparent">
             <VListItem>
-              <VIcon>
-                <IMdiAccountGroup />
-              </VIcon>
+              <JIcon class="i-mdi:account-group" />
               {{ $t('syncPlayGroups') }}
               <VListItemAction>
-                <VIcon>
-                  <IMdiArrowRight />
-                </VIcon>
+                <JIcon class="i-mdi:arrow-right" />
               </VListItemAction>
             </VListItem>
             <VDivider />
             <VListItem>
-              <VIcon>
-                <IMdiAppleAirplay />
-              </VIcon>
+              <JIcon class="i-mdi:apple-airplay" />
               {{ $t('airPlayDevices') }}
             </VListItem>
             <VListItem>
-              <VIcon>
-                <IMdiCast />
-              </VIcon>
+              <JIcon class="i-mdi:cast" />
               {{ $t('googleCastPlaceholderDevice') }}
             </VListItem>
             <VListItem>
-              <VIcon>
-                <ISimpleIconsJellyfin />
-              </VIcon>
+              <JIcon class="i-simple-icons:jellyfin" />
               {{ $t('genericJellyfinPlaceholderDevice') }}
             </VListItem>
           </VList>
diff --git a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
index 52c429f4c680..d5051c212be0 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
@@ -7,9 +7,9 @@
         v-if="!buttonColor"
         class="uno-h-6 uno-w-6"
         indeterminate />
-      <VIcon v-else>
-        <IMdiCheck />
-      </VIcon>
+      <JIcon
+        v-else
+        class="i-mdi:check" />
       <VMenu
         v-model="menu"
         :close-on-content-click="false"
@@ -29,9 +29,9 @@
                   :indeterminate="!!task.progress"
                   :model-value="task.progress"
                   size="24" />
-                <VIcon v-else>
-                  <IMdiCheck />
-                </VIcon>
+                <JIcon
+                  v-else
+                  class="i-mdi:check" />
               </template>
             </VListItem>
           </VList>
diff --git a/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue b/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
index 717444ce9bd9..816ab8b1dd27 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
@@ -7,7 +7,7 @@
         rounded />
       <VMenu location="bottom">
         <VList
-          class="min-list-width"
+          class="uno-min-w-50"
           density="compact">
           <VListItem>
             <template #prepend>
@@ -26,9 +26,7 @@
               #subtitle>
               <VListItemSubtitle>
                 {{ $t('administrator') }}
-                <VIcon size="small">
-                  <IMdiKeyChain />
-                </VIcon>
+                <JIcon class="i-mdi:key-chain uno-text-sm" />
               </VListItemSubtitle>
             </template>
           </VListItem>
@@ -36,9 +34,14 @@
           <VListItem
             v-for="(item, index) in menuItems"
             :key="`bottomMenuItems-${index}`"
-            :prepend-icon="item.icon"
             :title="item.title"
-            @click="item.action" />
+            @click="item.action">
+            <template #prepend>
+              <JIcon
+                :class="item.icon"
+                class="uno-w-10" />
+            </template>
+          </VListItem>
         </VList>
       </VMenu>
     </template>
@@ -46,9 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import IMdiCog from 'virtual:icons/mdi/cog';
-import IMdiLogout from 'virtual:icons/mdi/logout';
-import IMdiPencil from 'virtual:icons/mdi/pencil';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -56,7 +56,7 @@ import { remote } from '#/plugins/remote';
 
 interface MenuItem {
   title: string;
-  icon: typeof IMdiPencil;
+  icon: string;
   action: () => void;
 }
 
@@ -70,7 +70,7 @@ const menuItems = computed<MenuItem[]>(() => {
   if (auth.currentUser.value?.Policy?.IsAdministrator) {
     menuItems.push({
       title: t('metadataEditor'),
-      icon: IMdiPencil,
+      icon: 'i-mdi:pencil',
       action: async (): Promise<void> => {
         await router.push('/metadata');
       }
@@ -80,14 +80,14 @@ const menuItems = computed<MenuItem[]>(() => {
   menuItems.push(
     {
       title: t('settings'),
-      icon: IMdiCog,
+      icon: 'i-mdi:cog',
       action: async (): Promise<void> => {
         await router.push('/settings');
       }
     },
     {
       title: t('logout'),
-      icon: IMdiLogout,
+      icon: 'i-mdi:logout',
       action: async (): Promise<void> => {
         await auth.logoutCurrentUser();
       }
@@ -97,9 +97,3 @@ const menuItems = computed<MenuItem[]>(() => {
   return menuItems;
 });
 </script>
-
-<style scoped>
-.min-list-width {
-  min-width: 200px;
-}
-</style>
diff --git a/frontend/src/components/Layout/AppBar/SearchField.vue b/frontend/src/components/Layout/AppBar/SearchField.vue
index 0e1604acaf73..f629fd6686fe 100644
--- a/frontend/src/components/Layout/AppBar/SearchField.vue
+++ b/frontend/src/components/Layout/AppBar/SearchField.vue
@@ -2,16 +2,19 @@
   <VTextField
     v-model="searchQuery"
     class="search-input"
-    :prepend-inner-icon="IMdiMagnify"
     :placeholder="$t('search')"
     density="compact"
     hide-details
     single-line
-    @update:focused="onFocus" />
+    @update:focused="onFocus">
+    <template #prepend-inner>
+      <JIcon
+        class="i-mdi:magnify" />
+    </template>
+  </VTextField>
 </template>
 
 <script setup lang="ts">
-import IMdiMagnify from 'virtual:icons/mdi/magnify';
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
diff --git a/frontend/src/components/Layout/AudioControls.vue b/frontend/src/components/Layout/AudioControls.vue
index e682802bddf9..2fdacceee356 100644
--- a/frontend/src/components/Layout/AudioControls.vue
+++ b/frontend/src/components/Layout/AudioControls.vue
@@ -85,9 +85,7 @@
             <VBtn
               icon
               to="/playback/music">
-              <VIcon>
-                <IMdiFullscreen />
-              </VIcon>
+              <JIcon class="i-mdi:fullscreen" />
             </VBtn>
           </VCol>
           <VCol
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue
index b596635db508..9dca6a3b1dc5 100644
--- a/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue
+++ b/frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue
@@ -5,12 +5,9 @@
       :rounded="false"
       size="100%"
       class="d-flex justify-center align-center align-self-center uno-h-full uno-w-full">
-      <VIcon
-        class="text--disabled placeholder"
-        size="50%"
-        :icon="getItemIcon(item)">
-        <component :is="getItemIcon(item)" />
-      </VIcon>
+      <JIcon
+        class="text--disabled uno-h-[50%] uno-w-[50%]"
+        :class="getItemIcon(item)" />
     </VAvatar>
   </JOverlay>
 </template>
@@ -23,10 +20,3 @@ import { getItemIcon } from '#/utils/items';
 
 const { item } = defineProps<{ item: BaseItemDto | BaseItemPerson }>();
 </script>
-
-<style scoped>
-:deep(.placeholder svg) {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/frontend/src/components/Layout/Images/UserImage.vue b/frontend/src/components/Layout/Images/UserImage.vue
index e917c28c72c9..6f855d1e28ed 100644
--- a/frontend/src/components/Layout/Images/UserImage.vue
+++ b/frontend/src/components/Layout/Images/UserImage.vue
@@ -11,9 +11,8 @@
         <VAvatar
           color="primary"
           :size="size">
-          <VIcon :size="iconSize">
-            <IMdiAccount />
-          </VIcon>
+          <JIcon
+            class="i-mdi:account" />
         </VAvatar>
       </template>
     </JImg>
diff --git a/frontend/src/components/Layout/Navigation/CommitLink.vue b/frontend/src/components/Layout/Navigation/CommitLink.vue
index 3e5d087646ad..161de09bbc0d 100644
--- a/frontend/src/components/Layout/Navigation/CommitLink.vue
+++ b/frontend/src/components/Layout/Navigation/CommitLink.vue
@@ -2,14 +2,18 @@
   <VListItem
     v-if="commit_hash"
     :title="'#' + commit_hash.slice(0, 7)"
-    :prepend-icon="IMdiGithub"
     :href="link"
     target="_blank"
-    rel="noopener noreferrer" />
+    rel="noopener noreferrer">
+    <template #prepend>
+      <JIcon
+        class="i-mdi:github uno-w-10"
+        " />
+    </template>
+  </VListItem>
 </template>
 
 <script setup lang="ts">
-import IMdiGithub from 'virtual:icons/mdi/github';
 import { commit_hash } from 'virtual:commit';
 import { sanitizeHtml } from '@jellyfin-vue/shared/html';
 
diff --git a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
index 4308fdc59562..a0617742aed4 100644
--- a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
+++ b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
@@ -15,8 +15,13 @@
         :key="item.to"
         :to="item.to"
         exact
-        :prepend-icon="item.icon"
-        :title="item.title" />
+        :title="item.title">
+        <template #prepend>
+          <JIcon
+            class="uno-min-w-10"
+            :class="item.icon" />
+        </template>
+      </VListItem>
       <VListSubheader>{{ $t('libraries') }}</VListSubheader>
       <template v-for="library in drawerItems">
         <VListItem
@@ -24,8 +29,13 @@
           :key="library.to"
           :to="library.to"
           exact
-          :prepend-icon="library.icon"
-          :title="library.title" />
+          :title="library.title">
+          <template #prepend>
+            <JIcon
+              class="uno-min-w-10"
+              :class="library.icon" />
+          </template>
+        </VListItem>
       </template>
     </VList>
     <template #append>
@@ -37,7 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import IMdiHome from 'virtual:icons/mdi/home';
 import { computed, inject, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { RouteNamedMap } from 'vue-router/auto-routes';
@@ -64,7 +73,7 @@ const transparentLayout = computed(previous => isRouting?.value ? previous : tra
 
 const items = [
   {
-    icon: IMdiHome,
+    icon: 'i-mdi:home',
     title: t('home'),
     to: '/'
   }
diff --git a/frontend/src/components/Layout/SwiperSection.vue b/frontend/src/components/Layout/SwiperSection.vue
index d4bdd228b7d4..7782a85c970a 100644
--- a/frontend/src/components/Layout/SwiperSection.vue
+++ b/frontend/src/components/Layout/SwiperSection.vue
@@ -16,17 +16,13 @@
           class="swiper-prev"
           icon
           variant="plain">
-          <VIcon>
-            <IMdiArrowLeft />
-          </VIcon>
+          <JIcon class="i-mdi:arrow-left" />
         </VBtn>
         <VBtn
           class="swiper-next"
           icon
           variant="plain">
-          <VIcon>
-            <IMdiArrowRight />
-          </VIcon>
+          <JIcon class="i-mdi:arrow-right" />
         </VBtn>
       </div>
 
diff --git a/frontend/src/components/Layout/VolumeSlider.vue b/frontend/src/components/Layout/VolumeSlider.vue
index 785abde0ae59..d47a13e12f14 100644
--- a/frontend/src/components/Layout/VolumeSlider.vue
+++ b/frontend/src/components/Layout/VolumeSlider.vue
@@ -4,7 +4,7 @@
       icon
       size="small"
       @click="playbackManager.toggleMute">
-      <VIcon :icon="icon" />
+      <JIcon :class="icon" />
     </VBtn>
     <VSlider
       v-model="playbackManager.currentVolume.value"
@@ -20,30 +20,25 @@
 </template>
 
 <script setup lang="ts">
-import IMdiVolumeHigh from 'virtual:icons/mdi/volume-high';
-import IMdiVolumeLow from 'virtual:icons/mdi/volume-low';
-import IMdiVolumeMedium from 'virtual:icons/mdi/volume-medium';
-import IMdiVolumeMute from 'virtual:icons/mdi/volume-mute';
 import { computed } from 'vue';
 import { playbackManager } from '#/store/playback-manager';
 
 const icon = computed(() => {
-  if (playbackManager.isMuted.value) {
-    return IMdiVolumeMute;
-  } else if (playbackManager.currentVolume.value >= 80) {
-    return IMdiVolumeHigh;
-  } else if (
-    playbackManager.currentVolume.value < 80
-    && playbackManager.currentVolume.value >= 25
-  ) {
-    return IMdiVolumeMedium;
-  } else if (
-    playbackManager.currentVolume.value < 25
-    && playbackManager.currentVolume.value >= 1
-  ) {
-    return IMdiVolumeLow;
-  } else {
-    return IMdiVolumeMute;
+  const volume = playbackManager.currentVolume.value;
+
+  switch (true) {
+    case volume >= 80: {
+      return 'i-mdi:volume-high';
+    }
+    case volume >= 25: {
+      return 'i-mdi:volume-medium';
+    }
+    case volume >= 1: {
+      return 'i-mdi:volume-mute';
+    }
+    default: {
+      return 'i-mdi:volume-mute';
+    }
   }
 });
 </script>
diff --git a/frontend/src/components/Playback/DraggableQueue.vue b/frontend/src/components/Playback/DraggableQueue.vue
index 9d71c31632c7..e13f3fe47e37 100644
--- a/frontend/src/components/Playback/DraggableQueue.vue
+++ b/frontend/src/components/Playback/DraggableQueue.vue
@@ -7,19 +7,20 @@
         <VListItem
           :title="item.Name ?? ''"
           :subtitle="getArtists(item)"
-          class="grab-cursor"
+          class="uno-cursor-grab"
           :class="{ 'text-primary font-weight-bold': isPlaying(index) }"
           @click="playbackManager.currentItemIndex.value = index">
           <template #prepend>
             <VListItemAction
               :key="index"
+              class="uno-min-w-10"
               start>
-              <VIcon>
-                <template v-if="!isHovering">
-                  {{ index + 1 }}
-                </template>
-                <IMdiDragHorizontal v-else />
-              </VIcon>
+              <template v-if="!isHovering">
+                {{ index + 1 }}
+              </template>
+              <JIcon
+                v-else
+                class="i-mdi:drag-horizontal" />
             </VListItemAction>
             <VAvatar>
               <BlurhashImage :item="item" />
@@ -99,9 +100,3 @@ watch(container, () => {
 
 onBeforeUnmount(destroy);
 </script>
-
-<style scoped>
-.grab-cursor {
-  cursor: grab;
-}
-</style>
diff --git a/frontend/src/components/Playback/MiniVideoPlayer.vue b/frontend/src/components/Playback/MiniVideoPlayer.vue
index 9ce98ed83495..b230e33d2d72 100644
--- a/frontend/src/components/Playback/MiniVideoPlayer.vue
+++ b/frontend/src/components/Playback/MiniVideoPlayer.vue
@@ -9,18 +9,14 @@
       <div class="uno-flex uno-flex-row">
         <VBtn
           icon
-          @click="playerElement.toggleFullscreenVideoPlayer">
-          <VIcon>
-            <IMdiArrowExpandAll />
-          </VIcon>
+          @click.passive="playerElement.toggleFullscreenVideoPlayer">
+          <JIcon class="i:mdi-arrow-expand-all" />
         </VBtn>
         <VSpacer />
         <VBtn
           icon
-          @click="playbackManager.stop">
-          <VIcon>
-            <IMdiClose />
-          </VIcon>
+          @click.passive="playbackManager.stop">
+          <JIcon class="i-mdi:close" />
         </VBtn>
       </div>
       <div
@@ -28,28 +24,26 @@
         <VBtn
           icon
           size="large"
-          @click="playbackManager.setPreviousItem">
-          <VIcon size="32">
-            <IMdiSkipPrevious />
-          </VIcon>
+          @click.passive="playbackManager.setPreviousItem">
+          <JIcon class="i-mdi:skip-previous uno-text-lg" />
         </VBtn>
         <VBtn
           icon
           size="x-large"
-          @click="playbackManager.playPause">
-          <VIcon size="48">
-            <IMdiPlay v-if="playbackManager.isPaused.value" />
-            <IMdiPause v-else />
-          </VIcon>
+          @click.passive="playbackManager.playPause">
+          <JIcon
+            class="uno-text-2xl"
+            :class="{
+              'i-mdi:play': playbackManager.isPaused.value,
+              'i-mdi:pause': !playbackManager.isPaused.value,
+            }" />
         </VBtn>
         <VBtn
           icon
           size="large"
           :disabled="!playbackManager.nextItem.value"
-          @click="playbackManager.setNextItem">
-          <VIcon size="32">
-            <IMdiSkipNext />
-          </VIcon>
+          @click.passive="playbackManager.setNextItem">
+          <JIcon class="i-mdi:skip-next uno-text-lg" />
         </VBtn>
       </div>
     </JOverlay>
diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
index e0ab23f1043d..dcc9d00f9d99 100644
--- a/frontend/src/components/Playback/TrackList.vue
+++ b/frontend/src/components/Playback/TrackList.vue
@@ -21,11 +21,8 @@
           style="width: 6.5em"
           class="text-center"
           scope="col">
-          <VIcon
-            class="text--primary"
-            size="16">
-            <IMdiClockOutline />
-          </VIcon>
+          <JIcon
+            class="i-mdi:clock-outline" />
         </th>
       </tr>
     </thead>
@@ -38,9 +35,8 @@
           <td
             colspan="4"
             class="text--secondary">
-            <VIcon class="text--secondary">
-              <IMdiDisc />
-            </VIcon>
+            <JIcon
+              class="text--secondary i-mdi:disc" />
             {{ $t('discNumber', { discNumber }) }}
           </td>
         </tr>
@@ -59,9 +55,7 @@
                     size="small"
                     icon
                     @click="playTracks(track)">
-                    <VIcon>
-                      <IMdiPlayCircleOutline />
-                    </VIcon>
+                    <JIcon class="i-mdi:play-circle-outline" />
                   </VBtn>
                 </span>
                 <span v-else>{{ track.IndexNumber }}</span>
diff --git a/frontend/src/components/System/AboutLinks.vue b/frontend/src/components/System/AboutLinks.vue
index 09cab1dc96a2..395e0a02f8df 100644
--- a/frontend/src/components/System/AboutLinks.vue
+++ b/frontend/src/components/System/AboutLinks.vue
@@ -9,7 +9,7 @@
         target="_blank">
         <template #prepend>
           <VAvatar>
-            <VIcon :icon="linkItem.icon" />
+            <JIcon :class="linkItem.icon" />
           </VAvatar>
         </template>
         <VListItemTitle>
@@ -17,9 +17,8 @@
         </VListItemTitle>
         <template #append>
           <VListItemAction>
-            <VIcon>
-              <IMdiOpenInNew />
-            </VIcon>
+            <JIcon
+              class="i-mdi:open-in-new" />
           </VListItemAction>
         </template>
       </VListItem>
@@ -28,10 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import IMdiBook from 'virtual:icons/mdi/book';
-import IMdiBug from 'virtual:icons/mdi/bug';
-import IMdiRocketLaunch from 'virtual:icons/mdi/rocket-launch';
-import IMdiTranslate from 'virtual:icons/mdi/translate';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -40,22 +35,22 @@ const { t } = useI18n();
 const linkItems = computed(() => {
   return [
     {
-      icon: IMdiRocketLaunch,
+      icon: 'i-mdi:rocket-launch',
       name: t('poweredByJellyfin'),
       link: 'https://jellyfin.org'
     },
     {
-      icon: IMdiBook,
+      icon: 'i-mdi:book',
       name: t('readTheDocumentation'),
       link: 'https://docs.jellyfin.org'
     },
     {
-      icon: IMdiTranslate,
+      icon: 'i-mdi:translate',
       name: t('helpTranslate'),
       link: 'https://translate.jellyfin.org'
     },
     {
-      icon: IMdiBug,
+      icon: 'i-mdi:bug',
       name: t('reportAnIssue'),
       link: 'https://github.com/jellyfin/jellyfin-vue/issues/new'
     }
diff --git a/frontend/src/components/System/LocaleSwitcher.vue b/frontend/src/components/System/LocaleSwitcher.vue
index 930c129b94bf..3cd3e0a65f05 100644
--- a/frontend/src/components/System/LocaleSwitcher.vue
+++ b/frontend/src/components/System/LocaleSwitcher.vue
@@ -4,9 +4,7 @@
     :variant="elevated ? 'elevated' : undefined"
     :size="large ? 'large' : 'small'"
     :color="elevated ? undefined : 'primary'">
-    <VIcon>
-      <IMdiWeb />
-    </VIcon>
+    <JIcon class="i-mdi:language" />
     <VTooltip
       :text="$t('language')"
       :location="bottom ? 'bottom' : 'top'" />
diff --git a/frontend/src/components/Wizard/WizardAdminAccount.vue b/frontend/src/components/Wizard/WizardAdminAccount.vue
index e7397880b5c8..ed3617e76060 100644
--- a/frontend/src/components/Wizard/WizardAdminAccount.vue
+++ b/frontend/src/components/Wizard/WizardAdminAccount.vue
@@ -11,20 +11,30 @@
       v-model="admin.Password"
       variant="outlined"
       :label="t('password')"
-      :append-icon="showPassword ? IconEyeOff : IconEye"
       :type="showPassword ? 'text' : 'password'"
       :disabled="loading"
-      @click:append="() => (showPassword = !showPassword)" />
+      @click:append="() => (showPassword = !showPassword)">
+      <template #append>
+        <JIcon
+          :class="showPassword ? 'i-mdi:eye-off' : 'i-mdi:eye'"
+          class="uno-w-10" />
+      </template>
+    </VTextField>
 
     <VTextField
       v-model="passwordCheck"
       variant="outlined"
       :label="t('confirmPassword')"
-      :append-icon="showPassword ? IconEyeOff : IconEye"
       :type="showPassword ? 'text' : 'password'"
       :rules="SamePasswordRules"
       :disabled="loading"
-      @click:append="() => (showPassword = !showPassword)" />
+      @click:append="() => (showPassword = !showPassword)">
+      <template #append>
+        <JIcon
+          :class="showPassword ? 'i-mdi:eye-off' : 'i-mdi:eye'"
+          class="uno-w-10" />
+      </template>
+    </VTextField>
 
     <VBtn
       color="secondary"
@@ -47,8 +57,6 @@
 <script setup lang="ts">
 import type { StartupUserDto } from '@jellyfin/sdk/lib/generated-client';
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
-import IconEye from 'virtual:icons/mdi/eye';
-import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { remote } from '#/plugins/remote';
diff --git a/frontend/src/pages/playback/music.vue b/frontend/src/pages/playback/music.vue
index 07a1354b0476..375c326140eb 100644
--- a/frontend/src/pages/playback/music.vue
+++ b/frontend/src/pages/playback/music.vue
@@ -3,18 +3,13 @@
     <VAppBar color="transparent">
       <AppBarButtonLayout @click="$router.back()">
         <template #icon>
-          <VIcon>
-            <IMdiArrowLeft />
-          </VIcon>
+          <JIcon class="i-mdi:arrow-left" />
         </template>
       </AppBarButtonLayout>
       <VSpacer />
       <AppBarButtonLayout @click="isVisualizing = !isVisualizing">
         <template #icon>
-          <VIcon>
-            <IDashiconsAlbum v-if="isVisualizing" />
-            <IMdiChartBar v-else />
-          </VIcon>
+          <JIcon :class="isVisualizing ? 'i-dashicons:album' : 'mdi:chart-bar'" />
         </template>
       </AppBarButtonLayout>
     </VAppBar>
diff --git a/frontend/src/pages/playback/video.vue b/frontend/src/pages/playback/video.vue
index be1a5d452c9d..cc15681340ae 100644
--- a/frontend/src/pages/playback/video.vue
+++ b/frontend/src/pages/playback/video.vue
@@ -15,10 +15,10 @@
         <div class="d-flex align-center py-2 px-4">
           <div class="d-flex">
             <VBtn
-              :icon="IMdiClose"
+              icon="i-mdi:close"
               @click="playbackManager.stop" />
             <VBtn
-              :icon="IMdiChevronDown"
+              icon="i-mdi:chevron-down"
               @click="playerElement.toggleFullscreenVideoPlayer" />
           </div>
           <div class="d-flex ml-auto">
@@ -86,19 +86,18 @@
                 class="align-self-center"
                 icon
                 @click="mediaControls.togglePictureInPicture">
-                <VIcon>
-                  <IMdiPictureInPictureBottomRight />
-                </VIcon>
+                <JIcon class="i-mdi:picture-in-picture-bottom-right" />
               </VBtn>
               <VBtn
                 v-if="fullscreen.isSupported"
                 class="align-self-center"
                 icon
                 @click="fullscreen.toggle">
-                <VIcon>
-                  <IMdiFullscreen v-if="fullscreen.isFullscreen" />
-                  <IMdiFullscreenExit v-else />
-                </VIcon>
+                <JIcon
+                  :class="{
+                    'i-mdi:fullscreen': !fullscreen.isFullscreen,
+                    'i-mdi:fullscreen-exit': fullscreen.isFullscreen
+                  }" />
                 <VTooltip
                   :text="$t('fullScreen')"
                   location="top" />
@@ -123,8 +122,6 @@ meta:
 <script setup lang="ts">
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
 import { useTimeoutFn } from '@vueuse/core';
-import IMdiChevronDown from 'virtual:icons/mdi/chevron-down';
-import IMdiClose from 'virtual:icons/mdi/close';
 import { computed, shallowRef, watch } from 'vue';
 import { playbackGuard } from '#/plugins/router/middlewares/playback';
 import {
diff --git a/frontend/src/pages/settings/index.vue b/frontend/src/pages/settings/index.vue
index 003b5c939ece..80f9554b7362 100644
--- a/frontend/src/pages/settings/index.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -55,9 +55,7 @@
               :disabled="!userItem.link">
               <template #prepend>
                 <VAvatar>
-                  <VIcon>
-                    <component :is="userItem.icon" />
-                  </VIcon>
+                  <JIcon :class="userItem.icon" />
                 </VAvatar>
               </template>
               <VListItemTitle>
@@ -68,9 +66,7 @@
               </VListItemSubtitle>
               <template #append>
                 <VListItemAction>
-                  <VIcon>
-                    <IMdiChevronRight />
-                  </VIcon>
+                  <JIcon class="i-mdi:chevron-right" />
                 </VListItemAction>
               </template>
             </VListItem>
@@ -90,9 +86,7 @@
                 :disabled="!adminItem.link">
                 <template #prepend>
                   <VAvatar>
-                    <VIcon>
-                      <component :is="adminItem.icon" />
-                    </VIcon>
+                    <JIcon :class="adminItem.icon" />
                   </VAvatar>
                 </template>
                 <VListItemTitle>
@@ -103,9 +97,7 @@
                 </VListItemSubtitle>
                 <template #append>
                   <VListItemAction>
-                    <VIcon>
-                      <IMdiChevronRight />
-                    </VIcon>
+                    <JIcon class="i-mdi:chevron-right" />
                   </VListItemAction>
                 </template>
               </VListItem>
@@ -120,25 +112,7 @@
 
 <script setup lang="ts">
 import { commit_hash } from 'virtual:commit';
-import IMdiAccount from 'virtual:icons/mdi/account';
-import IMdiAccountMultiple from 'virtual:icons/mdi/account-multiple';
-import IMdiBell from 'virtual:icons/mdi/bell';
-import IMdiCalendarClock from 'virtual:icons/mdi/calendar-clock';
-import IMdiDevices from 'virtual:icons/mdi/devices';
-import IMdiDiscPlayer from 'virtual:icons/mdi/disc-player';
-import IMdiDLNA from 'virtual:icons/mdi/dlna';
-import IMdiHome from 'virtual:icons/mdi/home';
-import IMdiKeyChain from 'virtual:icons/mdi/key-chain';
-import IMdiLibraryShelves from 'virtual:icons/mdi/library-shelves';
-import IMdiNetwork from 'virtual:icons/mdi/network';
-import IMdiPlayNetwork from 'virtual:icons/mdi/play-network';
-import IMdiPlayPause from 'virtual:icons/mdi/play-pause';
-import IMdiPuzzle from 'virtual:icons/mdi/puzzle';
-import IMdiServer from 'virtual:icons/mdi/server';
-import IMdiSubtitles from 'virtual:icons/mdi/subtitles';
-import IMdiTelevisionClassic from 'virtual:icons/mdi/television-classic';
-import IMdiTextBox from 'virtual:icons/mdi/text-box';
-import { computed, type Component } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { RouteLocationRaw } from 'vue-router';
 import { remote } from '#/plugins/remote';
@@ -148,7 +122,7 @@ import { usePageTitle } from '#/composables/page-title';
 const { t } = useI18n();
 
 interface MenuOptions {
-  icon: Component;
+  icon: string;
   name: string;
   description: string;
   link?: RouteLocationRaw;
@@ -159,31 +133,31 @@ usePageTitle(() => t('settings'));
 const userItems = computed<MenuOptions[]>(() => {
   return [
     {
-      icon: IMdiAccount,
+      icon: 'i-mdi:account',
       name: t('account'),
       description: t('accountSettingsDescription'),
       link: undefined
     },
     {
-      icon: IMdiHome,
+      icon: 'i-mdi:home',
       name: t('homeScreen'),
       description: t('homeScreenSettingsDescription'),
       link: undefined
     },
     {
-      icon: IMdiPlayPause,
+      icon: 'i-mdi:play-pause',
       name: t('playback'),
       description: t('playbackSettingsDescription'),
       link: undefined
     },
     {
-      icon: IMdiDiscPlayer,
+      icon: 'i-mdi:disc-player',
       name: t('mediaPlayers'),
       description: t('mediaPlayersSettingsDescription'),
       link: undefined
     },
     {
-      icon: IMdiSubtitles,
+      icon: 'i-mdi:subtitles',
       name: t('subtitles'),
       description: t('subtitlesSettingsDescription'),
       link: '/settings/subtitles'
@@ -195,19 +169,19 @@ const adminSections = computed<MenuOptions[][]>(() => {
   return [
     [
       {
-        icon: IMdiServer,
+        icon: 'i-mdi:server',
         name: t('server'),
         description: t('serverSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiDevices,
+        icon: 'i-mdi:devices',
         name: t('devices'),
         description: t('devicesSettingsDescription'),
         link: '/settings/devices'
       },
       {
-        icon: IMdiLibraryShelves,
+        icon: 'i-mdi:library-shelves',
         name: t('libraries'),
         description: t('librariesSettingsDescription'),
         link: undefined
@@ -215,13 +189,13 @@ const adminSections = computed<MenuOptions[][]>(() => {
     ],
     [
       {
-        icon: IMdiAccountMultiple,
+        icon: 'i-mdi:account-multiple',
         name: t('users'),
         description: t('userSettingsDescription'),
         link: '/settings/users'
       },
       {
-        icon: IMdiKeyChain,
+        icon: 'i-mdi:key-chain',
         name: t('apiKeys'),
         description: t('apiKeysSettingsDescription'),
         link: '/settings/apikeys'
@@ -229,25 +203,25 @@ const adminSections = computed<MenuOptions[][]>(() => {
     ],
     [
       {
-        icon: IMdiPlayNetwork,
+        icon: 'i-mdi:play-network',
         name: t('transcodingAndStreaming'),
         description: t('transcodingSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiDLNA,
+        icon: 'i-mdi:dlna',
         name: t('dlna'),
         description: t('dlnaSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiTelevisionClassic,
+        icon: 'i-mdi:television-classic',
         name: t('liveTv'),
         description: t('liveTvSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiNetwork,
+        icon: 'i-mdi:network',
         name: t('networking'),
         description: t('networkingSettingsDescription'),
         link: undefined
@@ -255,25 +229,25 @@ const adminSections = computed<MenuOptions[][]>(() => {
     ],
     [
       {
-        icon: IMdiPuzzle,
+        icon: 'i-mdi:puzzle',
         name: t('plugins'),
         description: t('pluginsSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiCalendarClock,
+        icon: 'i-mdi:calendar-clock',
         name: t('scheduledTasks'),
         description: t('scheduledTasksSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiBell,
+        icon: 'i-mdi:bell',
         name: t('notifications'),
         description: t('notificationsSettingsDescription'),
         link: undefined
       },
       {
-        icon: IMdiTextBox,
+        icon: 'i-mdi:text-box',
         name: t('logsAndActivity'),
         description: t('logsAndActivitySettingsDescription'),
         link: '/settings/logs-and-activity'
diff --git a/frontend/src/pages/settings/logs-and-activity.vue b/frontend/src/pages/settings/logs-and-activity.vue
index a96373a1ea03..129369f9175d 100644
--- a/frontend/src/pages/settings/logs-and-activity.vue
+++ b/frontend/src/pages/settings/logs-and-activity.vue
@@ -28,15 +28,11 @@
               rel="noopener">
               <template #prepend>
                 <VAvatar>
-                  <VIcon>
-                    <IMdiFile />
-                  </VIcon>
+                  <JIcon class="i-mdi:file" />
                 </VAvatar>
               </template>
               <template #append>
-                <VIcon>
-                  <IMdiOpenInNew />
-                </VIcon>
+                <JIcon class="*i-mdi:open-in-new" />
               </template>
             </VListItem>
           </VList>
@@ -68,7 +64,7 @@
               :subtitle="activity.ShortOverview ?? undefined">
               <template #prepend>
                 <VAvatar :color="getColorFromSeverity(activity.Severity)">
-                  <VIcon :icon="getIconFromActivityType(activity.Type)" />
+                  <JIcon :class="getIconFromActivityType(activity.Type)" />
                 </VAvatar>
               </template>
               <template #append>
@@ -101,12 +97,6 @@ import {
 import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { format, formatRelative, parseJSON } from 'date-fns';
-import IMdiHelp from 'virtual:icons/mdi/help';
-import IMdiLock from 'virtual:icons/mdi/lock';
-import IMdiLogin from 'virtual:icons/mdi/login';
-import IMdiLogout from 'virtual:icons/mdi/logout';
-import IMdiPlay from 'virtual:icons/mdi/play';
-import IMdiStop from 'virtual:icons/mdi/stop';
 import { useI18n } from 'vue-i18n';
 import { useTheme } from 'vuetify';
 import { remote } from '#/plugins/remote';
@@ -150,25 +140,25 @@ function getColorFromSeverity(severity: LogLevel | undefined): string {
  */
 function getIconFromActivityType(
   type: string | undefined | null
-): typeof IMdiLogin {
+) {
   switch (type) {
     case 'SessionStarted': {
-      return IMdiLogin;
+      return 'i-mdi:login';
     }
     case 'SessionEnded': {
-      return IMdiLogout;
+      return 'i-mdi:logout';
     }
     case 'UserPasswordChanged': {
-      return IMdiLock;
+      return 'i-mdi:lock';
     }
     case 'VideoPlayback': {
-      return IMdiPlay;
+      return 'i-mdi:play';
     }
     case 'VideoPlaybackStopped': {
-      return IMdiStop;
+      return 'i-mdi-stop';
     }
     default: {
-      return IMdiHelp;
+      return 'i-mdi:help';
     }
   }
 }
diff --git a/frontend/src/utils/items.ts b/frontend/src/utils/items.ts
index 94a51c93b033..643f22f4f295 100644
--- a/frontend/src/utils/items.ts
+++ b/frontend/src/utils/items.ts
@@ -13,23 +13,6 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { getUserViewsApi } from '@jellyfin/sdk/lib/utils/api/user-views-api';
-import IMdiAccount from 'virtual:icons/mdi/account';
-import IMdiAlbum from 'virtual:icons/mdi/album';
-import IMdiBookMusic from 'virtual:icons/mdi/book-music';
-import IMdiBookOpenPageVariant from 'virtual:icons/mdi/book-open-page-variant';
-import IMdiFilmstrip from 'virtual:icons/mdi/filmstrip';
-import IMdiFolder from 'virtual:icons/mdi/folder';
-import IMdiFolderMultiple from 'virtual:icons/mdi/folder-multiple';
-import IMdiImage from 'virtual:icons/mdi/image';
-import IMdiImageMultiple from 'virtual:icons/mdi/image-multiple';
-import IMdiMovie from 'virtual:icons/mdi/movie';
-import IMdiMusic from 'virtual:icons/mdi/music';
-import IMdiMusicBox from 'virtual:icons/mdi/music-box';
-import IMdiMusicNote from 'virtual:icons/mdi/music-note';
-import IMdiPlaylistPlay from 'virtual:icons/mdi/playlist-play';
-import IMdiTelevisionClassic from 'virtual:icons/mdi/television-classic';
-import IMdiYoutube from 'virtual:icons/mdi/youtube';
-import IMdiYoutubeTV from 'virtual:icons/mdi/youtube-tv';
 import type { ComputedRef } from 'vue';
 import type { RouteNamedMap } from 'vue-router/auto-routes';
 import { isNil } from '@jellyfin-vue/shared/validation';
@@ -102,40 +85,40 @@ export function isLibrary(item: BaseItemDto): boolean {
  */
 export function getLibraryIcon(
   libraryType: string | undefined | null
-): typeof IMdiMovie {
+) {
   switch (libraryType?.toLowerCase()) {
     case 'movies': {
-      return IMdiMovie;
+      return 'i-mdi:movie';
     }
     case 'music': {
-      return IMdiMusic;
+      return 'i-mdi-music';
     }
     case 'photos': {
-      return IMdiImage;
+      return 'i-mdi:image';
     }
     case 'livetv': {
-      return IMdiYoutubeTV;
+      return 'i-mdi:youtube-tv';
     }
     case 'tvshows': {
-      return IMdiTelevisionClassic;
+      return 'i-mdi:television-classic';
     }
     case 'homevideos': {
-      return IMdiImageMultiple;
+      return 'i-mdi:image-multiple';
     }
     case 'musicvideos': {
-      return IMdiMusicBox;
+      return 'i-mdi:music-box';
     }
     case 'books': {
-      return IMdiBookOpenPageVariant;
+      return 'i-mdi:book-open-page-variant';
     }
     case 'channels': {
-      return IMdiYoutube;
+      return 'i-mdi:youtube';
     }
     case 'playlists': {
-      return IMdiPlaylistPlay;
+      return 'i-mdi:playlist-play';
     }
     default: {
-      return IMdiFolder;
+      return 'i-mdi:folder';
     }
   }
 }
@@ -372,58 +355,58 @@ export function getItemDetailsLink(
  */
 export function getItemIcon(
   item: BaseItemDto | BaseItemPerson
-): typeof IMdiAccount | undefined {
+) {
   let itemIcon;
 
   if (isPerson(item)) {
-    itemIcon = IMdiAccount;
+    itemIcon = 'i-mdi:account';
   } else {
     switch (item.Type) {
       case 'Audio': {
-        itemIcon = IMdiMusicNote;
+        itemIcon = 'i-mdi:music-note';
         break;
       }
       case 'AudioBook': {
-        itemIcon = IMdiBookMusic;
+        itemIcon = 'i-mdi:book-music';
         break;
       }
       case 'Book': {
-        itemIcon = IMdiBookOpenPageVariant;
+        itemIcon = 'i-mdi:book-open-page-variant';
         break;
       }
       case 'BoxSet': {
-        itemIcon = IMdiFolderMultiple;
+        itemIcon = 'i-mdi:folder-multiple';
         break;
       }
       case 'Folder':
       case 'CollectionFolder': {
-        itemIcon = IMdiFolder;
+        itemIcon = 'i-mdi:folder';
         break;
       }
       case 'Movie': {
-        itemIcon = IMdiFilmstrip;
+        itemIcon = 'i-mdi:filmstrip';
         break;
       }
       case 'MusicAlbum': {
-        itemIcon = IMdiAlbum;
+        itemIcon = 'i-mdi:album';
         break;
       }
       case 'MusicArtist':
       case 'Person': {
-        itemIcon = IMdiAccount;
+        itemIcon = 'i-mdi:account';
         break;
       }
       case 'PhotoAlbum': {
-        itemIcon = IMdiImageMultiple;
+        itemIcon = 'i-mdi:image-multiple';
         break;
       }
       case 'Playlist': {
-        itemIcon = IMdiPlaylistPlay;
+        itemIcon = 'i-mdi:playlist-play';
         break;
       }
       case 'Series':
       case 'Episode': {
-        itemIcon = IMdiTelevisionClassic;
+        itemIcon = 'i-mdi:television-classic';
         break;
       }
     }
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
index d046d0b7f847..d2b5c2a940ec 100644
--- a/frontend/types/global/components.d.ts
+++ b/frontend/types/global/components.d.ts
@@ -30,66 +30,10 @@ declare module 'vue' {
     FontSelector: typeof import('./../../src/components/Selectors/FontSelector.vue')['default']
     GenericDialog: typeof import('./../../src/components/Dialogs/GenericDialog.vue')['default']
     GenericItemCard: typeof import('./../../src/components/Item/Card/GenericItemCard.vue')['default']
-    IDashiconsAlbum: typeof import('~icons/dashicons/album')['default']
     IdentifyDialog: typeof import('./../../src/components/Item/Identify/IdentifyDialog.vue')['default']
     IdentifyResults: typeof import('./../../src/components/Item/Identify/IdentifyResults.vue')['default']
     ImageEditor: typeof import('./../../src/components/Item/Metadata/ImageEditor.vue')['default']
     ImageSearch: typeof import('./../../src/components/Item/Metadata/ImageSearch.vue')['default']
-    IMdiAccount: typeof import('~icons/mdi/account')['default']
-    IMdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
-    IMdiAppleAirplay: typeof import('~icons/mdi/apple-airplay')['default']
-    IMdiArrowExpandAll: typeof import('~icons/mdi/arrow-expand-all')['default']
-    IMdiArrowLeft: typeof import('~icons/mdi/arrow-left')['default']
-    IMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
-    IMdiBrightnessAuto: typeof import('~icons/mdi/brightness-auto')['default']
-    IMdiCalendarRange: typeof import('~icons/mdi/calendar-range')['default']
-    IMdiCast: typeof import('~icons/mdi/cast')['default']
-    IMdiChartBar: typeof import('~icons/mdi/chart-bar')['default']
-    IMdiCheck: typeof import('~icons/mdi/check')['default']
-    IMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
-    IMdiChevronUp: typeof import('~icons/mdi/chevron-up')['default']
-    IMdiClockOutline: typeof import('~icons/mdi/clock-outline')['default']
-    IMdiClose: typeof import('~icons/mdi/close')['default']
-    IMdiClosedCaption: typeof import('~icons/mdi/closed-caption')['default']
-    IMdiClosedCaptionOutline: typeof import('~icons/mdi/closed-caption-outline')['default']
-    IMdiCloudDownload: typeof import('~icons/mdi/cloud-download')['default']
-    IMdiCog: typeof import('~icons/mdi/cog')['default']
-    IMdiContentSave: typeof import('~icons/mdi/content-save')['default']
-    IMdiDelete: typeof import('~icons/mdi/delete')['default']
-    IMdiDisc: typeof import('~icons/mdi/disc')['default']
-    IMdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
-    IMdiDragHorizontal: typeof import('~icons/mdi/drag-horizontal')['default']
-    IMdiEye: typeof import('~icons/mdi/eye')['default']
-    IMdiFile: typeof import('~icons/mdi/file')['default']
-    IMdiFilterVariant: typeof import('~icons/mdi/filter-variant')['default']
-    IMdiFullscreen: typeof import('~icons/mdi/fullscreen')['default']
-    IMdiFullscreenExit: typeof import('~icons/mdi/fullscreen-exit')['default']
-    IMdiImage: typeof import('~icons/mdi/image')['default']
-    IMdiInformationOutline: typeof import('~icons/mdi/information-outline')['default']
-    IMdiKeyChain: typeof import('~icons/mdi/key-chain')['default']
-    IMdiMagnify: typeof import('~icons/mdi/magnify')['default']
-    IMdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
-    IMdiNetworkOffOutline: typeof import('~icons/mdi/network-off-outline')['default']
-    IMdiNumeric9PlusBoxOutline: typeof import('~icons/mdi/numeric9-plus-box-outline')['default']
-    IMdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
-    IMdiPause: typeof import('~icons/mdi/pause')['default']
-    IMdiPictureInPictureBottomRight: typeof import('~icons/mdi/picture-in-picture-bottom-right')['default']
-    IMdiPlay: typeof import('~icons/mdi/play')['default']
-    IMdiPlayCircleOutline: typeof import('~icons/mdi/play-circle-outline')['default']
-    IMdiPlaylistPlay: typeof import('~icons/mdi/playlist-play')['default']
-    IMdiPlaylistRemove: typeof import('~icons/mdi/playlist-remove')['default']
-    IMdiPlusCircle: typeof import('~icons/mdi/plus-circle')['default']
-    IMdiShuffle: typeof import('~icons/mdi/shuffle')['default']
-    IMdiSkipNext: typeof import('~icons/mdi/skip-next')['default']
-    IMdiSkipPrevious: typeof import('~icons/mdi/skip-previous')['default']
-    IMdiSortAlphabeticalVariant: typeof import('~icons/mdi/sort-alphabetical-variant')['default']
-    IMdiSortAscending: typeof import('~icons/mdi/sort-ascending')['default']
-    IMdiSortDescending: typeof import('~icons/mdi/sort-descending')['default']
-    IMdiStar: typeof import('~icons/mdi/star')['default']
-    IMdiWeatherNight: typeof import('~icons/mdi/weather-night')['default']
-    IMdiWeatherSunny: typeof import('~icons/mdi/weather-sunny')['default']
-    IMdiWeb: typeof import('~icons/mdi/web')['default']
-    ISimpleIconsJellyfin: typeof import('~icons/simple-icons/jellyfin')['default']
     ItemCard: typeof import('./../../src/components/Item/Card/ItemCard.vue')['default']
     ItemCols: typeof import('./../../src/components/Layout/ItemCols.vue')['default']
     ItemGrid: typeof import('./../../src/components/Item/ItemGrid.vue')['default']
@@ -98,6 +42,7 @@ declare module 'vue' {
     ItemsCarouselTitle: typeof import('./../../src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue')['default']
     JApp: typeof import('./../../src/components/lib/JApp.vue')['default']
     JHover: typeof import('@jellyfin-vue/ui-toolkit/components')['JHover']
+    JIcon: typeof import('@jellyfin-vue/ui-toolkit/components')['JIcon']
     JImg: typeof import('@jellyfin-vue/ui-toolkit/components')['JImg']
     JOverlay: typeof import('@jellyfin-vue/ui-toolkit/components')['JOverlay']
     JProgressCircular: typeof import('@jellyfin-vue/ui-toolkit/components')['JProgressCircular']
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 39a79bb53b7b..1c670de59a34 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,8 +5,6 @@ import VueDevTools from 'vite-plugin-vue-devtools';
 import Vue from '@vitejs/plugin-vue';
 import browserslist from 'browserslist';
 import { browserslistToTargets } from 'lightningcss';
-import IconsResolver from 'unplugin-icons/resolver';
-import Icons from 'unplugin-icons/vite';
 import { Vuetify3Resolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import UnoCSS from 'unocss/vite';
@@ -49,27 +47,17 @@ export default defineConfig({
         }
       }
     }),
-    // This plugin allows to autoimport Vue components
+    /**
+     * This plugin is used to autoimport Vue components.
+     */
     Components({
       dirs: [resolve(import.meta.dirname, 'src/components')],
       dts: resolve(import.meta.dirname, 'types/global/components.d.ts'),
-      /**
-       * The icons resolver finds icons components from 'unplugin-icons' using this convenction:
-       * {prefix}-{collection}-{icon} e.g. <i-mdi-thumb-up />
-       */
       resolvers: [
-        IconsResolver(),
         Vuetify3Resolver(),
         JellyfinVueUIToolkit()
       ]
     }),
-    /**
-     * This plugin allows to use all icons from Iconify as vue components
-     * See: https://github.com/antfu/unplugin-icons
-     */
-    Icons({
-      compiler: 'vue3'
-    }),
     VueI18nPlugin({
       runtimeOnly: true,
       compositionOnly: true,
diff --git a/package-lock.json b/package-lock.json
index fabe4dc79c4f..4186bb0a7ec5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,7 +66,6 @@
         "browserslist": "4.24.4",
         "lightningcss": "1.28.2",
         "unocss": "0.65.4",
-        "unplugin-icons": "22.0.0",
         "unplugin-vue-components": "28.0.0",
         "unplugin-vue-router": "0.10.9",
         "vite": "6.0.7",
@@ -11986,81 +11985,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/unplugin-icons": {
-      "version": "22.0.0",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-22.0.0.tgz",
-      "integrity": "sha512-+1jIt2wynxL+GISehNok8MIb9RaCufIZCHJs0HKbxOljJL9m4NtOhva+dZhNtSKtfQ62Hwd/RRbniSVuuD4Xow==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@antfu/install-pkg": "^0.5.0",
-        "@antfu/utils": "^0.7.10",
-        "@iconify/utils": "^2.2.1",
-        "debug": "^4.4.0",
-        "kolorist": "^1.8.0",
-        "local-pkg": "^0.5.1",
-        "unplugin": "^2.1.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@svgr/core": ">=7.0.0",
-        "@svgx/core": "^1.0.1",
-        "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
-        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0",
-        "vue-template-compiler": "^2.6.12",
-        "vue-template-es2015-compiler": "^1.9.0"
-      },
-      "peerDependenciesMeta": {
-        "@svgr/core": {
-          "optional": true
-        },
-        "@svgx/core": {
-          "optional": true
-        },
-        "@vue/compiler-sfc": {
-          "optional": true
-        },
-        "svelte": {
-          "optional": true
-        },
-        "vue-template-compiler": {
-          "optional": true
-        },
-        "vue-template-es2015-compiler": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/unplugin-icons/node_modules/@antfu/install-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.5.0.tgz",
-      "integrity": "sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "package-manager-detector": "^0.2.5",
-        "tinyexec": "^0.3.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/unplugin-icons/node_modules/unplugin": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.1.2.tgz",
-      "integrity": "sha512-Q3LU0e4zxKfRko1wMV2HmP8lB9KWislY7hxXpxd+lGx0PRInE4vhMBVEZwpdVYHvtqzhSrzuIfErsob6bQfCzw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.14.0",
-        "webpack-virtual-modules": "^0.6.2"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      }
-    },
     "node_modules/unplugin-vue-components": {
       "version": "28.0.0",
       "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-28.0.0.tgz",
diff --git a/packages/configs/src/uno.ts b/packages/configs/src/uno.ts
index 888e1fe61aa6..1a8e690b7e76 100644
--- a/packages/configs/src/uno.ts
+++ b/packages/configs/src/uno.ts
@@ -1,13 +1,22 @@
 import { defineConfig, presetUno, transformerVariantGroup, presetIcons } from 'unocss';
 
 export const defaultConfig = defineConfig({
+  content: {
+    pipeline: {
+      include: [
+        /\.(vue|ts|html)($|\?)/
+      ]
+    }
+  },
   presets: [
     presetUno({
       prefix: 'uno-',
       variablePrefix: 'j-util-',
       preflight: 'on-demand'
     }),
-    presetIcons()
+    presetIcons({
+      scale: 1.5
+    })
   ],
   transformers: [
     transformerVariantGroup()
diff --git a/packages/ui-toolkit/src/components/JIcon.vue b/packages/ui-toolkit/src/components/JIcon.vue
index 0dcc7dacfd2c..ebd87d4cf4aa 100644
--- a/packages/ui-toolkit/src/components/JIcon.vue
+++ b/packages/ui-toolkit/src/components/JIcon.vue
@@ -1,5 +1,7 @@
 <template>
-  <span v-bind="getBaseProps($attrs)" />
+  <span v-bind="getBaseProps($attrs)">
+    <slot />
+  </span>
 </template>
 
 <script setup lang="ts">