diff --git a/web/package.json b/web/package.json
index 6bf67a3441..6cbac01226 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@kyvg/vue3-notification": "^3.2.1",
+    "@mdi/js": "^7.4.47",
     "@vueuse/core": "^10.10.0",
     "ansi_up": "^6.0.2",
     "dayjs": "^1.11.11",
@@ -30,6 +31,7 @@
     "pinia": "^2.1.7",
     "prismjs": "^1.29.0",
     "semver": "^7.6.2",
+    "simple-icons": "^12.3.0",
     "vue": "^3.4.27",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2"
@@ -38,12 +40,10 @@
     "@antfu/eslint-config": "^2.20.0",
     "@eslint/js": "^9.4.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@iconify/json": "^2.2.216",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.13",
     "@types/eslint__js": "^8.42.3",
     "@types/lodash": "^4.17.4",
     "@types/node": "^20.14.2",
-    "@types/node-emoji": "^2.1.0",
     "@types/prismjs": "^1.26.4",
     "@types/semver": "^7.5.8",
     "@types/tinycolor2": "^1.4.6",
@@ -59,8 +59,6 @@
     "tinycolor2": "^1.6.0",
     "typescript": "5.4.5",
     "typescript-eslint": "^7.12.0",
-    "unplugin-icons": "^0.18.5",
-    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.12",
     "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-windicss": "^1.9.3",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 62ea917406..1eb34139a8 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@kyvg/vue3-notification':
         specifier: ^3.2.1
         version: 3.2.1(vue@3.4.31(typescript@5.4.5))
+      '@mdi/js':
+        specifier: ^7.4.47
+        version: 7.4.47
       '@vueuse/core':
         specifier: ^10.10.0
         version: 10.11.0(vue@3.4.31(typescript@5.4.5))
@@ -47,6 +50,9 @@ importers:
       semver:
         specifier: ^7.6.2
         version: 7.6.2
+      simple-icons:
+        specifier: ^12.3.0
+        version: 12.3.0
       vue:
         specifier: ^3.4.27
         version: 3.4.31(typescript@5.4.5)
@@ -66,9 +72,6 @@ importers:
       '@ianvs/prettier-plugin-sort-imports':
         specifier: ^4.2.1
         version: 4.3.0(@vue/compiler-sfc@3.4.31)(prettier@3.3.2)
-      '@iconify/json':
-        specifier: ^2.2.216
-        version: 2.2.225
       '@intlify/eslint-plugin-vue-i18n':
         specifier: 3.0.0-next.13
         version: 3.0.0-next.13(eslint@9.6.0)
@@ -81,9 +84,6 @@ importers:
       '@types/node':
         specifier: ^20.14.2
         version: 20.14.10
-      '@types/node-emoji':
-        specifier: ^2.1.0
-        version: 2.1.0
       '@types/prismjs':
         specifier: ^1.26.4
         version: 1.26.4
@@ -129,12 +129,6 @@ importers:
       typescript-eslint:
         specifier: ^7.12.0
         version: 7.15.0(eslint@9.6.0)(typescript@5.4.5)
-      unplugin-icons:
-        specifier: ^0.18.5
-        version: 0.18.5(@vue/compiler-sfc@3.4.31)(vue-template-compiler@2.7.16)
-      unplugin-vue-components:
-        specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.31(typescript@5.4.5))
       vite:
         specifier: ^5.2.12
         version: 5.3.3(@types/node@20.14.10)(stylus@0.57.0)
@@ -209,9 +203,6 @@ packages:
       svelte-eslint-parser:
         optional: true
 
-  '@antfu/install-pkg@0.1.1':
-    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
-
   '@antfu/install-pkg@0.3.3':
     resolution: {integrity: sha512-nHHsk3NXQ6xkCfiRRC8Nfrg8pU5kkr3P3Y9s9dKqiuRmBD0Yap7fymNDjGFKeWhZQHqqbCS5CfeMy9wtExM24w==}
 
@@ -502,15 +493,6 @@ packages:
       '@vue/compiler-sfc':
         optional: true
 
