diff --git a/frontend/package.json b/frontend/package.json
index b173c459..3a6d7f52 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,7 +48,7 @@
     "vue": "3.2.39",
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.5",
-    "vuetify": "3.0.6"
+    "vuetify": "3.1.1"
   },
   "devDependencies": {
     "@iconify/json": "2.1.104",
diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
index 3df5e303..a8a76506 100644
--- a/frontend/src/components/Buttons/FilterButton.vue
+++ b/frontend/src/components/Buttons/FilterButton.vue
@@ -10,9 +10,9 @@
         v-bind="attrs"
         v-on="on">
         {{ $t('filter') }}
-        <Icon end>
+        <v-icon end>
           <i-mdi-menu-down />
-        </Icon>
+        </v-icon>
       </v-btn>
       <v-btn
         v-else
@@ -21,9 +21,9 @@
         icon
         v-bind="attrs"
         v-on="on">
-        <Icon>
+        <v-icon>
           <i-mdi-filter-variant />
-        </Icon>
+        </v-icon>
       </v-btn>
     </template>
     <v-expansion-panels accordion flat focusable class="dropdown">
diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
index 3cb3e1c5..c94b07d2 100644
--- a/frontend/src/components/Buttons/LikeButton.vue
+++ b/frontend/src/components/Buttons/LikeButton.vue
@@ -1,11 +1,11 @@
 <template>
   <v-btn icon @click.stop.prevent="toggleFavorite">
-    <Icon v-if="isFavorite">
+    <v-icon v-if="isFavorite">
       <i-mdi-heart />
-    </Icon>
-    <Icon v-else>
+    </v-icon>
+    <v-icon v-else>
       <i-mdi-heart-outline />
-    </Icon>
+    </v-icon>
   </v-btn>
 </template>
 
diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
index 7b113a80..624fe60c 100644
--- a/frontend/src/components/Buttons/MarkPlayedButton.vue
+++ b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -1,8 +1,8 @@
 <template>
   <v-btn v-if="canMarkWatched(item)" icon @click.stop.prevent="togglePlayed">
-    <Icon :color="isPlayed ? 'primary' : ''">
+    <v-icon :color="isPlayed ? 'primary' : ''">
       <i-mdi-check />
-    </Icon>
+    </v-icon>
   </v-btn>
 </template>
 
diff --git a/frontend/src/components/Buttons/PlayButton.vue b/frontend/src/components/Buttons/PlayButton.vue
index 0ad56e64..41010452 100644
--- a/frontend/src/components/Buttons/PlayButton.vue
+++ b/frontend/src/components/Buttons/PlayButton.vue
@@ -7,12 +7,12 @@
       :loading="loading"
       :disabled="disabled"
       @click.prevent="playOrResume">
-      <Icon v-if="shuffle" :size="fab ? 36 : null">
+      <v-icon v-if="shuffle" :size="fab ? 36 : null">
         <i-mdi-shuffle />
-      </Icon>
-      <Icon v-else :size="fab ? 36 : null">
+      </v-icon>
+      <v-icon v-else :size="fab ? 36 : null">
         <i-mdi-play />
-      </Icon>
+      </v-icon>
     </v-btn>
     <v-btn
       v-else-if="!fab"
diff --git a/frontend/src/components/Buttons/PlaybackSettingsButton.vue b/frontend/src/components/Buttons/PlaybackSettingsButton.vue
index c2836bf4..ca13fddf 100644
--- a/frontend/src/components/Buttons/PlaybackSettingsButton.vue
+++ b/frontend/src/components/Buttons/PlaybackSettingsButton.vue
@@ -21,9 +21,9 @@
             icon
             v-bind="attrs"
             v-on="{ ...tooltip, ...menu }">
-            <Icon>
+            <v-icon>
               <i-mdi-cog />
-            </Icon>
+            </v-icon>
           </v-btn>
         </template>
         <span>{{ $t('playbackSettings') }}</span>
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
index 326c2550..10a6610b 100644
--- a/frontend/src/components/Buttons/QueueButton.vue
+++ b/frontend/src/components/Buttons/QueueButton.vue
@@ -23,9 +23,9 @@
             icon
             v-bind="attrs"
             v-on="{ ...tooltip, ...menu }">
-            <Icon>
+            <v-icon>
               <i-mdi-playlist-play />
-            </Icon>
+            </v-icon>
           </v-btn>
         </template>
         <span>{{ $t('queue') }}</span>
@@ -74,9 +74,9 @@
         <v-tooltip location="top">
           <template #activator="{ on: tooltip }">
             <v-btn icon v-on="tooltip" @click="playbackManager.stop">
-              <Icon>
+              <v-icon>
                 <i-mdi-playlist-remove />
-              </Icon>
+              </v-icon>
             </v-btn>
           </template>
           <span>{{ $t('playback.clearQueue') }}</span>
@@ -84,9 +84,9 @@
         <v-tooltip location="top">
           <template #activator="{ on: tooltip }">
             <v-btn icon disabled v-on="tooltip">
-              <Icon>
+              <v-icon>
                 <i-mdi-content-save />
-              </Icon>
+              </v-icon>
             </v-btn>
           </template>
           <span>{{ $t('playback.saveAsPlaylist') }}</span>
diff --git a/frontend/src/components/Buttons/ScrollToTopButton.vue b/frontend/src/components/Buttons/ScrollToTopButton.vue
index 50418a5d..7ab62db5 100644
--- a/frontend/src/components/Buttons/ScrollToTopButton.vue
+++ b/frontend/src/components/Buttons/ScrollToTopButton.vue
@@ -8,9 +8,9 @@
       location="bottom right"
       fixed
       @click="scrollToTop">
-      <Icon>
+      <v-icon>
         <i-mdi-chevron-up />
-      </Icon>
+      </v-icon>
     </v-btn>
   </v-fab-transition>
 </template>
diff --git a/frontend/src/components/Buttons/SortButton.vue b/frontend/src/components/Buttons/SortButton.vue
index 76ec864a..883acb80 100644
--- a/frontend/src/components/Buttons/SortButton.vue
+++ b/frontend/src/components/Buttons/SortButton.vue
@@ -10,9 +10,9 @@
         v-bind="attrs"
         v-on="on">
         {{ $t('sortByType', { type: items[model].name }) }}
-        <Icon end>
+        <v-icon end>
           <i-mdi-menu-down />
-        </Icon>
+        </v-icon>
       </v-btn>
       <v-btn
         v-else
@@ -21,9 +21,9 @@
         icon
         v-bind="attrs"
         v-on="on">
-        <Icon>
+        <v-icon>
           <i-mdi-sort-alphabetical-ascending />
-        </Icon>
+        </v-icon>
       </v-btn>
     </template>
     <v-list dense>
diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
index 8ad20bed..a7df6d31 100644
--- a/frontend/src/components/Buttons/SubtitleSelectionButton.vue
+++ b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -26,9 +26,9 @@
             "
             v-bind="attrs"
             v-on="{ ...tooltip, ...menu }">
-            <Icon>
+            <v-icon>
               <i-mdi-closed-caption />
-            </Icon>
+            </v-icon>
           </v-btn>
         </template>
         <span>{{ $t('subtitles') }}</span>
@@ -40,12 +40,12 @@
           v-for="track of tracks"
           :key="track.srcIndex"
           @click="playbackManager.currentSubtitleStreamIndex = track.srcIndex">
-          <Icon
+          <v-icon
             v-if="
               track.srcIndex === playbackManager.currentSubtitleStreamIndex
             ">
             <i-mdi-check />
-          </Icon>
+          </v-icon>
           {{ track.label }}
         </v-list-item>
       </v-list>
diff --git a/frontend/src/components/Buttons/TypeButton.vue b/frontend/src/components/Buttons/TypeButton.vue
index 6cd2a893..8551cbeb 100644
--- a/frontend/src/components/Buttons/TypeButton.vue
+++ b/frontend/src/components/Buttons/TypeButton.vue
@@ -10,9 +10,9 @@
         v-bind="attrs"
         v-on="on">
         {{ items[model].name }}
-        <Icon end>
+        <v-icon end>
           <i-mdi-menu-down />
-        </Icon>
+        </v-icon>
       </v-btn>
       <v-btn
         v-else
@@ -21,9 +21,9 @@
         icon
         v-bind="attrs"
         v-on="on">
-        <Icon>
+        <v-icon>
           <i-mdi-eye />
-        </Icon>
+        </v-icon>
       </v-btn>
     </template>
     <v-list dense>
diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue
deleted file mode 100644
index dc2180df..00000000
--- a/frontend/src/components/Icon.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- TODO: Remove this component as soon as this Pull request is merged: https://github.com/vuetifyjs/vuetify/pull/16168 -->
-<template>
-  <v-icon :icon="$slots.default" />
-</template>
diff --git a/frontend/src/components/Item/ItemMenu.vue b/frontend/src/components/Item/ItemMenu.vue
index 154859ea..34deb18d 100644
--- a/frontend/src/components/Item/ItemMenu.vue
+++ b/frontend/src/components/Item/ItemMenu.vue
@@ -14,9 +14,9 @@
           v-bind="props"
           @click.stop.prevent="onActivatorClick"
           @contextmenu.stop.prevent="onRightClick">
-          <Icon>
+          <v-icon>
             <i-mdi-dots-horizontal />
-          </Icon>
+          </v-icon>
         </v-btn>
       </template>
       <v-list nav>
diff --git a/frontend/src/components/Item/MediaInfo.vue b/frontend/src/components/Item/MediaInfo.vue
index 84fcf4d7..c8c73fd5 100644
--- a/frontend/src/components/Item/MediaInfo.vue
+++ b/frontend/src/components/Item/MediaInfo.vue
@@ -11,9 +11,9 @@
     <span v-if="item.ProductionYear && year">{{ item.ProductionYear }}</span>
     <span v-if="item.OfficialRating && rating">{{ item.OfficialRating }}</span>
     <span v-if="item.CommunityRating && rating">
-      <Icon class="rating-icon" size="16">
+      <v-icon class="rating-icon" size="16">
         <i-mdi-star />
-      </Icon>
+      </v-icon>
       {{ item.CommunityRating.toFixed(1) }}
     </span>
     <span v-if="item.Type === 'MusicAlbum' && item.ChildCount && tracks">
diff --git a/frontend/src/components/Item/Metadata/ImageEditor.vue b/frontend/src/components/Item/Metadata/ImageEditor.vue
index 0a466376..dda561de 100644
--- a/frontend/src/components/Item/Metadata/ImageEditor.vue
+++ b/frontend/src/components/Item/Metadata/ImageEditor.vue
@@ -17,14 +17,14 @@
             </div>
             <v-card-actions class="justify-center">
               <v-btn icon @click="handleSearch">
-                <Icon>
+                <v-icon>
                   <i-mdi-magnify />
-                </Icon>
+                </v-icon>
               </v-btn>
               <v-btn icon class="ml-3" @click="handleDelete(item)">
-                <Icon>
+                <v-icon>
                   <i-mdi-delete />
-                </Icon>
+                </v-icon>
               </v-btn>
             </v-card-actions>
           </v-card>
@@ -48,14 +48,14 @@
             </div>
             <v-card-actions class="justify-center">
               <v-btn icon @click="handleSearch">
-                <Icon>
+                <v-icon>
                   <i-mdi-magnify />
-                </Icon>
+                </v-icon>
               </v-btn>
               <v-btn icon class="ml-3" @click="handleDelete(item)">
-                <Icon>
+                <v-icon>
                   <i-mdi-delete />
-                </Icon>
+                </v-icon>
               </v-btn>
             </v-card-actions>
           </v-card>
diff --git a/frontend/src/components/Item/Metadata/ImageSearch.vue b/frontend/src/components/Item/Metadata/ImageSearch.vue
index 0962fc03..665adb21 100644
--- a/frontend/src/components/Item/Metadata/ImageSearch.vue
+++ b/frontend/src/components/Item/Metadata/ImageSearch.vue
@@ -78,9 +78,9 @@
             <v-spacer />
             <v-card-actions class="justify-center">
               <v-btn icon :disabled="loading" @click="handleDownload(item)">
-                <Icon>
+                <v-icon>
                   <i-mdi-cloud-download />
-                </Icon>
+                </v-icon>
               </v-btn>
             </v-card-actions>
           </v-card>
diff --git a/frontend/src/components/Item/Metadata/MetadataEditor.vue b/frontend/src/components/Item/Metadata/MetadataEditor.vue
index 8cd62113..b07c79d6 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditor.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditor.vue
@@ -117,9 +117,9 @@
                   {{ $t('addNewPerson') }}
                 </v-list-item-title>
                 <v-list-item-action>
-                  <Icon>
+                  <v-icon>
                     <i-mdi-plus-circle />
-                  </Icon>
+                  </v-icon>
                 </v-list-item-action>
               </v-list-item>
               <v-list-item
@@ -135,9 +135,9 @@
                         ImageType.Primary
                       )
                     " />
