diff --git a/package.json b/package.json
index b636316..efe0112 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "bulma": "^0.9.4",
     "lodash": "^4.17.19",
-    "mdi-vue": "^0.2.11",
+    "mdi-vue": "^3.0.13",
     "sass": "^1.62.1",
     "vue": "^3.3.4",
     "vue-clipboard2": "^0.3.0",
diff --git a/src/components/SeasonIcon.vue b/src/components/SeasonIcon.vue
index 5c5ac5a..b86cff3 100644
--- a/src/components/SeasonIcon.vue
+++ b/src/components/SeasonIcon.vue
@@ -1,17 +1,13 @@
 <template>
   <span class="icon" v-bind:data-season="season.id">
-    <spring-icon v-if="season.id === 'spring'" />
-    <summer-icon v-if="season.id === 'summer'" />
-    <fall-icon v-if="season.id === 'fall'" />
-    <winter-icon v-if="season.id === 'winter'" />
+    <mdicon name="flower" v-if="season.id === 'spring'" />
+    <mdicon name="sun" v-if="season.id === 'summer'" />
+    <mdicon name="leaf" v-if="season.id === 'fall'" />
+    <mdicon name="snowflake" v-if="season.id === 'winter'" />
   </span>
 </template>
 
 <script>
-import SpringIcon from 'mdi-vue/FlowerIcon'
-import SummerIcon from 'mdi-vue/WhiteBalanceSunnyIcon'
-import FallIcon from 'mdi-vue/LeafIcon'
-import WinterIcon from 'mdi-vue/SnowflakeIcon'
 export default {
   name: 'season-icon',
   props: {
@@ -25,12 +21,6 @@ export default {
         }
       }
     }
-  },
-  components: {
-    SpringIcon,
-    SummerIcon,
-    FallIcon,
-    WinterIcon
   }
 }
 </script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 484768f..535c7fe 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -127,9 +127,6 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
 import { faCopy, faTrash, faCloudUploadAlt } from '@fortawesome/fontawesome-free-solid'
-import 'mdi-vue/ContentCopyIcon'
-import 'mdi-vue/UploadIcon'
-import 'mdi-vue/DeleteIcon'
 export default {
   name: 'Settings',
   components: {
diff --git a/src/components/SkillIcon.vue b/src/components/SkillIcon.vue
index 76fd3ca..b8e67f2 100644
--- a/src/components/SkillIcon.vue
+++ b/src/components/SkillIcon.vue
@@ -1,19 +1,14 @@
 <template>
   <span class="icon" v-bind:data-skill="skill.id">
-    <farming-icon v-if="skill.id === 'farming'" />
-    <mining-icon v-if="skill.id === 'mining'" />
-    <foraging-icon v-if="skill.id === 'foraging'" />
-    <fishing-icon v-if="skill.id === 'fishing'" />
-    <combat-icon v-if="skill.id === 'combat'" />
+    <mdicon name="cow" v-if="skill.id === 'farming'" />
+    <mdicon name="diamond" v-if="skill.id === 'mining'" />
+    <mdicon name="mushroom" v-if="skill.id === 'foraging'" />
+    <mdicon name="fish" v-if="skill.id === 'fishing'" />
+    <mdicon name="sword" v-if="skill.id === 'combat'" />
   </span>
 </template>
 
 <script>
-import FarmingIcon from 'mdi-vue/CowIcon'
-import MiningIcon from 'mdi-vue/DiamondIcon'
-import ForagingIcon from 'mdi-vue/MushroomIcon'
-import FishingIcon from 'mdi-vue/FishIcon'
-import CombatIcon from 'mdi-vue/SwordIcon'
 export default {
   name: 'skill-icon',
   props: {
@@ -27,13 +22,6 @@ export default {
         }
       }
     }
-  },
-  components: {
-    FarmingIcon,
-    MiningIcon,
-    ForagingIcon,
-    FishingIcon,
-    CombatIcon
   }
 }
 </script>
diff --git a/src/components/changelog/Version.vue b/src/components/changelog/Version.vue
index eb83f67..4f1a1a5 100644
--- a/src/components/changelog/Version.vue
+++ b/src/components/changelog/Version.vue
@@ -19,7 +19,7 @@
       <p class="card-footer-item">
         <a :href="release_url" class="button">
           <span class="icon">
-            <github-box />
+            <font-awesome-icon :icon="gh_icon" />
           </span>
           <span>Release</span>
         </a>
@@ -29,12 +29,10 @@
 </template>
 
 <script>
-import GithubBox from 'mdi-vue/GithubBoxIcon'
+import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
+
 export default {
   name: 'version',
-  components: {
-    GithubBox
-  },
   props: {
     version: {
       type: Object,
@@ -53,6 +51,9 @@ export default {
       return (
         'https://github.com/kihashi/stardew_community_checklist/releases/tag/' + this.version.link
       )
+    },
+    gh_icon() {
+      return faGithub
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 474ef82..9deb1b3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,11 +6,16 @@ import App from './App.vue'
 import router from './router'
 // import store from './store'
 import VueClipboard from 'vue-clipboard2'
+import mdiVue from 'mdi-vue/v3'
+import * as mdijs from '@mdi/js'
 
 const app = createApp(App)
 
 app.use(router)
 app.use(VueClipboard)
+app.use(mdiVue, {
+  icons: mdijs
+})
 // app.use(store)
 
 app.mount('#app')
diff --git a/yarn.lock b/yarn.lock
index 42880a2..38eb774 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -465,6 +465,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@mdi/js@*":
+  version "7.2.96"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-7.2.96.tgz#a2a20be740a75e65c8b8b9e12a2b699c06a9208f"
+  integrity sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA==
+
 "@vitejs/plugin-vue-jsx@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.0.1.tgz#4c088ce445e34ae27e78a66e6dbf2cc2e85f827d"
@@ -1558,9 +1563,12 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
-mdi-vue@^0.2.11:
-  version "0.2.11"
-  resolved "https://registry.yarnpkg.com/mdi-vue/-/mdi-vue-0.2.11.tgz#98452e9e554fed1c20d36d3033010d91e4535129"
+mdi-vue@^3.0.13:
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/mdi-vue/-/mdi-vue-3.0.13.tgz#d3ab6b4b121ed34bedf2fdc92d3e3465dfd0fd36"
+  integrity sha512-QHfRJZfhTA4FLqxBh4Gzxq+U+V/XQLw9l8lSIwJGMY4L+7oP+5HkAd+rsySIGfcHLEZakN3xcYpcroLZAoh0cw==
+  dependencies:
+    "@mdi/js" "*"
 
 mime@^1.4.1:
   version "1.6.0"