-  '@iconify/json@2.2.225':
-    resolution: {integrity: sha512-3MxzXdrxDxItlGxvTmLnbZGlvGcwuBIOofJfyobq097lysZasvsNddFguiWecmKP91nRR4I2ik7enFVQ9Lz3mg==}
-
-  '@iconify/types@2.0.0':
-    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-
-  '@iconify/utils@2.1.25':
-    resolution: {integrity: sha512-Y+iGko8uv/Fz5bQLLJyNSZGOdMW0G7cnlEX1CiNcKsRXX9cq/y/vwxrIAtLCZhKHr3m0VJmsjVPsvnM4uX8YLg==}
-
   '@intlify/bundle-utils@8.0.0':
     resolution: {integrity: sha512-1B++zykRnMwQ+20SpsZI1JCnV/YJt9Oq7AGlEurzkWJOFtFAVqaGc/oV36PBRYeiKnTbY9VYfjBimr2Vt42wLQ==}
     engines: {node: '>= 14.16'}
@@ -587,6 +569,9 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  '@mdi/js@7.4.47':
+    resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -754,10 +739,6 @@ packages:
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
 
-  '@types/node-emoji@2.1.0':
-    resolution: {integrity: sha512-LBGWP2LL5A+PpcvzrgXCFcHt9N1l5bqQn05ZUQFFM625k/tmc2w9ghT4kUwQN6gIPlX6qnDOfekmJmV9BywV9g==}
-    deprecated: This is a stub types definition. node-emoji provides its own type definitions, so you do not need this installed.
-
   '@types/node@20.14.10':
     resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==}
 
@@ -1530,10 +1511,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
-
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -1618,10 +1595,6 @@ packages:
   get-func-name@2.0.2:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
 
-  get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-
   get-stream@8.0.1:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
@@ -1703,10 +1676,6 @@ packages:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
 
-  human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-
   human-signals@5.0.0:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
@@ -1794,10 +1763,6 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-
   is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1893,10 +1858,6 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  local-pkg@0.4.3:
-    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
-    engines: {node: '>=14'}
-
   local-pkg@0.5.0:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
@@ -1969,10 +1930,6 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-
   mimic-fn@4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
@@ -2038,10 +1995,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
-
   npm-run-path@5.3.0:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2055,10 +2008,6 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