-                  <Icon v-else class="bg-grey-darken-3">
+                  <v-icon v-else class="bg-grey-darken-3">
                     <i-mdi-account />
-                  </Icon>
+                  </v-icon>
                 </v-avatar>
                 <v-list-item-title>
                   {{ item.Name }}
@@ -146,9 +146,9 @@
                   {{ item.Role || item.Type }}
                 </v-list-item-subtitle>
                 <v-list-item-action @click.stop="handlePersonDel(i)">
-                  <Icon>
+                  <v-icon>
                     <i-mdi-delete />
-                  </Icon>
+                  </v-icon>
                 </v-list-item-action>
               </v-list-item>
             </v-list>
diff --git a/frontend/src/components/Item/Metadata/PersonEditor.vue b/frontend/src/components/Item/Metadata/PersonEditor.vue
index 51f191cc..dac03a4f 100644
--- a/frontend/src/components/Item/Metadata/PersonEditor.vue
+++ b/frontend/src/components/Item/Metadata/PersonEditor.vue
@@ -12,9 +12,9 @@
                 :src="
                   $remote.sdk.api?.getItemImageUrl(person.Id, ImageType.Primary)
                 " />
-              <Icon v-else class="bg-grey-darken-3">
+              <v-icon v-else class="bg-grey-darken-3">
                 <i-mdi-account />
