diff --git a/web/package.json b/web/package.json
index 8d1c3b11b..207f5057b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,12 +18,14 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@iconify/vue": "^4.2.0",
     "@intlify/unplugin-vue-i18n": "^6.0.0",
     "@kyvg/vue3-notification": "^3.2.1",
     "@mdi/js": "^7.4.47",
     "@vueuse/core": "^12.0.0",
     "ansi_up": "^6.0.2",
     "devicon": "^2.16.0",
+    "devicons": "^1.8.0",
     "dompurify": "^3.2.0",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.7",
@@ -34,6 +36,7 @@
     "prismjs": "^1.29.0",
     "semver": "^7.6.3",
     "simple-icons": "^13.5.0",
+    "unplugin-icons": "^0.22.0",
     "vue": "^3.4.38",
     "vue-i18n": "^10.0.3",
     "vue-router": "^4.4.3"
@@ -42,6 +45,7 @@
     "@antfu/eslint-config": "^3.3.2",
     "@eslint/js": "^9.9.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@iconify-json/devicon": "^1.2.9",
     "@intlify/eslint-plugin-vue-i18n": "3.1.0",
     "@types/eslint__js": "^8.42.3",
     "@types/lodash": "^4.17.7",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index baa4c6049..8427e150a 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
 
   .:
     dependencies:
+      '@iconify/vue':
+        specifier: ^4.2.0
+        version: 4.2.0(vue@3.5.13(typescript@5.6.3))
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.0
         version: 6.0.0(@vue/compiler-dom@3.5.13)(eslint@9.16.0(jiti@1.21.6))(rollup@4.28.0)(typescript@5.6.3)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
@@ -29,6 +32,9 @@ importers:
       devicon:
         specifier: ^2.16.0
         version: 2.16.0
+      devicons:
+        specifier: ^1.8.0
+        version: 1.8.0
       dompurify:
         specifier: ^3.2.0
         version: 3.2.2
@@ -59,6 +65,9 @@ importers:
       simple-icons:
         specifier: ^13.5.0
         version: 13.19.0
+      unplugin-icons:
+        specifier: ^0.22.0
+        version: 0.22.0(@vue/compiler-sfc@3.5.13)
       vue:
         specifier: ^3.4.38
         version: 3.5.13(typescript@5.6.3)
@@ -78,6 +87,9 @@ importers:
       '@ianvs/prettier-plugin-sort-imports':
         specifier: ^4.3.1
         version: 4.4.0(@vue/compiler-sfc@3.5.13)(prettier@3.4.1)
+      '@iconify-json/devicon':
+        specifier: ^1.2.9
+        version: 1.2.9
       '@intlify/eslint-plugin-vue-i18n':
         specifier: 3.1.0
         version: 3.1.0(eslint@9.16.0(jiti@1.21.6))
@@ -203,6 +215,9 @@ packages:
       svelte-eslint-parser:
         optional: true
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
   '@antfu/install-pkg@0.5.0':
     resolution: {integrity: sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==}
 
@@ -516,6 +531,20 @@ packages:
       '@vue/compiler-sfc':
         optional: true
 
+  '@iconify-json/devicon@1.2.9':
+    resolution: {integrity: sha512-YwjF7z+ni9jxlDCa5nbivn+CJv1t/NEk1OpVIbF4ehGCtOvJq5zDIkeH3IJJPtD5k+8WmsW8BwWlnapLxehPSg==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.2.1':
+    resolution: {integrity: sha512-0/7J7hk4PqXmxo5PDBDxmnecw5PxklZJfNjIVG9FM0mEfVrvfudS22rYWsqVk6gR3UJ/mSYS90X4R3znXnqfNA==}
+
+  '@iconify/vue@4.2.0':
+    resolution: {integrity: sha512-CMynoz9BDWugDO2B7LU/s8L99dHCiqDGCjCki6bhVx5etZhw9x0BTV7wWRdj82jtl1yQTc+QQRcHQmSvUY6R+g==}
+    peerDependencies:
+      vue: '>=3'
+
   '@intlify/bundle-utils@10.0.0':
     resolution: {integrity: sha512-BR5yLOkF2dzrARTbAg7RGAIPcx9Aark7p1K/0O285F7rfzso9j2dsa+S4dA67clZ0rToZ10NSSTfbyUptVu7Bg==}
     engines: {node: '>= 18'}
@@ -1229,6 +1258,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
@@ -1257,6 +1295,10 @@ packages:
   devicon@2.16.0:
     resolution: {integrity: sha512-PE5a2HBNeN4av+Iu975OiiWEwS8LJPw5HAvlv0JUHb62jZTdYxTpz4ga+cQyvdtb3x1side2P9Sr1mmOmUkO/g==}
 
+  devicons@1.8.0:
+    resolution: {integrity: sha512-tRS3bNxy9mbDVK0g4/+t5PlwMjjOteuh5LAhjMgimAPUgiKB+wCUCf7+uugufZ1vC9AKMRn5Pljbi210qCbmkQ==}
+    engines: {node: '>=0.10.3'}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -2548,10 +2590,37 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
+  unplugin-icons@0.22.0:
+    resolution: {integrity: sha512-CP+iZq5U7doOifer5bcM0jQ9t3Is7EGybIYt3myVxceI8Zuk8EZEpe1NPtJvh7iqMs1VdbK0L41t9+um9VuuLw==}
+    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
+
   unplugin@1.16.0:
     resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@2.1.0:
+    resolution: {integrity: sha512-us4j03/499KhbGP8BU7Hrzrgseo+KdfJYWcbcajCOqsAyb8Gk0Yn2kiUIcZISYCb1JFaZfIuG3b42HmguVOKCQ==}
+    engines: {node: '>=18.12.0'}
+
   update-browserslist-db@1.1.1:
     resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
@@ -2859,6 +2928,11 @@ snapshots:
       - typescript
       - vitest
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.6
+      tinyexec: 0.3.1
+
   '@antfu/install-pkg@0.5.0':
     dependencies:
       package-manager-detector: 0.2.6
@@ -3147,6 +3221,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@iconify-json/devicon@1.2.9':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.2.1':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.4.0
+      globals: 15.13.0
+      kolorist: 1.8.0
+      local-pkg: 0.5.1
+      mlly: 1.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@iconify/vue@4.2.0(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.13(typescript@5.6.3)
+
   '@intlify/bundle-utils@10.0.0(vue-i18n@10.0.5(vue@3.5.13(typescript@5.6.3)))':
     dependencies:
       '@intlify/message-compiler': 11.0.0-beta.2
@@ -3893,6 +3991,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
   decimal.js@10.4.3: {}
 
   decode-named-character-reference@1.0.2:
@@ -3911,6 +4013,8 @@ snapshots:
 
   devicon@2.16.0: {}
 
+  devicons@1.8.0: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -5448,11 +5552,30 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
+  unplugin-icons@0.22.0(@vue/compiler-sfc@3.5.13):
+    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
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.13
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin@1.16.0:
     dependencies:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.1.0:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
       browserslist: 4.24.2
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index b96915fe8..868784bd2 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -10,7 +10,6 @@
   <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="20" />
   <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="20" />
   <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="20" />
-  <SvgIcon v-else-if="name === 'github'" :path="diGithub" size="32" />
   <SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="32" />
   <SvgIcon v-else-if="name === 'settings'" :path="mdiCogOutline" size="32" />
   <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="20" />
@@ -34,7 +33,6 @@
   <SvgIcon v-else-if="name === 'attention'" :path="mdiAlertOctagonOutline" size="20" />
   <SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="20" />
   <SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="20" />
-  <SvgIcon v-else-if="name === 'gitlab'" :path="diGitlab" size="32" />
   <SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="32" />
   <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="20" />
   <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="20" />
@@ -55,7 +53,9 @@
   <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="24" />
   <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="24" />
 
-  <SvgIcon v-else-if="name === 'forgejo'" :path="diForgejo.path" size="32" />
+  <i v-else-if="name === 'forgejo'" class="devicon-forgejo-plain" />
+  <i v-else-if="name === 'github'" class="devicon-github-plain" />
+  <i v-else-if="name === 'gitlab'" class="devicon-gitlab-plain" />
   <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" color="#609926" />
 
   <svg v-else-if="name === 'spinner'" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -82,6 +82,8 @@
 </template>
 
 <script lang="ts" setup>
+import '@iconify/vue';
+
 import {
   mdiAlarm,
   mdiAlertCircle,
@@ -123,7 +125,6 @@ import {
   mdiTimerOutline,
   mdiTrashCanOutline,
 } from '@mdi/js';
-import { diForgejo, diGithub, diGitlab } from 'devicon';
 import { siGitea } from 'simple-icons';
 
 import SvgIcon from './SvgIcon.vue';