-  onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
-
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -2346,13 +2295,14 @@ packages:
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-icons@12.3.0:
+    resolution: {integrity: sha512-sJNnw4t1/dsPy9KBQhR/DWrVP5sd0b1GO2axdxn4kZU4xUa53kdc3dzXNrxwbgdJfD+R7dpY2mPaBfZ+cvAPrg==}
+    engines: {node: '>=0.12.18'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -2427,10 +2377,6 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
-  strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-
   strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
@@ -2585,39 +2531,6 @@ packages:
     resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
     engines: {node: '>= 4.0.0'}
 
-  unplugin-icons@0.18.5:
-    resolution: {integrity: sha512-KVNAohXbZ7tVcG1C3p6QaC7wU9Qrj7etv4XvsMMJAxr5LccQZ+Iuv5LOIv/7GtqXaGN1BuFCqRO1ErsHEgEXdQ==}
-    peerDependencies:
-      '@svgr/core': '>=7.0.0'
-      '@svgx/core': ^1.0.1
-      '@vue/compiler-sfc': ^3.0.2 || ^2.7.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
-      vue-template-compiler:
-        optional: true
-      vue-template-es2015-compiler:
-        optional: true
-
-  unplugin-vue-components@0.26.0:
-    resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@babel/parser': ^7.15.8
-      '@nuxt/kit': ^3.2.2
-      vue: 2 || 3
-    peerDependenciesMeta:
-      '@babel/parser':
-        optional: true
-      '@nuxt/kit':
-        optional: true
-
   unplugin@1.11.0:
     resolution: {integrity: sha512-3r7VWZ/webh0SGgJScpWl2/MRCZK5d3ZYFcNaeci/GQ7Teop7zf0Nl2pUuz7G21BwPd9pcUPOC5KmJ2L3WgC5g==}
     engines: {node: '>=14.0.0'}
@@ -2927,11 +2840,6 @@ snapshots:
       - typescript
       - vitest
 
-  '@antfu/install-pkg@0.1.1':
-    dependencies:
-      execa: 5.1.1
-      find-up: 5.0.0
-
   '@antfu/install-pkg@0.3.3':
     dependencies:
       '@jsdevtools/ez-spawn': 3.0.4
@@ -3215,25 +3123,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@iconify/json@2.2.225':
-    dependencies:
-      '@iconify/types': 2.0.0
-      pathe: 1.1.2
-
-  '@iconify/types@2.0.0': {}
-
-  '@iconify/utils@2.1.25':
-    dependencies:
-      '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.10
-      '@iconify/types': 2.0.0
-      debug: 4.3.5
-      kolorist: 1.8.0
-      local-pkg: 0.5.0
-      mlly: 1.7.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@intlify/bundle-utils@8.0.0(vue-i18n@9.13.1(vue@3.4.31(typescript@5.4.5)))':
     dependencies:
       '@intlify/message-compiler': 9.13.1
@@ -3342,6 +3231,8 @@ snapshots:
     dependencies:
       vue: 3.4.31(typescript@5.4.5)
 
+  '@mdi/js@7.4.47': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -3487,10 +3378,6 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.10
 
-  '@types/node-emoji@2.1.0':
-    dependencies:
-      node-emoji: 2.1.3
-
   '@types/node@20.14.10':
     dependencies:
       undici-types: 5.26.5
@@ -4430,18 +4317,6 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  execa@5.1.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 6.0.1
-      human-signals: 2.1.0
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -4531,8 +4406,6 @@ snapshots:
 
   get-func-name@2.0.2: {}
 
-  get-stream@6.0.1: {}
-
   get-stream@8.0.1: {}
 
   get-tsconfig@4.7.5:
@@ -4618,8 +4491,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  human-signals@2.1.0: {}
-
   human-signals@5.0.0: {}
 
   iconv-lite@0.6.3:
@@ -4689,8 +4560,6 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
-  is-stream@2.0.1: {}
-
   is-stream@3.0.0: {}
 
   isexe@2.0.0: {}
@@ -4787,8 +4656,6 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  local-pkg@0.4.3: {}
-
   local-pkg@0.5.0:
     dependencies:
       mlly: 1.7.1
@@ -4864,8 +4731,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mimic-fn@2.1.0: {}
-
   mimic-fn@4.0.0: {}
 
   min-indent@1.0.1: {}
@@ -4925,10 +4790,6 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  npm-run-path@4.0.1:
-    dependencies:
-      path-key: 3.1.1
-
   npm-run-path@5.3.0:
     dependencies:
       path-key: 4.0.0
@@ -4943,10 +4804,6 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
-  onetime@5.1.2:
-    dependencies:
-      mimic-fn: 2.1.0
-
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -5221,10 +5078,10 @@ snapshots:
 
   siginfo@2.0.0: {}
 
-  signal-exit@3.0.7: {}
-
   signal-exit@4.1.0: {}
 
+  simple-icons@12.3.0: {}
+
   sisteransi@1.0.5: {}
 
   skin-tone@2.0.0:
@@ -5293,8 +5150,6 @@ snapshots:
     dependencies:
       ansi-regex: 6.0.1
 
-  strip-final-newline@2.0.0: {}
-
   strip-final-newline@3.0.0: {}
 
   strip-indent@3.0.0:
@@ -5425,40 +5280,6 @@ snapshots:
 
   universalify@0.2.0: {}
 
-  unplugin-icons@0.18.5(@vue/compiler-sfc@3.4.31)(vue-template-compiler@2.7.16):
-    dependencies:
-      '@antfu/install-pkg': 0.3.3
-      '@antfu/utils': 0.7.10
-      '@iconify/utils': 2.1.25
-      debug: 4.3.5
-      kolorist: 1.8.0
-      local-pkg: 0.5.0
-      unplugin: 1.11.0
-    optionalDependencies:
-      '@vue/compiler-sfc': 3.4.31
-      vue-template-compiler: 2.7.16
-    transitivePeerDependencies:
-      - supports-color
-
-  unplugin-vue-components@0.26.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.31(typescript@5.4.5)):
-    dependencies:
-      '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
-      chokidar: 3.6.0
-      debug: 4.3.5
-      fast-glob: 3.3.2
-      local-pkg: 0.4.3
-      magic-string: 0.30.10
-      minimatch: 9.0.5
-      resolve: 1.22.8
-      unplugin: 1.11.0
-      vue: 3.4.31(typescript@5.4.5)
-    optionalDependencies:
-      '@babel/parser': 7.24.7
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-
   unplugin@1.11.0:
     dependencies:
       acorn: 8.12.1