-              </Icon>
+              </v-icon>
             </v-avatar>
           </v-col>
           <v-col>
diff --git a/frontend/src/components/Item/WatchedIndicator.vue b/frontend/src/components/Item/WatchedIndicator.vue
index 24ea13e8..d755bfcc 100644
--- a/frontend/src/components/Item/WatchedIndicator.vue
+++ b/frontend/src/components/Item/WatchedIndicator.vue
@@ -1,8 +1,8 @@
 <template>
   <v-chip color="success" class="card-chip" small>
-    <Icon>
+    <v-icon>
       <i-mdi-check />
-    </Icon>
+    </v-icon>
   </v-chip>
 </template>
 
diff --git a/frontend/src/components/Layout/AppBar/AppBar.vue b/frontend/src/components/Layout/AppBar/AppBar.vue
index e0f93476..55823506 100644
--- a/frontend/src/components/Layout/AppBar/AppBar.vue
+++ b/frontend/src/components/Layout/AppBar/AppBar.vue
@@ -8,9 +8,9 @@
       @click="navigationDrawer = !navigationDrawer" />
     <app-bar-button-layout @click="$router.back()">
       <template #icon>
-        <Icon>
+        <v-icon>
           <i-mdi-arrow-left />
-        </Icon>
+        </v-icon>
       </template>
     </app-bar-button-layout>
     <v-spacer />
