diff --git a/package.json b/package.json
index 6ebdd517..a4e5d1ef 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@antfu/eslint-config": "^2.17.0",
     "@ffflorian/jszip-cli": "^3.6.3",
     "@iconify/json": "^2.2.208",
+    "@iconify/vue": "^4.1.2",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@rollup/plugin-replace": "^5.0.5",
     "@types/dompurify": "^3.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4db0ea8e..b230f629 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ importers:
       '@iconify/json':
         specifier: ^2.2.208
         version: 2.2.208
+      '@iconify/vue':
+        specifier: ^4.1.2
+        version: 4.1.2(vue@3.4.27(typescript@5.4.5))
       '@intlify/unplugin-vue-i18n':
         specifier: ^4.0.0
         version: 4.0.0(rollup@4.16.4)(vue-i18n@9.13.1(vue@3.4.27(typescript@5.4.5)))
@@ -782,6 +785,11 @@ packages:
   '@iconify/utils@2.1.23':
     resolution: {integrity: sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==}
 
+  '@iconify/vue@4.1.2':
+    resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
+    peerDependencies:
+      vue: '>=3'
+
   '@inquirer/figures@1.0.1':
     resolution: {integrity: sha512-mtup3wVKia3ZwULPHcbs4Mor8Voi+iIXEWD7wCNbIO6lYR62oPCTQyrddi5OMYVXHzeCSoneZwJuS8sBvlEwDw==}
     engines: {node: '>=18'}
@@ -6794,6 +6802,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@iconify/vue@4.1.2(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.27(typescript@5.4.5)
+
   '@inquirer/figures@1.0.1': {}
 
   '@intlify/bundle-utils@8.0.0(vue-i18n@9.13.1(vue@3.4.27(typescript@5.4.5)))':
diff --git a/src/components/BackToTopOrRefreshButton.vue b/src/components/BackToTopOrRefreshButton.vue
index f8eef84f..d37feb92 100644
--- a/src/components/BackToTopOrRefreshButton.vue
+++ b/src/components/BackToTopOrRefreshButton.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
 import Button from '~/components/Button.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
 
@@ -29,11 +31,16 @@ const { reachTop } = useBewlyApp()
       @click="reachTop ? emit('refresh') : emit('backToTop')"
     >
       <Transition name="fade">
-        <div
-          v-if="reachTop" i-line-md:rotate-270 text-lg shrink-0 rotate-90
-          absolute
+        <Icon
+          v-if="reachTop"
+          icon="line-md:rotate-270"
+          shrink-0 rotate-90 absolute text-2xl
+        />
+        <Icon
+          v-else
+          icon="line-md:arrow-small-up"
+          shrink-0 absolute text-2xl
         />
-        <div v-else i-line-md:arrow-small-up text-lg shrink-0 absolute />
       </Transition>
     </Button>
   </div>
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index f97f3fd9..017e75c4 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
 import { AppPage } from '~/enums/appEnums'
@@ -151,14 +153,14 @@ function handleBackToTopOrRefresh() {
           >
             <Transition name="fade">
               <div v-show="hoveringDockItem.themeMode" absolute>
-                <div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
-                <div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl />
+                <Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-loop-transition" />
+                <Icon v-else icon="line-md:moon-alt-to-sunny-outline-loop-transition" />
               </div>
             </Transition>
             <Transition name="fade">
               <div v-show="!hoveringDockItem.themeMode" absolute>
-                <div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
-                <div v-else i-line-md:moon-to-sunny-outline-transition text-xl />
+                <Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-transition" />
+                <Icon v-else icon="line-md:moon-to-sunny-outline-transition" />
               </div>
             </Transition>
           </button>
@@ -177,13 +179,15 @@ function handleBackToTopOrRefresh() {
         @click="handleBackToTopOrRefresh"
       >
         <Transition name="fade">
-          <div
-            v-if="reachTop" i-line-md:rotate-270
-            absolute text-xl rotate-90
+          <Icon
+            v-if="reachTop"
+            icon="line-md:rotate-270"
+            shrink-0 rotate-90 absolute text-2xl
           />
-          <div
-            v-else i-line-md:arrow-small-up
-            absolute text-xl
+          <Icon
+            v-else
+            icon="line-md:arrow-small-up"
+            shrink-0 absolute text-2xl
           />
         </Transition>
       </button>
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index cb372702..9bc8423f 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
 import Button from '~/components/Button.vue'
 import { useDark } from '~/composables/useDark'
 
@@ -31,14 +33,18 @@ const hoveringDockItem = reactive<HoveringDockItem>({
         >
           <Transition name="fade">
             <div v-show="hoveringDockItem.themeMode" absolute>
-              <div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
-              <div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl />
+              <!-- <div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
+              <div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl /> -->
+              <Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-loop-transition" />
+              <Icon v-else icon="line-md:moon-alt-to-sunny-outline-loop-transition" />
             </div>
           </Transition>
           <Transition name="fade">
             <div v-show="!hoveringDockItem.themeMode" absolute>
-              <div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
-              <div v-else i-line-md:moon-to-sunny-outline-transition text-xl />
+              <!-- <div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
+              <div v-else i-line-md:moon-to-sunny-outline-transition text-xl /> -->
+              <Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-transition" />
+              <Icon v-else icon="line-md:moon-to-sunny-outline-transition" />
             </div>
           </Transition>
         </Button>
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index f1f5fcfe..e08d5e71 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import { onMounted, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -412,7 +413,6 @@ defineExpose({
                   rounded="$bew-radius-half"
                 >
                 <div
-
                   opacity-0 group-hover:opacity-100
                   pos="absolute" duration-300 bg="black opacity-60"
                   rounded="$bew-radius-half" p-1
@@ -423,7 +423,7 @@ defineExpose({
                     <div i-mingcute:carplay-line />
                   </Tooltip>
                   <Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
-                    <div i-line-md:confirm />
+                    <Icon icon="line-md:confirm" />
                   </Tooltip>
                 </div>
               </div>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index f477ac9c..096f8d77 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+
 import Button from '~/components/Button.vue'
 import { useApiClient } from '~/composables/api'
 import { settings } from '~/logic'
@@ -335,7 +337,7 @@ function handleUndo() {
                   <div i-mingcute:carplay-line />
                 </Tooltip>
                 <Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
-                  <div i-line-md:confirm />
+                  <Icon icon="line-md:confirm" />
                 </Tooltip>
               </button>
             </template>