diff --git a/web/src/components/admin/settings/AdminReposTab.vue b/web/src/components/admin/settings/AdminReposTab.vue
index f2d22ebb76..5700026069 100644
--- a/web/src/components/admin/settings/AdminReposTab.vue
+++ b/web/src/components/admin/settings/AdminReposTab.vue
@@ -42,6 +42,7 @@
 import { useI18n } from 'vue-i18n';
 
 import Badge from '~/components/atomic/Badge.vue';
+import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import Settings from '~/components/layout/Settings.vue';
diff --git a/web/src/components/admin/settings/AdminUsersTab.vue b/web/src/components/admin/settings/AdminUsersTab.vue
index 83e439f110..a73eeb33ca 100644
--- a/web/src/components/admin/settings/AdminUsersTab.vue
+++ b/web/src/components/admin/settings/AdminUsersTab.vue
@@ -90,6 +90,7 @@ import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
+import Checkbox from '~/components/form/Checkbox.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
 import Settings from '~/components/layout/Settings.vue';
diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index 9245a324f1..f026b88c20 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -28,7 +28,7 @@
           'bg-wp-control-error-200': color === 'red',
         }"
       >
-        <Icon name="loading" class="animate-spin" />
+        <Icon name="spinner" />
       </div>
     </slot>
   </component>
diff --git a/web/src/components/atomic/Error.vue b/web/src/components/atomic/Error.vue
index 75a1b67f16..30b5ad5b17 100644
--- a/web/src/components/atomic/Error.vue
+++ b/web/src/components/atomic/Error.vue
@@ -10,6 +10,8 @@
 </template>
 
 <script lang="ts" setup>
+import Icon from './Icon.vue';
+
 defineProps<{
   textOnly?: boolean;
   text?: string;
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index 732ed5c51b..ba406fbaee 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -1,63 +1,129 @@
-<!-- cSpell:ignore teenyicons radiobox vaadin twotone iconoir timelapse -->
+<!-- cSpell:ignore radiobox timelapse -->
 <template>
-  <i-ic-sharp-timelapse v-if="name === 'duration'" class="h-6 w-6" />
-  <i-mdi-clock-time-eight-outline v-else-if="name === 'since'" class="h-6 w-6" />
-  <i-mdi-source-branch v-else-if="name === 'push'" class="h-6 w-6" />
-  <i-mdi-source-pull v-else-if="name === 'pull-request'" class="h-6 w-6" />
-  <i-mdi-source-merge v-else-if="name === 'pull-request-closed'" class="h-6 w-6" />
-  <i-mdi-gesture-tap v-else-if="name === 'manual-pipeline'" class="h-6 w-6" />
-  <i-mdi-tag-outline v-else-if="name === 'tag'" class="h-6 w-6" />
-  <i-clarity-deploy-line v-else-if="name === 'deployment'" class="h-6 w-6" />
-  <i-mdi-source-commit v-else-if="name === 'commit'" class="h-6 w-6" />
-  <i-iconoir-arrow-left v-else-if="name === 'back'" class="w-8 h-8" />
-  <i-mdi-github v-else-if="name === 'github'" class="h-8 w-8" />
-  <i-teenyicons-git-solid v-else-if="name === 'repo'" class="h-8 w-8" />
-  <i-clarity-settings-solid v-else-if="name === 'settings'" class="w-8 h-8" />
-  <i-gg-trash v-else-if="name === 'trash'" class="h-6 w-6" />
-  <i-mdi-play v-else-if="name === 'status-blocked'" class="h-6 w-6" />
-  <i-mdi-stop v-else-if="name === 'status-declined'" class="h-6 w-6" />
-  <i-mdi-close-thick
+  <SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="24" />
+  <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="24" />
+  <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="24" />
+  <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="24" />
+  <SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="24" />
+  <SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="24" />
+  <SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="24" />
+  <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="24" />
+  <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="24" />
+  <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="24" />
+  <SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="32" />
+  <SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="32" />
+  <SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="32" />
+  <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="24" />
+  <SvgIcon v-else-if="name === 'status-blocked' || name === 'play'" :path="mdiPlay" size="24" />
+  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStop" size="24" />
+  <SvgIcon
     v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
-    class="h-6 w-6"
+    type="mdi"
+    :path="mdiCloseThick"
+    size="24"
   />
-  <i-mdi-radiobox-blank v-else-if="name === 'status-pending'" class="h-6 w-6" />
-  <i-mdi-radiobox-indeterminate-variant
+  <SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="24" />
+  <SvgIcon
     v-else-if="name === 'status-running' || name === 'status-started'"
-    class="h-6 w-6"
+    type="mdi"
+    :path="mdiRadioboxIndeterminateVariant"
+    size="24"
   />
-  <i-bi-slash-circle-fill v-else-if="name === 'status-skipped'" class="h-6 w-6" />
-  <i-bi-check-circle-fill v-else-if="name === 'status-success'" class="h-6 w-6" />
-  <i-bi-exclamation-triangle-fill v-else-if="name === 'attention'" class="h-5 w-5" />
-  <i-bi-exclamation-triangle v-else-if="name === 'warning'" class="h-5 w-5" />
-  <i-mdi-error-outline v-else-if="name === 'error'" class="h-5 w-5" />
-  <i-simple-icons-gitea v-else-if="name === 'gitea'" class="h-8 w-8" />
-  <i-simple-icons-forgejo v-else-if="name === 'forgejo'" class="h-8 w-8" />
-  <i-ph-gitlab-logo-simple-fill v-else-if="name === 'gitlab'" class="h-8 w-8" />
-  <i-mdi-bitbucket v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" class="h-8 w-8" />
-  <i-vaadin-question-circle-o v-else-if="name === 'question'" class="h-6 w-6" />
-  <i-ic-twotone-add v-else-if="name === 'plus'" class="h-6 w-6" />
-  <i-mdi-format-list-bulleted v-else-if="name === 'list'" class="h-6 w-6" />
-  <i-mdi-loading v-else-if="name === 'loading'" class="h-6 w-6" />
-  <i-ic-baseline-dark-mode v-else-if="name === 'dark'" class="h-6 w-6" />
-  <i-ic-round-light-mode v-else-if="name === 'light'" class="h-6 w-6" />
-  <i-mdi-sync v-else-if="name === 'sync'" class="h-6 w-6" />
-  <i-ic-baseline-healing v-else-if="name === 'heal'" class="h-6 w-6" />
-  <i-bx-bx-power-off v-else-if="name === 'turn-off'" class="h-6 w-6" />
-  <i-mdi-chevron-right v-else-if="name === 'chevron-right'" class="h-6 w-6" />
-  <i-carbon-close-outline v-else-if="name === 'close'" class="h-6 w-6" />
-  <i-ic-baseline-edit v-else-if="name === 'edit'" class="h-6 w-6" />
-  <i-ic-baseline-download-for-offline v-else-if="name === 'download'" class="h-6 w-6" />
-  <i-icon-park-outline-alarm-clock v-else-if="name === 'stopwatch'" class="h-6 w-6" />
-  <i-ic-baseline-file-download v-else-if="name === 'auto-scroll'" class="h-6 w-6" />
-  <i-ic-baseline-file-download-off v-else-if="name === 'auto-scroll-off'" class="h-6 w-6" />
-  <i-teenyicons-refresh-outline v-else-if="name === 'refresh'" class="h-6 w-6" />
-  <i-ic-baseline-play-arrow v-else-if="name === 'play'" class="h-6 w-6" />
-  <i-ic-baseline-pause v-else-if="name === 'pause'" class="h-6 w-6" />
-  <i-svg-spinners-180-ring-with-bg v-else-if="name === 'spinner'" class="h-6 w-6" />
+  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircle" size="24" />
+  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircle" size="24" />
+  <SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="24" />
+  <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="mdiGitlab" size="32" />
+  <SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="32" />
+  <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="24" />
+  <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="24" />
+  <SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="24" />
+  <SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="24" />
+  <SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="24" />
+  <SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="24" />
+  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="24" />
+  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="24" />
+  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="24" />
+  <SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="24" />
+  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="24" />
+  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="24" />
+  <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="24" />
+  <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="24" />
+
+  <SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
+  <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
+
+  <svg v-else-if="name === 'spinner'" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill="currentColor"
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"
+    />
+    <path
+      fill="currentColor"
+      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+    >
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        dur="0.75s"
+        values="0 12 12;360 12 12"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+
   <div v-else-if="name === 'blank'" class="h-6 w-6" />
 </template>
 
 <script lang="ts" setup>
+import {
+  mdiAlarm,
+  mdiAlert,
+  mdiAlertCircle,
+  mdiAlertOutline,
+  mdiArrowLeft,
+  mdiBandage,
+  mdiBitbucket,
+  mdiCheckCircle,
+  mdiChevronRight,
+  mdiClockTimeEightOutline,
+  mdiClose,
+  mdiCloseCircleOutline,
+  mdiCloseThick,
+  mdiCog,
+  mdiDownload,
+  mdiDownloadCircle,
+  mdiDownloadOff,
+  mdiFormatListBulleted,
+  mdiGestureTap,
+  mdiGit,
+  mdiGithub,
+  mdiGitlab,
+  mdiHelpCircleOutline,
+  mdiMinusCircle,
+  mdiPackageVariant,
+  mdiPause,
+  mdiPencil,
+  mdiPlay,
+  mdiPlus,
+  mdiPower,
+  mdiRadioboxBlank,
+  mdiRadioboxIndeterminateVariant,
+  mdiSourceBranch,
+  mdiSourceCommit,
+  mdiSourceMerge,
+  mdiSourcePull,
+  mdiStop,
+  mdiTagOutline,
+  mdiTimelapse,
+  mdiTrashCanOutline,
+} from '@mdi/js';
+import { siForgejo, siGitea } from 'simple-icons';
+
+import SvgIcon from './SvgIcon.vue';
+
 export type IconNames =
   | 'duration'
   | 'since'
@@ -93,9 +159,6 @@ export type IconNames =
   | 'loading'
   | 'plus'
   | 'blank'
-  | 'dark'
-  | 'light'
-  | 'sync'
   | 'heal'
   | 'chevron-right'
   | 'turn-off'
@@ -111,7 +174,8 @@ export type IconNames =
   | 'warning'
   | 'attention'
   | 'spinner'
-  | 'error';
+  | 'error'
+  | 'remove';
 
 defineProps<{
   name: IconNames;
diff --git a/web/src/components/atomic/SvgIcon.vue b/web/src/components/atomic/SvgIcon.vue
new file mode 100644
index 0000000000..a87572ea63
--- /dev/null
+++ b/web/src/components/atomic/SvgIcon.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg fill="currentColor" :width="size" :height="size" viewBox="0 0 24 24">
+    <path :d="path" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  path: string;
+  size: number | string;
+}>();
+</script>
diff --git a/web/src/components/atomic/Warning.vue b/web/src/components/atomic/Warning.vue
index f30885fac4..71171a23b5 100644
--- a/web/src/components/atomic/Warning.vue
+++ b/web/src/components/atomic/Warning.vue
@@ -10,6 +10,8 @@
 </template>
 
 <script lang="ts" setup>
+import Icon from './Icon.vue';
+
 defineProps<{
   textOnly?: boolean;
   text?: string;
diff --git a/web/src/components/layout/popups/DeployPipelinePopup.vue b/web/src/components/layout/popups/DeployPipelinePopup.vue
index 9a4eefea70..c1b25b4ff3 100644
--- a/web/src/components/layout/popups/DeployPipelinePopup.vue
+++ b/web/src/components/layout/popups/DeployPipelinePopup.vue
@@ -33,7 +33,7 @@
                   :title="$t('repo.deploy_pipeline.variables.delete')"
                   @click="deleteVar(i)"
                 >
-                  <i-la-times />
+                  <Icon name="remove" />
                 </Button>
               </div>
             </div>
@@ -50,6 +50,7 @@ import { computed, onMounted, ref, toRef, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
+import Icon from '~/components/atomic/Icon.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
 import Panel from '~/components/layout/Panel.vue';
diff --git a/web/src/components/layout/popups/ManualPipelinePopup.vue b/web/src/components/layout/popups/ManualPipelinePopup.vue
index 49909319f4..4c7ba0e9c3 100644
--- a/web/src/components/layout/popups/ManualPipelinePopup.vue
+++ b/web/src/components/layout/popups/ManualPipelinePopup.vue
@@ -28,7 +28,7 @@
                   :title="$t('repo.manual_pipeline.variables.delete')"
                   @click="deleteVar(i)"
                 >
-                  <i-la-times />
+                  <Icon name="remove" />
                 </Button>
               </div>
             </div>
@@ -45,6 +45,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
+import Icon from '~/components/atomic/Icon.vue';
 import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
 import TextField from '~/components/form/TextField.vue';
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index c31794c66b..22a30eb13a 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -52,6 +52,7 @@
 </template>
 
 <script setup lang="ts">
+import IconButton from '~/components/atomic/IconButton.vue';
 import TextField from '~/components/form/TextField.vue';
 import Container from '~/components/layout/Container.vue';
 
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 75f91a6206..d74cdc0f0e 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -24,6 +24,7 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router';
 
+import Icon from '~/components/atomic/Icon.vue';
 import { useTabsClient, type Tab } from '~/compositions/useTabs';
 
 const router = useRouter();
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/components/user/UserGeneralTab.vue
index 435f8c231c..fea7cc8336 100644
--- a/web/src/components/user/UserGeneralTab.vue
+++ b/web/src/components/user/UserGeneralTab.vue
@@ -23,6 +23,7 @@ import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
 import Settings from '~/components/layout/Settings.vue';
 import { setI18nLanguage } from '~/compositions/useI18n';
diff --git a/web/src/compositions/useTabs.ts b/web/src/compositions/useTabs.ts
index f7bd533eab..a9538979ad 100644
--- a/web/src/compositions/useTabs.ts
+++ b/web/src/compositions/useTabs.ts
@@ -1,10 +1,12 @@
 import { inject, onMounted, provide, ref, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import type { IconNames } from '~/components/atomic/Icon.vue';
+
 export interface Tab {
   id: string;
   title: string;
-  icon?: string;
+  icon?: IconNames;
   iconClass?: string;
 }
 
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index db6ba1ff47..1c58d87e55 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -18,6 +18,7 @@
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/atomic/Button.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
 import UserCLIAndAPITab from '~/components/user/UserCLIAndAPITab.vue';
diff --git a/web/src/views/repo/RepoBranches.vue b/web/src/views/repo/RepoBranches.vue
index 0c607659d9..bc7d5b705a 100644
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@@ -24,7 +24,9 @@
 import { computed, inject, watch, type Ref } from 'vue';
 
 import Badge from '~/components/atomic/Badge.vue';
+import Icon from '~/components/atomic/Icon.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
+import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { usePagination } from '~/compositions/usePaginate';
 import type { Repo } from '~/lib/api/types';
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index 0d06a726d9..123a788ee5 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -51,6 +51,7 @@ import { computed, onMounted, provide, ref, toRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
+import Button from '~/components/atomic/Button.vue';
 import type { IconNames } from '~/components/atomic/Icon.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ManualPipelinePopup from '~/components/layout/popups/ManualPipelinePopup.vue';
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index 214f20226d..f1fe10961b 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -79,6 +79,7 @@ import { useRoute, useRouter } from 'vue-router';
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import Container from '~/components/layout/Container.vue';
+import Panel from '~/components/layout/Panel.vue';
 import PipelineLog from '~/components/repo/pipeline/PipelineLog.vue';
 import PipelineStepList from '~/components/repo/pipeline/PipelineStepList.vue';
 import useApiClient from '~/compositions/useApiClient';
diff --git a/web/src/views/repo/pipeline/PipelineErrors.vue b/web/src/views/repo/pipeline/PipelineErrors.vue
index ae245d87b0..ddf11be905 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -40,6 +40,7 @@
 <script lang="ts" setup>
 import { inject, type Ref } from 'vue';
 
+import Icon from '~/components/atomic/Icon.vue';
 import Panel from '~/components/layout/Panel.vue';
 import type { Pipeline, PipelineError } from '~/lib/api/types';
 
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index a204bf4828..0b95a925dc 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -104,6 +104,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
+import Icon from '~/components/atomic/Icon.vue';
 import DeployPipelinePopup from '~/components/layout/popups/DeployPipelinePopup.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
diff --git a/web/vite.config.ts b/web/vite.config.ts
index cdc9393637..07c6fd9366 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -4,9 +4,6 @@ import process from 'node:process';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import vue from '@vitejs/plugin-vue';
 import { replaceInFileSync } from 'replace-in-file';
-import IconsResolver from 'unplugin-icons/resolver';
-import Icons from 'unplugin-icons/vite';
-import Components from 'unplugin-vue-components/vite';
 import type { Plugin } from 'vite';
 import prismjs from 'vite-plugin-prismjs';
 import WindiCSS from 'vite-plugin-windicss';
@@ -113,11 +110,7 @@ export default defineConfig({
       };
     })(),
     WindiCSS(),
-    Icons({}),
     svgLoader(),
-    Components({
-      resolvers: [IconsResolver()],
-    }),
     externalCSSPlugin(),
     woodpeckerInfoPlugin(),
     prismjs({