@@ -18,9 +18,9 @@
     <v-spacer />
     <app-bar-button-layout v-if="!network.isOnline" color="red">
       <template #icon>
-        <Icon>
+        <v-icon>
           <i-mdi-network-off-outline />
-        </Icon>
+        </v-icon>
       </template>
       <template #tooltip>
         <span>{{ $t('noNetworkConnection') }}</span>
@@ -29,10 +29,10 @@
     <task-manager-button />
     <app-bar-button-layout @click="toggleDarkMode">
       <template #icon>
-        <Icon>
+        <v-icon>
           <i-mdi-weather-sunny v-if="clientSettings.darkMode" />
           <i-mdi-weather-night v-else />
-        </Icon>
+        </v-icon>
       </template>
       <template #tooltip>
         <span>{{
diff --git a/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue b/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue
index 325c7493..6182de9b 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/CastButton.vue
@@ -16,9 +16,9 @@
     <template #activator="{ on: menu, attrs }">
       <app-bar-button-layout :custom-listener="menu" v-bind="attrs" disabled>
         <template #icon>
-          <Icon>
+          <v-icon>
             <i-mdi-cast />
-          </Icon>
+          </v-icon>
         </template>
         <template #tooltip>
           <span>{{ $t('remoteDevices') }}</span>
@@ -29,33 +29,33 @@
       <v-list color="transparent">
         <v-list-group>
           <v-list-item>
-            <Icon>
+            <v-icon>
               <i-mdi-account-group />
-            </Icon>
+            </v-icon>
             {{ $t('syncPlayGroups') }}
             <v-list-item-action>
-              <Icon>
+              <v-icon>
                 <i-mdi-arrow-right />
-              </Icon>
+              </v-icon>
             </v-list-item-action>
           </v-list-item>
           <v-divider />
           <v-list-item v-if="features.airPlay">
-            <Icon>
+            <v-icon>
               <i-mdi-apple-airplay />
-            </Icon>
+            </v-icon>
             {{ $t('airPlayDevices') }}
           </v-list-item>
           <v-list-item v-if="features.googleCast">
-            <Icon>
+            <v-icon>
               <i-mdi-cast />
-            </Icon>
+            </v-icon>
             {{ $t('googleCastPlaceholderDevice') }}
           </v-list-item>
           <v-list-item>
-            <Icon>
+            <v-icon>
               <i-simple-icons-jellyfin />
-            </Icon>
+            </v-icon>
             {{ $t('genericJellyfinPlaceholderDevice') }}
           </v-list-item>
         </v-list-group>
diff --git a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
index 4a10cd13..809da6a5 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
@@ -22,9 +22,9 @@
         v-bind="attrs">
         <template #icon>
           <v-progress-circular v-if="!buttonColor" indeterminate size="24" />
-          <Icon v-else>
+          <v-icon v-else>
             <i-mdi-check />
-          </Icon>
+          </v-icon>
         </template>
         <template #tooltip>
           <span>{{ $t('appbar.tooltips.tasks') }}</span>
@@ -45,9 +45,9 @@
                 :model-value="task.progress"
                 rotate="-90"
                 size="24" />
-              <Icon v-else>
+              <v-icon v-else>
                 <i-mdi-check />
-              </Icon>
+              </v-icon>
             </v-list-item-action>
           </v-list-item>
         </v-list-group>
diff --git a/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue b/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
index 6ba99650..fa286913 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
@@ -24,9 +24,9 @@
           #subtitle>
           <v-list-item-subtitle>
             {{ $t('administrator') }}
-            <Icon size="small">
+            <v-icon size="small">
               <i-mdi-key-chain />
-            </Icon>
+            </v-icon>
           </v-list-item-subtitle>
         </template>
       </v-list-item>
diff --git a/frontend/src/components/Layout/AudioControls.vue b/frontend/src/components/Layout/AudioControls.vue
index a4bc7441..7ae50873 100644
--- a/frontend/src/components/Layout/AudioControls.vue
+++ b/frontend/src/components/Layout/AudioControls.vue
@@ -62,17 +62,17 @@
                   class="mx-1 active-button"
                   :color="playbackManager.isShuffling ? 'primary' : undefined"
                   @click="playbackManager.toggleShuffle">
-                  <Icon>
+                  <v-icon>
                     <i-mdi-shuffle />
-                  </Icon>
+                  </v-icon>
                 </v-btn>
                 <v-btn
                   icon
                   class="mx-1"
                   @click="playbackManager.setPreviousTrack">
-                  <Icon>
+                  <v-icon>
                     <i-mdi-skip-previous />
-                  </Icon>
+                  </v-icon>
                 </v-btn>
                 <v-btn
                   icon
@@ -88,9 +88,9 @@
                   :disabled="!playbackManager.getNextItem"
                   class="mx-1"
                   @click="playbackManager.setNextTrack">
-                  <Icon>
+                  <v-icon>
                     <i-mdi-skip-next />
-                  </Icon>
+                  </v-icon>
                 </v-btn>
                 <v-btn
                   icon
@@ -117,14 +117,14 @@
               :item="playbackManager.getCurrentItem"
               :z-index="99999" />
             <v-btn v-show="!isFullScreenPlayer" icon to="/playback/music">
-              <Icon>
+              <v-icon>
                 <i-mdi-fullscreen />
-              </Icon>
+              </v-icon>
             </v-btn>
             <v-btn v-show="isFullScreenPlayer" icon @click="$router.back()">
-              <Icon>
+              <v-icon>
                 <i-mdi-fullscreen-exit />
-              </Icon>
+              </v-icon>
             </v-btn>
           </v-col>
           <v-col
@@ -143,9 +143,9 @@
               :disabled="!playbackManager.getNextItem"
               class="mx-1"
               @click="playbackManager.setNextTrack">
-              <Icon>
+              <v-icon>
                 <i-mdi-skip-next />
-              </Icon>
+              </v-icon>
             </v-btn>
             <v-btn
               icon
@@ -159,9 +159,9 @@
               class="mx-1 active-button hidden-xs-only"
               :color="playbackManager.isShuffling ? 'primary' : undefined"
               @click="playbackManager.toggleShuffle">
-              <Icon>
+              <v-icon>
                 <i-mdi-shuffle />
-              </Icon>
+              </v-icon>
             </v-btn>
           </v-col>
         </v-row>
diff --git a/frontend/src/components/Layout/Images/UserImage.vue b/frontend/src/components/Layout/Images/UserImage.vue
index e2ca041a..2f7e2fae 100644
--- a/frontend/src/components/Layout/Images/UserImage.vue
+++ b/frontend/src/components/Layout/Images/UserImage.vue
@@ -3,9 +3,9 @@
     <v-img :src="url" :width="size" cover>
       <template #placeholder>
         <v-avatar color="primary" :size="size">
-          <Icon :size="iconSize" dark>
+          <v-icon :size="iconSize" dark>
             <i-mdi-account />
-          </Icon>
+          </v-icon>
         </v-avatar>
       </template>
     </v-img>
diff --git a/frontend/src/components/Layout/Navigation/CommitLink.vue b/frontend/src/components/Layout/Navigation/CommitLink.vue
index e6b87123..ee1d06cd 100644
--- a/frontend/src/components/Layout/Navigation/CommitLink.vue
+++ b/frontend/src/components/Layout/Navigation/CommitLink.vue
@@ -5,9 +5,9 @@
     target="_blank"
     rel="noopener noreferrer">
     <v-list-item-action>
-      <Icon>
+      <v-icon>
         <i-mdi-github />
-      </Icon>
+      </v-icon>
     </v-list-item-action>
     <v-list-item-title>
       {{ '#' + commit.slice(0, 7) }}
diff --git a/frontend/src/components/Layout/SwiperSection.vue b/frontend/src/components/Layout/SwiperSection.vue
index a8379c1c..1fb2c83a 100644
--- a/frontend/src/components/Layout/SwiperSection.vue
+++ b/frontend/src/components/Layout/SwiperSection.vue
@@ -10,14 +10,14 @@
         </h1>
         <v-spacer />
         <v-btn class="swiper-prev" icon variant="plain">
-          <Icon>
+          <v-icon>
             <i-mdi-arrow-left />
-          </Icon>
+          </v-icon>
         </v-btn>
         <v-btn class="swiper-next" icon variant="plain">
-          <Icon>
+          <v-icon>
             <i-mdi-arrow-right />
-          </Icon>
+          </v-icon>
         </v-btn>
       </div>
 
diff --git a/frontend/src/components/Players/DraggableQueue.vue b/frontend/src/components/Players/DraggableQueue.vue
index 6d753a5e..3c3e656c 100644
--- a/frontend/src/components/Players/DraggableQueue.vue
+++ b/frontend/src/components/Players/DraggableQueue.vue
@@ -14,9 +14,9 @@
             {{ index + 1 }}
           </v-list-item-action>
           <v-list-item-action v-else class="justify-center d-flex">
-            <Icon>
+            <v-icon>
               <i-mdi-drag-horizontal />
-            </Icon>
+            </v-icon>
           </v-list-item-action>
           <v-avatar class="list-group-item">
             <blurhash-image :item="item" />
diff --git a/frontend/src/components/Players/PlaybackInfoCard.vue b/frontend/src/components/Players/PlaybackInfoCard.vue
index 241d78b1..fadedda4 100644
--- a/frontend/src/components/Players/PlaybackInfoCard.vue
+++ b/frontend/src/components/Players/PlaybackInfoCard.vue
@@ -12,9 +12,9 @@
               class="pointer-events-all"
               icon
               @click="$emit('close-playback-data')">
-              <Icon>
+              <v-icon>
                 <i-mdi-close />
-              </Icon>
+              </v-icon>
             </v-btn>
           </v-card-title>
           <v-card-text class="py-0">
diff --git a/frontend/src/components/Players/PlayerManager.vue b/frontend/src/components/Players/PlayerManager.vue
index 01602d98..40831c53 100644
--- a/frontend/src/components/Players/PlayerManager.vue
+++ b/frontend/src/components/Players/PlayerManager.vue
@@ -34,15 +34,15 @@
               <div class="d-flex flex-column player-overlay">
                 <div class="d-flex flex-row">
                   <v-btn icon @click="playbackManager.toggleMinimized">
-                    <Icon>
+                    <v-icon>
                       <i-mdi-arrow-expand-all />
-                    </Icon>
+                    </v-icon>
                   </v-btn>
                   <v-spacer />
                   <v-btn icon @click="stopPlayback">
-                    <Icon>
+                    <v-icon>
                       <i-mdi-close />
-                    </Icon>
+                    </v-icon>
                   </v-btn>
                 </div>
                 <div
@@ -52,9 +52,9 @@
                     icon
                     size="large"
                     @click="playbackManager.setPreviousTrack">
-                    <Icon size="32">
+                    <v-icon size="32">
                       <i-mdi-skip-previous />
-                    </Icon>
+                    </v-icon>
                   </v-btn>
                   <v-btn
                     class="pointer-events-all"
@@ -68,9 +68,9 @@
                     icon
                     size="large"
                     @click="playbackManager.setNextTrack">
-                    <Icon size="32">
+                    <v-icon size="32">
                       <i-mdi-skip-next />
-                    </Icon>
+                    </v-icon>
                   </v-btn>
                 </div>
               </div>
@@ -92,14 +92,14 @@
                   <div class="d-flex align-center py-2 px-4">
                     <div class="d-flex">
                       <v-btn icon @click="stopPlayback">
-                        <Icon>
+                        <v-icon>
                           <i-mdi-close />
-                        </Icon>
+                        </v-icon>
                       </v-btn>
                       <v-btn icon @click="playbackManager.toggleMinimized">
-                        <Icon>
+                        <v-icon>
                           <i-mdi-chevron-down />
-                        </Icon>
+                        </v-icon>
                       </v-btn>
                     </div>
                     <div class="d-flex ml-auto">
@@ -149,9 +149,9 @@
                           icon
                           class="mx-1"
                           @click="playbackManager.setPreviousTrack">
-                          <Icon>
+                          <v-icon>
                             <i-mdi-skip-previous />
-                          </Icon>
+                          </v-icon>
                         </v-btn>
                         <v-btn
                           icon
@@ -163,9 +163,9 @@
                           icon
                           class="mx-1"
                           @click="playbackManager.setNextTrack">
-                          <Icon>
+                          <v-icon>
                             <i-mdi-skip-next />
-                          </Icon>
+                          </v-icon>
                         </v-btn>
                       </div>
                       <div class="d-flex aligh-center ml-auto ml-md-0">
@@ -191,30 +191,30 @@
                           class="align-self-center active-button"
                           icon
                           @click="togglePictureInPicture">
-                          <Icon>
+                          <v-icon>
                             <i-mdi-picture-in-picture-bottom-right />
-                          </Icon>
+                          </v-icon>
                         </v-btn>
                         <v-btn
                           v-if="$vuetify.display.smAndUp"
                           class="align-self-center active-button"
                           icon
                           @click="stretchVideo = !stretchVideo">
-                          <Icon v-if="!stretchVideo">
+                          <v-icon v-if="!stretchVideo">
                             <i-mdi-stretch-to-page-outline />
-                          </Icon>
-                          <Icon v-if="stretchVideo">
+                          </v-icon>
+                          <v-icon v-if="stretchVideo">
                             <i-mdi-stretch-to-page />
-                          </Icon>
+                          </v-icon>
                         </v-btn>
                         <v-btn
                           v-if="features.fullScreen"
                           class="align-self-center active-button"
                           icon
                           @click="toggleFullScreen">
-                          <Icon>
+                          <v-icon>
                             <i-mdi-fullscreen />
-                          </Icon>
+                          </v-icon>
                         </v-btn>
                       </div>
                     </div>
diff --git a/frontend/src/components/Players/TrackList.vue b/frontend/src/components/Players/TrackList.vue
index eb203fde..a86a1169 100644
--- a/frontend/src/components/Players/TrackList.vue
+++ b/frontend/src/components/Players/TrackList.vue
@@ -6,9 +6,9 @@
         <th style="width: 3em" class="pr-0 pl-0" scope="col" />
         <th scope="col">{{ $t('item.tracklist.title') }}</th>
         <th style="width: 6.5em" class="text-center" scope="col">
-          <Icon class="text--primary" size="16">
+          <v-icon class="text--primary" size="16">
             <i-mdi-clock-outline />
-          </Icon>
+          </v-icon>
         </th>
       </tr>
     </thead>
@@ -19,9 +19,9 @@
           :key="discNumber"
           class="disc-header">
           <td colspan="4" class="text--secondary">
-            <Icon class="text--secondary">
+            <v-icon class="text--secondary">
               <i-mdi-disc />
-            </Icon>
+            </v-icon>
             {{ $t('discNumber', { discNumber }) }}
           </td>
         </tr>
@@ -35,9 +35,9 @@
             <td style="width: 4em" class="pr-0 text-center">
               <span v-if="hover && !isPlaying(track)">
                 <v-btn small icon @click="playTracks(track)">
-                  <Icon>
+                  <v-icon>
                     <i-mdi-play-circle-outline />
-                  </Icon>
+                  </v-icon>
                 </v-btn>
               </span>
               <span v-else>{{ track.IndexNumber }}</span>
diff --git a/frontend/src/components/System/AboutLinks.vue b/frontend/src/components/System/AboutLinks.vue
index 4a2bce76..8c554ceb 100644
--- a/frontend/src/components/System/AboutLinks.vue
+++ b/frontend/src/components/System/AboutLinks.vue
@@ -14,9 +14,9 @@
           {{ linkItem.name }}
         </v-list-item-title>
         <v-list-item-action>
-          <Icon>
+          <v-icon>
             <i-mdi-open-in-new />
-          </Icon>
+          </v-icon>
         </v-list-item-action>
       </v-list-item>
     </v-list-group>
diff --git a/frontend/src/components/System/LocaleSwitcher.vue b/frontend/src/components/System/LocaleSwitcher.vue
index b8666af0..3677f9a3 100644
--- a/frontend/src/components/System/LocaleSwitcher.vue
+++ b/frontend/src/components/System/LocaleSwitcher.vue
@@ -9,9 +9,9 @@
             :size="large ? 'large' : 'small'"
             :color="appBar ? undefined : 'primary'"
             v-bind="mergeProps(menu, tooltip)">
-            <Icon>
+            <v-icon>
               <i-mdi-web />
-            </Icon>
+            </v-icon>
           </v-btn>
         </template>
         <span>{{ $t('tooltips.changeLanguage') }}</span>
diff --git a/frontend/src/components/System/SelectedDeviceInfo.vue b/frontend/src/components/System/SelectedDeviceInfo.vue
index 408884e2..f4c22b5e 100644
--- a/frontend/src/components/System/SelectedDeviceInfo.vue
+++ b/frontend/src/components/System/SelectedDeviceInfo.vue
@@ -3,9 +3,9 @@
     <v-row v-if="isDialog" class="ma-0 justify-space-between align-center">
       <v-card-title>{{ selectedDevice.Name }}</v-card-title>
       <v-btn icon class="mr-2" @click="$emit('close-dialog')">
-        <Icon>
+        <v-icon>
           <i-mdi-close />
-        </Icon>
+        </v-icon>
       </v-btn>
     </v-row>
     <v-card-title v-else>{{ selectedDevice.Name }}</v-card-title>
diff --git a/frontend/src/pages/playback/music/index.vue b/frontend/src/pages/playback/music/index.vue
index 8a5e3f1d..d2c1ad24 100644
--- a/frontend/src/pages/playback/music/index.vue
+++ b/frontend/src/pages/playback/music/index.vue
@@ -6,9 +6,9 @@
       color="transparent">
       <app-bar-button-layout @click="$router.back()">
         <template #icon>
-          <Icon>
+          <v-icon>
             <i-mdi-arrow-left />
-          </Icon>
+          </v-icon>
         </template>
       </app-bar-button-layout>
     </v-app-bar>
diff --git a/frontend/src/pages/settings/index.vue b/frontend/src/pages/settings/index.vue
index 12a904ed..a39bc15b 100644
--- a/frontend/src/pages/settings/index.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -59,9 +59,9 @@
                 {{ userItem.description }}
               </v-list-item-subtitle>
               <v-list-item-action>
-                <Icon>
+                <v-icon>
                   <i-mdi-chevron-right />
-                </Icon>
+                </v-icon>
               </v-list-item-action>
             </v-list-item>
           </v-list-group>
@@ -89,9 +89,9 @@
                   {{ adminItem.description }}
                 </v-list-item-subtitle>
                 <v-list-item-action>
-                  <Icon>
+                  <v-icon>
                     <i-mdi-chevron-right />
-                  </Icon>
+                  </v-icon>
                 </v-list-item-action>
               </v-list-item>
             </v-list-group>
diff --git a/frontend/src/pages/settings/logs-and-activity.vue b/frontend/src/pages/settings/logs-and-activity.vue
index ff9b7206..591a9cc0 100644
--- a/frontend/src/pages/settings/logs-and-activity.vue
+++ b/frontend/src/pages/settings/logs-and-activity.vue
@@ -19,9 +19,9 @@
                 target="_blank"
                 rel="noopener">
                 <v-avatar>
-                  <Icon>
+                  <v-icon>
                     <i-mdi-file />
-                  </Icon>
+                  </v-icon>
                 </v-avatar>
                 <v-list-item-title>
                   {{ file.Name }}
@@ -30,9 +30,9 @@
                   {{ getFormattedLogDate(file.DateModified) }}
                 </v-list-item-subtitle>
                 <v-list-item-action>
-                  <Icon>
+                  <v-icon>
                     <i-mdi-open-in-new />
-                  </Icon>
+                  </v-icon>
                 </v-list-item-action>
               </v-list-item>
             </v-list-group>
@@ -48,9 +48,9 @@
             v-else-if="loadingLogsStatus.status === 'error'"
             key="error-log-card">
             <v-card-title>
-              <Icon color="error" class="pr-2">
+              <v-icon color="error" class="pr-2">
                 <i-mdi-alert-circle />
-              </Icon>
+              </v-icon>
               {{ $t('settings.logsAndActivity.failedGetLogs') }}
             </v-card-title>
             <v-card-text v-if="loadingLogsStatus.errorMessage">
@@ -100,9 +100,9 @@
             v-else-if="loadingActivityStatus.status === 'error'"
             key="error-activity-card">
             <v-card-title>
-              <Icon color="error" class="pr-2">
+              <v-icon color="error" class="pr-2">
                 <i-mdi-alert-circle />
-              </Icon>
+              </v-icon>
               {{ $t('settings.logsAndActivity.failedGetActivity') }}
             </v-card-title>
             <v-card-text>
diff --git a/package-lock.json b/package-lock.json
index 9f5cec7b..6cec5639 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "vue": "3.2.39",
         "vue-i18n": "9.2.2",
         "vue-router": "4.1.5",
-        "vuetify": "3.0.6"
+        "vuetify": "3.1.1"
       },
       "devDependencies": {
         "@iconify/json": "2.1.104",
@@ -15417,9 +15417,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.6.tgz",
-      "integrity": "sha512-Illtc9t8PExlKqUEIivNNMpDif4/tvn+04ZEAwrxpQAG75x6V7oUFOF1kVKAFZ2ryuLnBpscXBR85GwFBmLeMQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.1.tgz",
+      "integrity": "sha512-BkfRQZ406xQORpgrcUjuPaT/woO96ef/+2zHCfL3an+CrUhjG/sIAptEybHruq3xwFM0uJibDFqGiridsXc99w==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },