From 246e7f39e47fa263f37e98766030f4dca5d40ae7 Mon Sep 17 00:00:00 2001
From: chadmin <chrishancode@gmail.com>
Date: Sun, 27 Oct 2024 10:54:45 -0700
Subject: [PATCH] fix(dependency) Replace @vicons/tabler with @tabler/icons-vue

---
 components.d.ts                               | 12 ----
 package.json                                  |  1 -
 pnpm-lock.yaml                                |  7 --
 scripts/create-tool.mjs                       |  4 +-
 src/components/CollapsibleToolMenu.vue        |  3 +-
 src/components/FavoriteButton.vue             |  3 +-
 src/components/InputCopyable.vue              |  3 +-
 src/components/NavbarButtons.vue              | 10 +--
 src/components/TextareaCopyable.vue           |  4 +-
 src/layouts/base.layout.vue                   | 12 ++--
 .../command-palette/command-palette.store.ts  | 17 ++---
 .../command-palette/command-palette.vue       |  4 +-
 src/pages/404.page.vue                        |  5 +-
 src/pages/Home.page.vue                       |  4 +-
 src/tools/ascii-text-drawer/index.ts          |  4 +-
 src/tools/base64-file-converter/index.ts      |  4 +-
 src/tools/base64-string-converter/index.ts    |  4 +-
 src/tools/basic-auth-generator/index.ts       |  4 +-
 src/tools/bcrypt/index.ts                     |  4 +-
 .../benchmark-builder/benchmark-builder.vue   |  6 +-
 .../benchmark-builder/dynamic-values.vue      |  6 +-
 src/tools/benchmark-builder/index.ts          |  4 +-
 src/tools/bip39-generator/bip39-generator.vue | 12 ++--
 src/tools/bip39-generator/index.ts            |  4 +-
 src/tools/camera-recorder/camera-recorder.vue | 16 ++---
 src/tools/camera-recorder/index.ts            |  4 +-
 src/tools/case-converter/index.ts             |  4 +-
 src/tools/chmod-calculator/index.ts           |  4 +-
 src/tools/chronometer/index.ts                |  4 +-
 src/tools/color-converter/index.ts            |  4 +-
 src/tools/crontab-generator/index.ts          |  4 +-
 src/tools/date-time-converter/index.ts        |  4 +-
 src/tools/device-information/index.ts         |  4 +-
 .../index.ts                                  |  4 +-
 src/tools/email-normalizer/index.ts           |  4 +-
 src/tools/emoji-picker/emoji-picker.vue       |  3 +-
 src/tools/emoji-picker/index.ts               |  4 +-
 src/tools/encryption/index.ts                 |  4 +-
 src/tools/eta-calculator/index.ts             |  4 +-
 src/tools/git-memo/index.ts                   |  4 +-
 src/tools/hash-text/index.ts                  |  4 +-
 src/tools/hmac-generator/index.ts             |  4 +-
 src/tools/html-entities/index.ts              |  4 +-
 .../html-wysiwyg-editor/editor/menu-bar.vue   | 66 +++++++++----------
 src/tools/html-wysiwyg-editor/index.ts        |  4 +-
 src/tools/iban-validator-and-parser/index.ts  |  4 +-
 src/tools/integer-base-converter/index.ts     |  4 +-
 src/tools/ipv4-address-converter/index.ts     |  4 +-
 src/tools/ipv4-range-expander/index.ts        |  4 +-
 .../ipv4-range-expander.vue                   |  4 +-
 src/tools/ipv4-subnet-calculator/index.ts     |  4 +-
 .../ipv4-subnet-calculator.vue                |  6 +-
 src/tools/ipv6-ula-generator/index.ts         |  4 +-
 src/tools/json-diff/index.ts                  |  4 +-
 src/tools/json-minify/index.ts                |  4 +-
 src/tools/json-to-csv/index.ts                |  4 +-
 src/tools/json-to-toml/index.ts               |  4 +-
 src/tools/json-to-xml/index.ts                |  4 +-
 src/tools/json-to-yaml-converter/index.ts     |  4 +-
 src/tools/json-viewer/index.ts                |  4 +-
 src/tools/jwt-parser/index.ts                 |  4 +-
 src/tools/keycode-info/index.ts               |  4 +-
 src/tools/list-converter/index.ts             |  4 +-
 src/tools/lorem-ipsum-generator/index.ts      |  4 +-
 src/tools/mac-address-generator/index.ts      |  4 +-
 src/tools/mac-address-lookup/index.ts         |  4 +-
 src/tools/markdown-to-html/index.ts           |  4 +-
 src/tools/math-evaluator/index.ts             |  4 +-
 src/tools/meta-tag-generator/index.ts         |  4 +-
 src/tools/mime-types/index.ts                 |  4 +-
 .../numeronym-generator.vue                   |  3 +-
 .../otp-code-generator-and-validator/index.ts |  4 +-
 .../otp-code-generator-and-validator.vue      |  3 +-
 src/tools/password-strength-analyser/index.ts |  4 +-
 src/tools/pdf-signature-checker/index.ts      |  4 +-
 src/tools/percentage-calculator/index.ts      |  4 +-
 src/tools/phone-parser-and-formatter/index.ts |  4 +-
 src/tools/qr-code-generator/index.ts          |  4 +-
 src/tools/random-port-generator/index.ts      |  4 +-
 src/tools/regex-memo/index.ts                 |  4 +-
 src/tools/regex-tester/index.ts               |  4 +-
 src/tools/roman-numeral-converter/index.ts    |  4 +-
 src/tools/rsa-key-pair-generator/index.ts     |  4 +-
 src/tools/safelink-decoder/index.ts           |  4 +-
 src/tools/slugify-string/index.ts             |  4 +-
 src/tools/sql-prettify/index.ts               |  4 +-
 src/tools/string-obfuscator/index.ts          |  4 +-
 .../string-obfuscator/string-obfuscator.vue   |  3 +-
 src/tools/svg-placeholder-generator/index.ts  |  4 +-
 src/tools/temperature-converter/index.ts      |  4 +-
 src/tools/text-diff/index.ts                  |  4 +-
 src/tools/text-statistics/index.ts            |  4 +-
 src/tools/text-to-binary/index.ts             |  4 +-
 src/tools/text-to-nato-alphabet/index.ts      |  4 +-
 src/tools/text-to-unicode/index.ts            |  4 +-
 src/tools/token-generator/index.ts            |  4 +-
 src/tools/toml-to-json/index.ts               |  5 +-
 src/tools/toml-to-yaml/index.ts               |  4 +-
 src/tools/ulid-generator/index.ts             |  4 +-
 src/tools/url-encoder/index.ts                |  4 +-
 src/tools/url-parser/index.ts                 |  4 +-
 src/tools/url-parser/url-parser.vue           |  5 +-
 src/tools/user-agent-parser/index.ts          |  4 +-
 .../user-agent-parser/user-agent-parser.vue   | 12 ++--
 src/tools/uuid-generator/index.ts             |  4 +-
 src/tools/wifi-qr-code-generator/index.ts     |  4 +-
 src/tools/xml-formatter/index.ts              |  4 +-
 src/tools/xml-to-json/index.ts                |  4 +-
 src/tools/yaml-to-json-converter/index.ts     |  4 +-
 src/tools/yaml-to-toml/index.ts               |  4 +-
 src/tools/yaml-viewer/index.ts                |  4 +-
 src/ui/c-alert/c-alert.theme.ts               | 12 ++--
 src/ui/c-button/c-button.demo.vue             |  3 +-
 src/ui/c-collapse/c-collapse.vue              |  4 +-
 src/ui/c-input-text/c-input-text.vue          |  7 +-
 src/ui/c-select/c-select.demo.vue             |  4 +-
 src/ui/c-select/c-select.vue                  |  3 +-
 src/ui/c-text-copyable/c-text-copyable.vue    |  5 +-
 118 files changed, 297 insertions(+), 312 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 3e65c3cc5..e67b052f9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -89,18 +89,6 @@ declare module '@vue/runtime-core' {
     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
-    'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
-    'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
-    IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
-    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
-    IconMdiClose: typeof import('~icons/mdi/close')['default']
-    IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
-    IconMdiEye: typeof import('~icons/mdi/eye')['default']
-    IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
-    IconMdiHeart: typeof import('~icons/mdi/heart')['default']
-    IconMdiSearch: typeof import('~icons/mdi/search')['default']
-    IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
-    IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
diff --git a/package.json b/package.json
index 5c991cff6..d75c00f8f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
     "@vicons/material": "^0.12.0",
-    "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3798ae171..a2bd1c268 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,9 +38,6 @@ dependencies:
   '@vicons/material':
     specifier: ^0.12.0
     version: 0.12.0
-  '@vicons/tabler':
-    specifier: ^0.12.0
-    version: 0.12.0
   '@vueuse/core':
     specifier: ^10.3.0
     version: 10.3.0(vue@3.3.4)
@@ -3667,10 +3664,6 @@ packages:
     resolution: {integrity: sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==}
     dev: false
 
-  /@vicons/tabler@0.12.0:
-    resolution: {integrity: sha512-3+wUFuxb7e8OzZ8Wryct1pzfA2vyoF4lwW98O9s27ZrfCGaJGNmqG+q8A7vQ92Mf+COCgxpK+rhNPTtTvaU6qw==}
-    dev: false
-
   /@vitejs/plugin-vue-jsx@3.0.2(vite@4.4.9)(vue@3.3.4):
     resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index 94b702509..f2e12b312 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -46,7 +46,7 @@ createToolFile(
 createToolFile(
   `index.ts`,
   `
-import { ArrowsShuffle } from '@vicons/tabler';
+import { IconArrowsShuffle } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -55,7 +55,7 @@ export const tool = defineTool({
   description: '',
   keywords: ['${toolName.split('-').join("', '")}'],
   component: () => import('./${toolName}.vue'),
-  icon: ArrowsShuffle,
+  icon: IconArrowsShuffle,
   createdAt: new Date('${new Date().toISOString().split('T')[0]}'),
 });
 `,
diff --git a/src/components/CollapsibleToolMenu.vue b/src/components/CollapsibleToolMenu.vue
index 9a73ddd64..4e11f91a8 100644
--- a/src/components/CollapsibleToolMenu.vue
+++ b/src/components/CollapsibleToolMenu.vue
@@ -2,6 +2,7 @@
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { RouterLink, useRoute } from 'vue-router';
+import { IconChevronRight } from '@tabler/icons-vue';
 import MenuIconItem from './MenuIconItem.vue';
 import type { Tool, ToolCategory } from '@/tools/tools.types';
 
@@ -48,7 +49,7 @@ const themeVars = useThemeVars();
   <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
     <div ml-6px mt-12px flex cursor-pointer items-center op-60 @click="toggleCategoryCollapse({ name })">
       <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform>
-        <icon-mdi-chevron-right />
+        <IconChevronRight size="17" />
       </span>
 
       <span ml-8px text-13px>
diff --git a/src/components/FavoriteButton.vue b/src/components/FavoriteButton.vue
index e43ed8ab5..3a67b8b79 100644
--- a/src/components/FavoriteButton.vue
+++ b/src/components/FavoriteButton.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconHeartFilled } from '@tabler/icons-vue';
 import { useToolStore } from '@/tools/tools.store';
 import type { Tool } from '@/tools/tools.types';
 
@@ -32,7 +33,7 @@ function toggleFavorite(event: MouseEvent) {
       :style="{ opacity: isFavorite ? 1 : 0.2 }"
       @click="toggleFavorite"
     >
-      <icon-mdi-heart />
+      <IconHeartFilled size="18" />
     </c-button>
   </c-tooltip>
 </template>
diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue
index a69a039a4..e5f0dab36 100644
--- a/src/components/InputCopyable.vue
+++ b/src/components/InputCopyable.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
+import { IconCopy } from '@tabler/icons-vue';
 import { useCopy } from '@/composable/copy';
 
 const props = defineProps<{ value: string }>();
@@ -15,7 +16,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : 'Copy to cli
     <template #suffix>
       <c-tooltip :tooltip="tooltipText">
         <c-button circle variant="text" size="small" @click="copy()">
-          <icon-mdi-content-copy />
+          <IconCopy size="15" />
         </c-button>
       </c-tooltip>
     </template>
diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 4084526d5..6fc440ef2 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -16,7 +16,7 @@ const { isDarkTheme } = toRefs(styleStore);
       rel="noopener noreferrer"
       :aria-label="$t('home.nav.githubRepository')"
     >
-      <n-icon size="25" :component="IconBrandGithub" />
+      <IconBrandGithub size="25" />
     </c-button>
   </c-tooltip>
 
@@ -29,19 +29,19 @@ const { isDarkTheme } = toRefs(styleStore);
       target="_blank"
       :aria-label="$t('home.nav.twitterXAccount')"
     >
-      <n-icon size="25" :component="IconBrandX" />
+      <IconBrandX size="25" />
     </c-button>
   </c-tooltip>
 
   <c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
     <c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
-      <n-icon size="25" :component="IconInfoCircle" />
+      <IconInfoCircle size="25" />
     </c-button>
   </c-tooltip>
   <c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
     <c-button circle variant="text" :aria-label="$t('home.nav.mode')" @click="() => styleStore.toggleDark()">
-      <n-icon v-if="isDarkTheme" size="25" :component="IconSun" />
-      <n-icon v-else size="25" :component="IconMoon" />
+      <IconSun v-if="isDarkTheme" size="25" />
+      <IconMoon v-else size="25" />
     </c-button>
   </c-tooltip>
 </template>
diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
index 9585177d1..8c299351f 100644
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Copy } from '@vicons/tabler';
+import { IconCopy } from '@tabler/icons-vue';
 import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import jsonHljs from 'highlight.js/lib/languages/json';
@@ -55,7 +55,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
       <div absolute right-10px top-10px>
         <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
           <c-button circle important:h-10 important:w-10 @click="copy()">
-            <n-icon size="22" :component="Copy" />
+            <IconCopy size="20" />
           </c-button>
         </c-tooltip>
       </div>
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index ef5342094..3f94f23e3 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { NIcon, useThemeVars } from 'naive-ui';
+import { useThemeVars } from 'naive-ui';
 
 import { RouterLink } from 'vue-router';
-import { Heart, Home2, Menu2 } from '@vicons/tabler';
+import { IconBrush, IconHeart, IconHome2, IconMenu2 } from '@tabler/icons-vue';
 
 import { storeToRefs } from 'pinia';
 import HeroGradient from '../assets/hero-gradient.svg?component';
@@ -97,18 +97,18 @@ const tools = computed<ToolCategory[]>(() => [
           :aria-label="$t('home.toggleMenu')"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
-          <NIcon size="25" :component="Menu2" />
+          <IconMenu2 size="25" />
         </c-button>
 
         <c-tooltip :tooltip="$t('home.home')" position="bottom">
           <c-button to="/" circle variant="text" :aria-label="$t('home.home')">
-            <NIcon size="25" :component="Home2" />
+            <IconHome2 size="25" />
           </c-button>
         </c-tooltip>
 
         <c-tooltip :tooltip="$t('home.uiLib')" position="bottom">
           <c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
-            <icon-mdi:brush-variant text-20px />
+            <IconBrush />
           </c-button>
         </c-tooltip>
 
@@ -131,7 +131,7 @@ const tools = computed<ToolCategory[]>(() => [
             @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
           >
             {{ $t('home.buyMeACoffee') }}
-            <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
+            <n-icon v-if="!styleStore.isSmallScreen" :component="IconHeart" ml-2 size="14" />
           </c-button>
         </c-tooltip>
       </div>
diff --git a/src/modules/command-palette/command-palette.store.ts b/src/modules/command-palette/command-palette.store.ts
index 1022d26f6..fc7f77f51 100644
--- a/src/modules/command-palette/command-palette.store.ts
+++ b/src/modules/command-palette/command-palette.store.ts
@@ -1,16 +1,11 @@
 import { defineStore } from 'pinia';
 import _ from 'lodash';
+import { IconBrandGithub, IconBug, IconDice5Filled, IconInfoCircle, IconSun } from '@tabler/icons-vue';
 import type { PaletteOption } from './command-palette.types';
 import { useToolStore } from '@/tools/tools.store';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 import { useStyleStore } from '@/stores/style.store';
 
-import SunIcon from '~icons/mdi/white-balance-sunny';
-import GithubIcon from '~icons/mdi/github';
-import BugIcon from '~icons/mdi/bug-outline';
-import DiceIcon from '~icons/mdi/dice-5';
-import InfoIcon from '~icons/mdi/information-outline';
-
 export const useCommandPaletteStore = defineStore('command-palette', () => {
   const toolStore = useToolStore();
   const styleStore = useStyleStore();
@@ -33,7 +28,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
         const { path } = _.sample(toolStore.tools)!;
         router.push(path);
       },
-      icon: DiceIcon,
+      icon: IconDice5Filled,
       category: 'Tools',
       keywords: ['random', 'tool', 'pick', 'choose', 'select'],
       closeOnSelect: true,
@@ -42,7 +37,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       name: 'Toggle dark mode',
       description: 'Toggle dark mode on or off.',
       action: () => styleStore.toggleDark(),
-      icon: SunIcon,
+      icon: IconSun,
       category: 'Actions',
       keywords: ['dark', 'theme', 'toggle', 'mode', 'light', 'system'],
     },
@@ -52,7 +47,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       category: 'External',
       description: 'View the source code of it-tools on Github.',
       keywords: ['github', 'repo', 'repository', 'source', 'code'],
-      icon: GithubIcon,
+      icon: IconBrandGithub,
     },
     {
       name: 'Report a bug or an issue',
@@ -60,7 +55,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       href: 'https://github.com/CorentinTh/it-tools/issues/new/choose',
       category: 'Actions',
       keywords: ['report', 'issue', 'bug', 'problem', 'error'],
-      icon: BugIcon,
+      icon: IconBug,
     },
     {
       name: 'About',
@@ -68,7 +63,7 @@ export const useCommandPaletteStore = defineStore('command-palette', () => {
       to: '/about',
       category: 'Pages',
       keywords: ['about', 'learn', 'more', 'info', 'information'],
-      icon: InfoIcon,
+      icon: IconInfoCircle,
     },
   ];
 
diff --git a/src/modules/command-palette/command-palette.vue b/src/modules/command-palette/command-palette.vue
index bceef5cdc..3236aecc5 100644
--- a/src/modules/command-palette/command-palette.vue
+++ b/src/modules/command-palette/command-palette.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import _ from 'lodash';
+import { IconSearch } from '@tabler/icons-vue';
 import { useCommandPaletteStore } from './command-palette.store';
 import type { PaletteOption } from './command-palette.types';
 
@@ -114,8 +115,7 @@ function activateOption(option: PaletteOption) {
   <div flex-1>
     <c-button w-full important:justify-start @click="isModalOpen = true">
       <span flex items-center gap-3 op-40>
-
-        <icon-mdi-search />
+        <IconSearch size="15px" />
         {{ $t('search.label') }}
 
         <span hidden flex-1 border border-current border-op-40 rounded border-solid px-5px py-3px sm:inline>
diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue
index 20f61c416..1745b5046 100644
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head';
+import { IconFileUnknown } from '@tabler/icons-vue';
 
 useHead({ title: 'Page not found - IT Tools' });
 </script>
 
 <template>
   <div mt-20 flex flex-col items-center>
-    <span text-90px lh-1 op-50>
-      <icon-mdi:kettle-steam-outline />
-    </span>
+    <n-icon lh-1 op50 transition size="95" :component="IconFileUnknown" />
 
     <h1 m-0 mt-3>
       {{ $t('404.notFound') }}
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index fdbccf7e2..7daf1bc73 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -41,7 +41,7 @@ function onUpdateFavoriteTools() {
             :aria-label="$t('home.follow.twitterXAccount')"
           >X</a>.
           {{ $t('home.follow.thankYou') }}
-          <n-icon :component="IconHeart" />
+          <IconHeart size="15" />
         </ColoredCard>
 
         <a href="https://bit.ly/3zBl7DG" target="_blank" rel="noopener" class="text-current decoration-none">
@@ -76,7 +76,7 @@ function onUpdateFavoriteTools() {
           <h3 class="mb-5px mt-25px font-500 text-neutral-400">
             {{ $t('home.categories.favoriteTools') }}
             <c-tooltip :tooltip="$t('home.categories.favoritesDndToolTip')">
-              <n-icon :component="IconDragDrop" size="18" />
+              <IconDragDrop size="18" />
             </c-tooltip>
           </h3>
           <Draggable
diff --git a/src/tools/ascii-text-drawer/index.ts b/src/tools/ascii-text-drawer/index.ts
index cc1ba86ce..f67dc3503 100644
--- a/src/tools/ascii-text-drawer/index.ts
+++ b/src/tools/ascii-text-drawer/index.ts
@@ -1,4 +1,4 @@
-import { Artboard } from '@vicons/tabler';
+import { IconArtboard } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Create ASCII art text with many fonts and styles.',
   keywords: ['ascii', 'asciiart', 'text', 'drawer'],
   component: () => import('./ascii-text-drawer.vue'),
-  icon: Artboard,
+  icon: IconArtboard,
   createdAt: new Date('2024-03-03'),
 });
diff --git a/src/tools/base64-file-converter/index.ts b/src/tools/base64-file-converter/index.ts
index 4d94402ba..179cf594a 100644
--- a/src/tools/base64-file-converter/index.ts
+++ b/src/tools/base64-file-converter/index.ts
@@ -1,4 +1,4 @@
-import { FileDigit } from '@vicons/tabler';
+import { IconFileDigit } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.base64-file-converter.description'),
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-file-converter.vue'),
-  icon: FileDigit,
+  icon: IconFileDigit,
 });
diff --git a/src/tools/base64-string-converter/index.ts b/src/tools/base64-string-converter/index.ts
index e51d54df6..ba03bb4d4 100644
--- a/src/tools/base64-string-converter/index.ts
+++ b/src/tools/base64-string-converter/index.ts
@@ -1,4 +1,4 @@
-import { FileDigit } from '@vicons/tabler';
+import { IconFileDigit } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.base64-string-converter.description'),
   keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
   component: () => import('./base64-string-converter.vue'),
-  icon: FileDigit,
+  icon: IconFileDigit,
   redirectFrom: ['/file-to-base64', '/base64-converter'],
 });
diff --git a/src/tools/basic-auth-generator/index.ts b/src/tools/basic-auth-generator/index.ts
index eff6eae38..d803fc997 100644
--- a/src/tools/basic-auth-generator/index.ts
+++ b/src/tools/basic-auth-generator/index.ts
@@ -1,4 +1,4 @@
-import { PasswordRound } from '@vicons/material';
+import { IconPassword } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -18,5 +18,5 @@ export const tool = defineTool({
     'authorization',
   ],
   component: () => import('./basic-auth-generator.vue'),
-  icon: PasswordRound,
+  icon: IconPassword,
 });
diff --git a/src/tools/bcrypt/index.ts b/src/tools/bcrypt/index.ts
index 9c80c6945..a94aeb833 100644
--- a/src/tools/bcrypt/index.ts
+++ b/src/tools/bcrypt/index.ts
@@ -1,4 +1,4 @@
-import { LockSquare } from '@vicons/tabler';
+import { IconLockSquare } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.bcrypt.description'),
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
-  icon: LockSquare,
+  icon: IconLockSquare,
 });
diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue
index 939114288..d23d10d5c 100644
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Plus, Trash } from '@vicons/tabler';
+import { IconPlus, IconTrash } from '@tabler/icons-vue';
 import { useStorage } from '@vueuse/core';
 import _ from 'lodash';
 
@@ -99,14 +99,14 @@ function copyAsBulletList() {
 
         <div flex justify-center>
           <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
-            <n-icon :component="Trash" depth="3" mr-2 size="18" />
+            <n-icon :component="IconTrash" depth="3" mr-2 size="18" />
             Delete suite
           </c-button>
           <c-button
             variant="text"
             @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
           >
-            <n-icon :component="Plus" depth="3" mr-2 size="18" />
+            <n-icon :component="IconPlus" depth="3" mr-2 size="18" />
             Add suite
           </c-button>
         </div>
diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue
index e048ef99e..06f7ee2d7 100644
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Plus, Trash } from '@vicons/tabler';
+import { IconPlus, IconTrash } from '@tabler/icons-vue';
 import { useTemplateRefsList, useVModel } from '@vueuse/core';
 import { NInputNumber } from 'naive-ui';
 import { nextTick } from 'vue';
@@ -41,13 +41,13 @@ function onInputEnter(index: number) {
       />
       <c-tooltip tooltip="Delete this value">
         <c-button circle variant="text" @click="values.splice(index, 1)">
-          <n-icon :component="Trash" depth="3" size="18" />
+          <n-icon :component="IconTrash" depth="3" size="18" />
         </c-button>
       </c-tooltip>
     </div>
 
     <c-button @click="addValue">
-      <n-icon :component="Plus" depth="3" mr-2 size="18" />
+      <n-icon :component="IconPlus" depth="3" mr-2 size="18" />
       Add a measure
     </c-button>
   </div>
diff --git a/src/tools/benchmark-builder/index.ts b/src/tools/benchmark-builder/index.ts
index 426d287a2..f2b73b85d 100644
--- a/src/tools/benchmark-builder/index.ts
+++ b/src/tools/benchmark-builder/index.ts
@@ -1,4 +1,4 @@
-import { SpeedFilled } from '@vicons/material';
+import { IconBrandSpeedtest } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.benchmark-builder.description'),
   keywords: ['benchmark', 'builder', 'execution', 'duration', 'mean', 'variance'],
   component: () => import('./benchmark-builder.vue'),
-  icon: SpeedFilled,
+  icon: IconBrandSpeedtest,
   createdAt: new Date('2023-04-05'),
 });
diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
index a07941b2c..195eebc6b 100644
--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/src/tools/bip39-generator/bip39-generator.vue
@@ -14,7 +14,7 @@ import {
   portugueseWordList,
   spanishWordList,
 } from '@it-tools/bip39';
-import { Copy, Refresh } from '@vicons/tabler';
+import { IconCopy, IconRefresh } from '@tabler/icons-vue';
 
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
@@ -101,14 +101,10 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
             <c-input-text v-model:value="entropy" placeholder="Your string..." />
 
             <c-button @click="refreshEntropy()">
-              <n-icon size="22">
-                <Refresh />
-              </n-icon>
+              <IconRefresh size="22" />
             </c-button>
             <c-button @click="copyEntropy()">
-              <n-icon size="22">
-                <Copy />
-              </n-icon>
+              <IconCopy size="22" />
             </c-button>
           </n-input-group>
         </n-form-item>
@@ -123,7 +119,7 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
         <c-input-text v-model:value="passphrase" placeholder="Your mnemonic..." raw-text />
 
         <c-button @click="copyPassphrase()">
-          <n-icon size="22" :component="Copy" />
+          <IconCopy size="22" />
         </c-button>
       </n-input-group>
     </n-form-item>
diff --git a/src/tools/bip39-generator/index.ts b/src/tools/bip39-generator/index.ts
index 40582da48..e7bb4adf7 100644
--- a/src/tools/bip39-generator/index.ts
+++ b/src/tools/bip39-generator/index.ts
@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.bip39-generator.description'),
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
 });
diff --git a/src/tools/camera-recorder/camera-recorder.vue b/src/tools/camera-recorder/camera-recorder.vue
index 23fedd8ca..d1b94c9ff 100644
--- a/src/tools/camera-recorder/camera-recorder.vue
+++ b/src/tools/camera-recorder/camera-recorder.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import _ from 'lodash';
-
+import { IconCamera, IconDownload, IconPlayerPauseFilled, IconPlayerPlayFilled, IconPlayerRecordFilled, IconTrash, IconVideo } from '@tabler/icons-vue';
 import { useMediaRecorder } from './useMediaRecorder';
 
 interface Media { type: 'image' | 'video'; value: string; createdAt: Date }
@@ -158,28 +158,28 @@ function downloadMedia({ type, value, createdAt }: Media) {
 
         <div flex items-center justify-between gap-2>
           <c-button :disabled="!isMediaStreamAvailable" @click="takeScreenshot">
-            <span mr-2> <icon-mdi-camera /></span>
+            <span mr-2><IconCamera size="18" /></span>
             Take screenshot
           </c-button>
 
           <div v-if="isRecordingSupported" flex justify-center gap-2>
             <c-button v-if="recordingState === 'stopped'" @click="startRecording">
-              <span mr-2> <icon-mdi-video /></span>
+              <span mr-2><IconVideo size="18" /></span>
               Start recording
             </c-button>
 
             <c-button v-if="recordingState === 'recording'" @click="pauseRecording">
-              <span mr-2> <icon-mdi-pause /></span>
+              <span mr-2><IconPlayerPauseFilled size="17" /></span>
               Pause
             </c-button>
 
             <c-button v-if="recordingState === 'paused'" @click="resumeRecording">
-              <span mr-2> <icon-mdi-play /></span>
+              <span mr-2><IconPlayerPlayFilled size="15" /></span>
               Resume
             </c-button>
 
             <c-button v-if="recordingState !== 'stopped'" type="error" @click="stopRecording">
-              <span mr-2> <icon-mdi-record /></span>
+              <span mr-2><IconPlayerRecordFilled size="15" /></span>
               Stop
             </c-button>
           </div>
@@ -203,11 +203,11 @@ function downloadMedia({ type, value, createdAt }: Media) {
 
           <div flex gap-2>
             <c-button @click="downloadMedia({ type, value, createdAt })">
-              <icon-mdi-download />
+              <IconDownload size="15" />
             </c-button>
 
             <c-button @click="medias = medias.filter((_ignored, i) => i !== index)">
-              <icon-mdi-delete-outline />
+              <IconTrash size="15" />
             </c-button>
           </div>
         </div>
diff --git a/src/tools/camera-recorder/index.ts b/src/tools/camera-recorder/index.ts
index 5cda41f36..ef61667d1 100644
--- a/src/tools/camera-recorder/index.ts
+++ b/src/tools/camera-recorder/index.ts
@@ -1,4 +1,4 @@
-import { Camera } from '@vicons/tabler';
+import { IconCamera } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.camera-recorder.description'),
   keywords: ['camera', 'recoder'],
   component: () => import('./camera-recorder.vue'),
-  icon: Camera,
+  icon: IconCamera,
   createdAt: new Date('2023-05-15'),
 });
diff --git a/src/tools/case-converter/index.ts b/src/tools/case-converter/index.ts
index 14d7ec128..e41aa0b8a 100644
--- a/src/tools/case-converter/index.ts
+++ b/src/tools/case-converter/index.ts
@@ -1,4 +1,4 @@
-import { LetterCaseToggle } from '@vicons/tabler';
+import { IconLetterCaseToggle } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,5 +22,5 @@ export const tool = defineTool({
     'snakeCase',
   ],
   component: () => import('./case-converter.vue'),
-  icon: LetterCaseToggle,
+  icon: IconLetterCaseToggle,
 });
diff --git a/src/tools/chmod-calculator/index.ts b/src/tools/chmod-calculator/index.ts
index e6b39df80..3dda5c9de 100644
--- a/src/tools/chmod-calculator/index.ts
+++ b/src/tools/chmod-calculator/index.ts
@@ -1,4 +1,4 @@
-import { FileInvoice } from '@vicons/tabler';
+import { IconFileInvoice } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -19,5 +19,5 @@ export const tool = defineTool({
     'octal',
   ],
   component: () => import('./chmod-calculator.vue'),
-  icon: FileInvoice,
+  icon: IconFileInvoice,
 });
diff --git a/src/tools/chronometer/index.ts b/src/tools/chronometer/index.ts
index d7d8196ae..a656130a1 100644
--- a/src/tools/chronometer/index.ts
+++ b/src/tools/chronometer/index.ts
@@ -1,4 +1,4 @@
-import { TimerOutlined } from '@vicons/material';
+import { IconStopwatch } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.chronometer.description'),
   keywords: ['chronometer', 'time', 'lap', 'duration', 'measure', 'pause', 'resume', 'stopwatch'],
   component: () => import('./chronometer.vue'),
-  icon: TimerOutlined,
+  icon: IconStopwatch,
 });
diff --git a/src/tools/color-converter/index.ts b/src/tools/color-converter/index.ts
index 9a295e2b5..2825f8ab4 100644
--- a/src/tools/color-converter/index.ts
+++ b/src/tools/color-converter/index.ts
@@ -1,4 +1,4 @@
-import { Palette } from '@vicons/tabler';
+import { IconPalette } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.color-converter.description'),
   keywords: ['color', 'converter'],
   component: () => import('./color-converter.vue'),
-  icon: Palette,
+  icon: IconPalette,
   redirectFrom: ['/color-picker-converter'],
 });
diff --git a/src/tools/crontab-generator/index.ts b/src/tools/crontab-generator/index.ts
index 429d6e143..29d7aa957 100644
--- a/src/tools/crontab-generator/index.ts
+++ b/src/tools/crontab-generator/index.ts
@@ -1,4 +1,4 @@
-import { Alarm } from '@vicons/tabler';
+import { IconAlarm } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,5 +22,5 @@ export const tool = defineTool({
     'second',
   ],
   component: () => import('./crontab-generator.vue'),
-  icon: Alarm,
+  icon: IconAlarm,
 });
diff --git a/src/tools/date-time-converter/index.ts b/src/tools/date-time-converter/index.ts
index b0413fc09..944676a80 100644
--- a/src/tools/date-time-converter/index.ts
+++ b/src/tools/date-time-converter/index.ts
@@ -1,4 +1,4 @@
-import { Calendar } from '@vicons/tabler';
+import { IconCalendar } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.date-converter.description'),
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
-  icon: Calendar,
+  icon: IconCalendar,
 });
diff --git a/src/tools/device-information/index.ts b/src/tools/device-information/index.ts
index 44d91598c..0699277f9 100644
--- a/src/tools/device-information/index.ts
+++ b/src/tools/device-information/index.ts
@@ -1,4 +1,4 @@
-import { DeviceDesktop } from '@vicons/tabler';
+import { IconDeviceDesktop } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -20,5 +20,5 @@ export const tool = defineTool({
     'agent',
   ],
   component: () => import('./device-information.vue'),
-  icon: DeviceDesktop,
+  icon: IconDeviceDesktop,
 });
diff --git a/src/tools/docker-run-to-docker-compose-converter/index.ts b/src/tools/docker-run-to-docker-compose-converter/index.ts
index 0ecc4b0b8..7a031c184 100644
--- a/src/tools/docker-run-to-docker-compose-converter/index.ts
+++ b/src/tools/docker-run-to-docker-compose-converter/index.ts
@@ -1,4 +1,4 @@
-import { BrandDocker } from '@vicons/tabler';
+import { IconBrandDocker } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.docker-run-to-docker-compose-converter.description'),
   keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
   component: () => import('./docker-run-to-docker-compose-converter.vue'),
-  icon: BrandDocker,
+  icon: IconBrandDocker,
 });
diff --git a/src/tools/email-normalizer/index.ts b/src/tools/email-normalizer/index.ts
index 299a30f73..38974f934 100644
--- a/src/tools/email-normalizer/index.ts
+++ b/src/tools/email-normalizer/index.ts
@@ -1,4 +1,4 @@
-import { Mail } from '@vicons/tabler';
+import { IconMail } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Normalize email addresses to a standard format for easier comparison. Useful for deduplication and data cleaning.',
   keywords: ['email', 'normalizer'],
   component: () => import('./email-normalizer.vue'),
-  icon: Mail,
+  icon: IconMail,
   createdAt: new Date('2024-08-15'),
 });
diff --git a/src/tools/emoji-picker/emoji-picker.vue b/src/tools/emoji-picker/emoji-picker.vue
index a12b10c2f..45463c12b 100644
--- a/src/tools/emoji-picker/emoji-picker.vue
+++ b/src/tools/emoji-picker/emoji-picker.vue
@@ -2,6 +2,7 @@
 import emojiUnicodeData from 'unicode-emoji-json';
 import emojiKeywords from 'emojilib';
 import _ from 'lodash';
+import { IconSearch } from '@tabler/icons-vue';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 import useDebouncedRef from '@/composable/debouncedref';
@@ -47,7 +48,7 @@ const { searchResult } = useFuzzySearch({
         mx-auto max-w-600px
       >
         <template #prefix>
-          <icon-mdi-search mr-6px color-black op-70 dark:color-white />
+          <n-icon :component="IconSearch" mr-6px color-black op-70 dark:color-white />
         </template>
       </c-input-text>
     </div>
diff --git a/src/tools/emoji-picker/index.ts b/src/tools/emoji-picker/index.ts
index 3a28cf0f1..adad179ab 100644
--- a/src/tools/emoji-picker/index.ts
+++ b/src/tools/emoji-picker/index.ts
@@ -1,4 +1,4 @@
-import { MoodSmile } from '@vicons/tabler';
+import { IconMoodSmile } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.emoji-picker.description'),
   keywords: ['emoji', 'picker', 'unicode', 'copy', 'paste'],
   component: () => import('./emoji-picker.vue'),
-  icon: MoodSmile,
+  icon: IconMoodSmile,
   createdAt: new Date('2023-08-07'),
 });
diff --git a/src/tools/encryption/index.ts b/src/tools/encryption/index.ts
index c8dd85dbf..96cab20a5 100644
--- a/src/tools/encryption/index.ts
+++ b/src/tools/encryption/index.ts
@@ -1,4 +1,4 @@
-import { Lock } from '@vicons/tabler';
+import { IconLock } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.encryption.description'),
   keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
   component: () => import('./encryption.vue'),
-  icon: Lock,
+  icon: IconLock,
   redirectFrom: ['/cypher'],
 });
diff --git a/src/tools/eta-calculator/index.ts b/src/tools/eta-calculator/index.ts
index 5016ab666..534022951 100644
--- a/src/tools/eta-calculator/index.ts
+++ b/src/tools/eta-calculator/index.ts
@@ -1,4 +1,4 @@
-import { Hourglass } from '@vicons/tabler';
+import { IconHourglass } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.eta-calculator.description'),
   keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
   component: () => import('./eta-calculator.vue'),
-  icon: Hourglass,
+  icon: IconHourglass,
 });
diff --git a/src/tools/git-memo/index.ts b/src/tools/git-memo/index.ts
index f65ffe074..542cb9f01 100644
--- a/src/tools/git-memo/index.ts
+++ b/src/tools/git-memo/index.ts
@@ -1,4 +1,4 @@
-import { BrandGit } from '@vicons/tabler';
+import { IconBrandGit } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.git-memo.description'),
   keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
   component: () => import('./git-memo.vue'),
-  icon: BrandGit,
+  icon: IconBrandGit,
 });
diff --git a/src/tools/hash-text/index.ts b/src/tools/hash-text/index.ts
index 2070e41d1..2a91cb507 100644
--- a/src/tools/hash-text/index.ts
+++ b/src/tools/hash-text/index.ts
@@ -1,4 +1,4 @@
-import { EyeOff } from '@vicons/tabler';
+import { IconEyeOff } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,6 +22,6 @@ export const tool = defineTool({
     'RIPEMD160',
   ],
   component: () => import('./hash-text.vue'),
-  icon: EyeOff,
+  icon: IconEyeOff,
   redirectFrom: ['/hash'],
 });
diff --git a/src/tools/hmac-generator/index.ts b/src/tools/hmac-generator/index.ts
index 3500684e3..f574dd05e 100644
--- a/src/tools/hmac-generator/index.ts
+++ b/src/tools/hmac-generator/index.ts
@@ -1,4 +1,4 @@
-import { ShortTextRound } from '@vicons/material';
+import { IconSquareKey } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.hmac-generator.description'),
   keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
   component: () => import('./hmac-generator.vue'),
-  icon: ShortTextRound,
+  icon: IconSquareKey,
 });
diff --git a/src/tools/html-entities/index.ts b/src/tools/html-entities/index.ts
index e292f087e..d4d4563b4 100644
--- a/src/tools/html-entities/index.ts
+++ b/src/tools/html-entities/index.ts
@@ -1,4 +1,4 @@
-import { Code } from '@vicons/tabler';
+import { IconCode } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.html-entities.description'),
   keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
   component: () => import('./html-entities.vue'),
-  icon: Code,
+  icon: IconCode,
 });
diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
index 9069673c6..8f708f172 100644
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { Editor } from '@tiptap/vue-3';
 import {
-  ArrowBack,
-  ArrowForwardUp,
-  Blockquote,
-  Bold,
-  ClearFormatting,
-  Code,
-  CodePlus,
-  H1,
-  H2,
-  H3,
-  H4,
-  Italic,
-  List,
-  ListNumbers,
-  Strikethrough,
-  TextWrap,
-} from '@vicons/tabler';
+  IconArrowBack,
+  IconArrowForwardUp,
+  IconBlockquote,
+  IconBold,
+  IconClearFormatting,
+  IconCode,
+  IconCodePlus,
+  IconH1,
+  IconH2,
+  IconH3,
+  IconH4,
+  IconItalic,
+  IconList,
+  IconListNumbers,
+  IconStrikethrough,
+  IconTextWrap,
+} from '@tabler/icons-vue';
 import type { Component } from 'vue';
 import MenuBarItem from './menu-bar-item.vue';
 
@@ -37,28 +37,28 @@ type MenuItem =
 const items: MenuItem[] = [
   {
     type: 'button',
-    icon: Bold,
+    icon: IconBold,
     title: 'Bold',
     action: () => editor.value.chain().focus().toggleBold().run(),
     isActive: () => editor.value.isActive('bold'),
   },
   {
     type: 'button',
-    icon: Italic,
+    icon: IconItalic,
     title: 'Italic',
     action: () => editor.value.chain().focus().toggleItalic().run(),
     isActive: () => editor.value.isActive('italic'),
   },
   {
     type: 'button',
-    icon: Strikethrough,
+    icon: IconStrikethrough,
     title: 'Strike',
     action: () => editor.value.chain().focus().toggleStrike().run(),
     isActive: () => editor.value.isActive('strike'),
   },
   {
     type: 'button',
-    icon: Code,
+    icon: IconCode,
     title: 'Inline code',
     action: () => editor.value.chain().focus().toggleCode().run(),
     isActive: () => editor.value.isActive('code'),
@@ -68,28 +68,28 @@ const items: MenuItem[] = [
   },
   {
     type: 'button',
-    icon: H1,
+    icon: IconH1,
     title: 'Heading 1',
     action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 1 }),
   },
   {
     type: 'button',
-    icon: H2,
+    icon: IconH2,
     title: 'Heading 2',
     action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 2 }),
   },
   {
     type: 'button',
-    icon: H3,
+    icon: IconH3,
     title: 'Heading 3',
     action: () => editor.value.chain().focus().toggleHeading({ level: 3 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 3 }),
   },
   {
     type: 'button',
-    icon: H4,
+    icon: IconH4,
     title: 'Heading 4',
     action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 4 }),
@@ -99,21 +99,21 @@ const items: MenuItem[] = [
   },
   {
     type: 'button',
-    icon: List,
+    icon: IconList,
     title: 'Bullet list',
     action: () => editor.value.chain().focus().toggleBulletList().run(),
     isActive: () => editor.value.isActive('bulletList'),
   },
   {
     type: 'button',
-    icon: ListNumbers,
+    icon: IconListNumbers,
     title: 'Ordered list',
     action: () => editor.value.chain().focus().toggleOrderedList().run(),
     isActive: () => editor.value.isActive('orderedList'),
   },
   {
     type: 'button',
-    icon: CodePlus,
+    icon: IconCodePlus,
     title: 'Code block',
     action: () => editor.value.chain().focus().toggleCodeBlock().run(),
     isActive: () => editor.value.isActive('codeBlock'),
@@ -121,7 +121,7 @@ const items: MenuItem[] = [
 
   {
     type: 'button',
-    icon: Blockquote,
+    icon: IconBlockquote,
     title: 'Blockquote',
     action: () => editor.value.chain().focus().toggleBlockquote().run(),
     isActive: () => editor.value.isActive('blockquote'),
@@ -131,26 +131,26 @@ const items: MenuItem[] = [
   },
   {
     type: 'button',
-    icon: TextWrap,
+    icon: IconTextWrap,
     title: 'Hard break',
     action: () => editor.value.chain().focus().setHardBreak().run(),
   },
   {
     type: 'button',
-    icon: ClearFormatting,
+    icon: IconClearFormatting,
     title: 'Clear format',
     action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
   },
 
   {
     type: 'button',
-    icon: ArrowBack,
+    icon: IconArrowBack,
     title: 'Undo',
     action: () => editor.value.chain().focus().undo().run(),
   },
   {
     type: 'button',
-    icon: ArrowForwardUp,
+    icon: IconArrowForwardUp,
     title: 'Redo',
     action: () => editor.value.chain().focus().redo().run(),
   },
diff --git a/src/tools/html-wysiwyg-editor/index.ts b/src/tools/html-wysiwyg-editor/index.ts
index 3a2ab0077..c44017d52 100644
--- a/src/tools/html-wysiwyg-editor/index.ts
+++ b/src/tools/html-wysiwyg-editor/index.ts
@@ -1,4 +1,4 @@
-import { Edit } from '@vicons/tabler';
+import { IconEdit } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.html-wysiwyg-editor.description'),
   keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
   component: () => import('./html-wysiwyg-editor.vue'),
-  icon: Edit,
+  icon: IconEdit,
 });
diff --git a/src/tools/iban-validator-and-parser/index.ts b/src/tools/iban-validator-and-parser/index.ts
index ff7ff135b..e592755bb 100644
--- a/src/tools/iban-validator-and-parser/index.ts
+++ b/src/tools/iban-validator-and-parser/index.ts
@@ -1,6 +1,6 @@
+import { IconBuildingBank } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import Bank from '~icons/mdi/bank';
 
 export const tool = defineTool({
   name: translate('tools.iban-validator-and-parser.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.iban-validator-and-parser.description'),
   keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'],
   component: () => import('./iban-validator-and-parser.vue'),
-  icon: Bank,
+  icon: IconBuildingBank,
   createdAt: new Date('2023-08-26'),
 });
diff --git a/src/tools/integer-base-converter/index.ts b/src/tools/integer-base-converter/index.ts
index f60d996d1..4b42c374b 100644
--- a/src/tools/integer-base-converter/index.ts
+++ b/src/tools/integer-base-converter/index.ts
@@ -1,4 +1,4 @@
-import { ArrowsLeftRight } from '@vicons/tabler';
+import { IconArrowsLeftRight } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.base-converter.description'),
   keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
-  icon: ArrowsLeftRight,
+  icon: IconArrowsLeftRight,
 });
diff --git a/src/tools/ipv4-address-converter/index.ts b/src/tools/ipv4-address-converter/index.ts
index 66ae03a3e..2c870620e 100644
--- a/src/tools/ipv4-address-converter/index.ts
+++ b/src/tools/ipv4-address-converter/index.ts
@@ -1,4 +1,4 @@
-import { Binary } from '@vicons/tabler';
+import { IconBinary } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.ipv4-address-converter.description'),
   keywords: ['ipv4', 'address', 'converter', 'decimal', 'hexadecimal', 'binary', 'ipv6'],
   component: () => import('./ipv4-address-converter.vue'),
-  icon: Binary,
+  icon: IconBinary,
   createdAt: new Date('2023-04-08'),
 });
diff --git a/src/tools/ipv4-range-expander/index.ts b/src/tools/ipv4-range-expander/index.ts
index 49dfae951..e107b867d 100644
--- a/src/tools/ipv4-range-expander/index.ts
+++ b/src/tools/ipv4-range-expander/index.ts
@@ -1,4 +1,4 @@
-import { UnfoldMoreOutlined } from '@vicons/material';
+import { IconArrowsMoveVertical } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.ipv4-range-expander.description'),
   keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
   component: () => import('./ipv4-range-expander.vue'),
-  icon: UnfoldMoreOutlined,
+  icon: IconArrowsMoveVertical,
   createdAt: new Date('2023-04-19'),
 });
diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
index 6eb3c922e..5101c7380 100644
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Exchange } from '@vicons/tabler';
+import { IconExchange } from '@tabler/icons-vue';
 import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
 import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
 import { calculateCidr } from './ipv4-range-expander.service';
@@ -111,7 +111,7 @@ function onSwitchStartEndClicked() {
       </div>
 
       <c-button @click="onSwitchStartEndClicked">
-        <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+        <n-icon mr-2 :component="IconExchange" depth="3" size="22" />
         Switch start and end IPv4 address
       </c-button>
     </n-alert>
diff --git a/src/tools/ipv4-subnet-calculator/index.ts b/src/tools/ipv4-subnet-calculator/index.ts
index 1bae72824..011d04077 100644
--- a/src/tools/ipv4-subnet-calculator/index.ts
+++ b/src/tools/ipv4-subnet-calculator/index.ts
@@ -1,4 +1,4 @@
-import { RouterOutlined } from '@vicons/material';
+import { IconRouter } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.ipv4-subnet-calculator.description'),
   keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'],
   component: () => import('./ipv4-subnet-calculator.vue'),
-  icon: RouterOutlined,
+  icon: IconRouter,
 });
diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
index 3e2f43786..22a57eadd 100644
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Netmask } from 'netmask';
 import { useStorage } from '@vueuse/core';
-import { ArrowLeft, ArrowRight } from '@vicons/tabler';
+import { IconArrowLeft, IconArrowRight } from '@tabler/icons-vue';
 import { getIPClass } from './ipv4-subnet-calculator.models';
 import { withDefaultOnError } from '@/utils/defaults';
 import { isNotThrowing } from '@/utils/boolean';
@@ -111,12 +111,12 @@ function switchToBlock({ count = 1 }: { count?: number }) {
 
       <div mt-3 flex items-center justify-between>
         <c-button @click="switchToBlock({ count: -1 })">
-          <n-icon :component="ArrowLeft" />
+          <IconArrowLeft size="15" />
           Previous block
         </c-button>
         <c-button @click="switchToBlock({ count: 1 })">
           Next block
-          <n-icon :component="ArrowRight" />
+          <IconArrowRight size="15" />
         </c-button>
       </div>
     </div>
diff --git a/src/tools/ipv6-ula-generator/index.ts b/src/tools/ipv6-ula-generator/index.ts
index 51bfd6fcd..9f08c6d73 100644
--- a/src/tools/ipv6-ula-generator/index.ts
+++ b/src/tools/ipv6-ula-generator/index.ts
@@ -1,4 +1,4 @@
-import { BuildingFactory } from '@vicons/tabler';
+import { IconBuildingFactory } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.ipv6-ula-generator.description'),
   keywords: ['ipv6', 'ula', 'generator', 'rfc4193', 'network', 'private'],
   component: () => import('./ipv6-ula-generator.vue'),
-  icon: BuildingFactory,
+  icon: IconBuildingFactory,
   createdAt: new Date('2023-04-09'),
 });
diff --git a/src/tools/json-diff/index.ts b/src/tools/json-diff/index.ts
index a4c0319c0..4f9807ba3 100644
--- a/src/tools/json-diff/index.ts
+++ b/src/tools/json-diff/index.ts
@@ -1,4 +1,4 @@
-import { CompareArrowsRound } from '@vicons/material';
+import { IconArrowsDiff } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.json-diff.description'),
   keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
   component: () => import('./json-diff.vue'),
-  icon: CompareArrowsRound,
+  icon: IconArrowsDiff,
   createdAt: new Date('2023-04-20'),
 });
diff --git a/src/tools/json-minify/index.ts b/src/tools/json-minify/index.ts
index fbe5831b5..11cd9f829 100644
--- a/src/tools/json-minify/index.ts
+++ b/src/tools/json-minify/index.ts
@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.json-minify.description'),
   keywords: ['json', 'minify', 'format'],
   component: () => import('./json-minify.vue'),
-  icon: Braces,
+  icon: IconBraces,
 });
diff --git a/src/tools/json-to-csv/index.ts b/src/tools/json-to-csv/index.ts
index 9f38b82fc..e77c4bb9b 100644
--- a/src/tools/json-to-csv/index.ts
+++ b/src/tools/json-to-csv/index.ts
@@ -1,4 +1,4 @@
-import { List } from '@vicons/tabler';
+import { IconList } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.json-to-csv.description'),
   keywords: ['json', 'to', 'csv', 'convert'],
   component: () => import('./json-to-csv.vue'),
-  icon: List,
+  icon: IconList,
   createdAt: new Date('2023-06-18'),
 });
diff --git a/src/tools/json-to-toml/index.ts b/src/tools/json-to-toml/index.ts
index da42c18d9..1273b89c6 100644
--- a/src/tools/json-to-toml/index.ts
+++ b/src/tools/json-to-toml/index.ts
@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.json-to-toml.description'),
   keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
   component: () => import('./json-to-toml.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2023-06-23'),
 });
diff --git a/src/tools/json-to-xml/index.ts b/src/tools/json-to-xml/index.ts
index c35ace2bb..3d11ba716 100644
--- a/src/tools/json-to-xml/index.ts
+++ b/src/tools/json-to-xml/index.ts
@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Convert JSON to XML',
   keywords: ['json', 'xml'],
   component: () => import('./json-to-xml.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2024-08-09'),
 });
diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts
index c01e3ec02..6e2be36cc 100644
--- a/src/tools/json-to-yaml-converter/index.ts
+++ b/src/tools/json-to-yaml-converter/index.ts
@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.json-to-yaml-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./json-to-yaml.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2023-04-10'),
 });
diff --git a/src/tools/json-viewer/index.ts b/src/tools/json-viewer/index.ts
index bc4882455..c9a46f8b4 100644
--- a/src/tools/json-viewer/index.ts
+++ b/src/tools/json-viewer/index.ts
@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.json-prettify.description'),
   keywords: ['json', 'viewer', 'prettify', 'format'],
   component: () => import('./json-viewer.vue'),
-  icon: Braces,
+  icon: IconBraces,
   redirectFrom: ['/json-viewer'],
 });
diff --git a/src/tools/jwt-parser/index.ts b/src/tools/jwt-parser/index.ts
index 939b4b34a..59b79f2e0 100644
--- a/src/tools/jwt-parser/index.ts
+++ b/src/tools/jwt-parser/index.ts
@@ -1,4 +1,4 @@
-import { Key } from '@vicons/tabler';
+import { IconKey } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -24,5 +24,5 @@ export const tool = defineTool({
     'token',
   ],
   component: () => import('./jwt-parser.vue'),
-  icon: Key,
+  icon: IconKey,
 });
diff --git a/src/tools/keycode-info/index.ts b/src/tools/keycode-info/index.ts
index a2f36562f..782a2fb39 100644
--- a/src/tools/keycode-info/index.ts
+++ b/src/tools/keycode-info/index.ts
@@ -1,4 +1,4 @@
-import { Keyboard } from '@vicons/tabler';
+import { IconKeyboard } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -23,5 +23,5 @@ export const tool = defineTool({
     'shift',
   ],
   component: () => import('./keycode-info.vue'),
-  icon: Keyboard,
+  icon: IconKeyboard,
 });
diff --git a/src/tools/list-converter/index.ts b/src/tools/list-converter/index.ts
index 9ae7c512c..1029746ba 100644
--- a/src/tools/list-converter/index.ts
+++ b/src/tools/list-converter/index.ts
@@ -1,4 +1,4 @@
-import { List } from '@vicons/tabler';
+import { IconList } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.list-converter.description'),
   keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
   component: () => import('./list-converter.vue'),
-  icon: List,
+  icon: IconList,
   createdAt: new Date('2023-05-07'),
 });
diff --git a/src/tools/lorem-ipsum-generator/index.ts b/src/tools/lorem-ipsum-generator/index.ts
index 2634d9e0c..bc6c3f0ce 100644
--- a/src/tools/lorem-ipsum-generator/index.ts
+++ b/src/tools/lorem-ipsum-generator/index.ts
@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.lorem-ipsum-generator.description'),
   keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
   component: () => import('./lorem-ipsum-generator.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
 });
diff --git a/src/tools/mac-address-generator/index.ts b/src/tools/mac-address-generator/index.ts
index 3106bcec8..de7bc402d 100644
--- a/src/tools/mac-address-generator/index.ts
+++ b/src/tools/mac-address-generator/index.ts
@@ -1,4 +1,4 @@
-import { Devices } from '@vicons/tabler';
+import { IconDevices } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.mac-address-generator.description'),
   keywords: ['mac', 'address', 'generator', 'random', 'prefix'],
   component: () => import('./mac-address-generator.vue'),
-  icon: Devices,
+  icon: IconDevices,
   createdAt: new Date('2023-11-31'),
 });
diff --git a/src/tools/mac-address-lookup/index.ts b/src/tools/mac-address-lookup/index.ts
index 367bcebb7..dfdbfccbb 100644
--- a/src/tools/mac-address-lookup/index.ts
+++ b/src/tools/mac-address-lookup/index.ts
@@ -1,4 +1,4 @@
-import { Devices } from '@vicons/tabler';
+import { IconDevices } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.mac-address-lookup.description'),
   keywords: ['mac', 'address', 'lookup', 'vendor', 'parser', 'manufacturer'],
   component: () => import('./mac-address-lookup.vue'),
-  icon: Devices,
+  icon: IconDevices,
   createdAt: new Date('2023-04-06'),
 });
diff --git a/src/tools/markdown-to-html/index.ts b/src/tools/markdown-to-html/index.ts
index 73a6cfb33..18cf1fec7 100644
--- a/src/tools/markdown-to-html/index.ts
+++ b/src/tools/markdown-to-html/index.ts
@@ -1,4 +1,4 @@
-import { Markdown } from '@vicons/tabler';
+import { IconMarkdown } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Convert Markdown to Html and allow to print (as PDF)',
   keywords: ['markdown', 'html', 'converter', 'pdf'],
   component: () => import('./markdown-to-html.vue'),
-  icon: Markdown,
+  icon: IconMarkdown,
   createdAt: new Date('2024-08-25'),
 });
diff --git a/src/tools/math-evaluator/index.ts b/src/tools/math-evaluator/index.ts
index eb4290ba4..3c85d7e99 100644
--- a/src/tools/math-evaluator/index.ts
+++ b/src/tools/math-evaluator/index.ts
@@ -1,4 +1,4 @@
-import { Math } from '@vicons/tabler';
+import { IconMath } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -40,5 +40,5 @@ export const tool = defineTool({
     'tanh',
   ],
   component: () => import('./math-evaluator.vue'),
-  icon: Math,
+  icon: IconMath,
 });
diff --git a/src/tools/meta-tag-generator/index.ts b/src/tools/meta-tag-generator/index.ts
index c62244109..373e1bdf2 100644
--- a/src/tools/meta-tag-generator/index.ts
+++ b/src/tools/meta-tag-generator/index.ts
@@ -1,4 +1,4 @@
-import { Tags } from '@vicons/tabler';
+import { IconTags } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -22,5 +22,5 @@ export const tool = defineTool({
     'og',
   ],
   component: () => import('./meta-tag-generator.vue'),
-  icon: Tags,
+  icon: IconTags,
 });
diff --git a/src/tools/mime-types/index.ts b/src/tools/mime-types/index.ts
index da6ba0c4a..27a0d5a95 100644
--- a/src/tools/mime-types/index.ts
+++ b/src/tools/mime-types/index.ts
@@ -1,4 +1,4 @@
-import { World } from '@vicons/tabler';
+import { IconWorld } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.mime-types.description'),
   keywords: ['mime', 'types', 'extension', 'content', 'type'],
   component: () => import('./mime-types.vue'),
-  icon: World,
+  icon: IconWorld,
 });
diff --git a/src/tools/numeronym-generator/numeronym-generator.vue b/src/tools/numeronym-generator/numeronym-generator.vue
index 2332b338c..50ad74082 100644
--- a/src/tools/numeronym-generator/numeronym-generator.vue
+++ b/src/tools/numeronym-generator/numeronym-generator.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconArrowDown } from '@tabler/icons-vue';
 import { generateNumeronym } from './numeronym-generator.service';
 
 const word = ref('');
@@ -10,7 +11,7 @@ const numeronym = computed(() => generateNumeronym(word.value));
   <div flex flex-col items-center gap-4>
     <c-input-text v-model:value="word" placeholder="Enter a word, e.g. 'internationalization'" size="large" clearable test-id="word-input" />
 
-    <icon-mdi-arrow-down text-30px />
+    <IconArrowDown size="35" />
 
     <input-copyable :value="numeronym" size="large" readonly placeholder="Your numeronym will be here, e.g. 'i18n'" test-id="numeronym" />
   </div>
diff --git a/src/tools/otp-code-generator-and-validator/index.ts b/src/tools/otp-code-generator-and-validator/index.ts
index 42ecc9fc2..902482003 100644
--- a/src/tools/otp-code-generator-and-validator/index.ts
+++ b/src/tools/otp-code-generator-and-validator/index.ts
@@ -1,4 +1,4 @@
-import { DeviceMobile } from '@vicons/tabler';
+import { IconDeviceMobile } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -24,5 +24,5 @@ export const tool = defineTool({
     'HMAC',
   ],
   component: () => import('./otp-code-generator-and-validator.vue'),
-  icon: DeviceMobile,
+  icon: IconDeviceMobile,
 });
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index 6bd881c06..64b005e14 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useTimestamp } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
+import { IconReload } from '@tabler/icons-vue';
 import { useQRCode } from '../qr-code-generator/useQRCode';
 import { base32toHex, buildKeyUri, generateSecret, generateTOTP, getCounterFromTime } from './otp.service';
 import TokenDisplay from './token-display.vue';
@@ -63,7 +64,7 @@ const secretValidationRules = [
       <template #suffix>
         <c-tooltip tooltip="Generate a new random secret">
           <c-button circle variant="text" size="small" @click="refreshSecret">
-            <icon-mdi-refresh />
+            <IconReload size="15" />
           </c-button>
         </c-tooltip>
       </template>
diff --git a/src/tools/password-strength-analyser/index.ts b/src/tools/password-strength-analyser/index.ts
index f2e89ef9a..cda1f2c0c 100644
--- a/src/tools/password-strength-analyser/index.ts
+++ b/src/tools/password-strength-analyser/index.ts
@@ -1,6 +1,6 @@
+import { IconForms } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import PasswordIcon from '~icons/mdi/form-textbox-password';
 
 export const tool = defineTool({
   name: translate('tools.password-strength-analyser.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.password-strength-analyser.description'),
   keywords: ['password', 'strength', 'analyser', 'and', 'crack', 'time', 'estimation', 'brute', 'force', 'attack', 'entropy', 'cracking', 'hash', 'hashing', 'algorithm', 'algorithms', 'md5', 'sha1', 'sha256', 'sha512', 'bcrypt', 'scrypt', 'argon2', 'argon2id', 'argon2i', 'argon2d'],
   component: () => import('./password-strength-analyser.vue'),
-  icon: PasswordIcon,
+  icon: IconForms,
   createdAt: new Date('2023-06-24'),
 });
diff --git a/src/tools/pdf-signature-checker/index.ts b/src/tools/pdf-signature-checker/index.ts
index 8b5d356b6..35999fcc0 100644
--- a/src/tools/pdf-signature-checker/index.ts
+++ b/src/tools/pdf-signature-checker/index.ts
@@ -1,6 +1,6 @@
+import { IconFileCertificate } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import FileCertIcon from '~icons/mdi/file-certificate-outline';
 
 export const tool = defineTool({
   name: translate('tools.pdf-signature-checker.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.pdf-signature-checker.description'),
   keywords: ['pdf', 'signature', 'checker', 'verify', 'validate', 'sign'],
   component: () => import('./pdf-signature-checker.vue'),
-  icon: FileCertIcon,
+  icon: IconFileCertificate,
   createdAt: new Date('2023-12-09'),
 });
diff --git a/src/tools/percentage-calculator/index.ts b/src/tools/percentage-calculator/index.ts
index 33c5b2f12..e684c84bf 100644
--- a/src/tools/percentage-calculator/index.ts
+++ b/src/tools/percentage-calculator/index.ts
@@ -1,4 +1,4 @@
-import { Percentage } from '@vicons/tabler';
+import { IconPercentage } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.percentage-calculator.description'),
   keywords: ['percentage', 'calculator', 'calculate', 'value', 'number', '%'],
   component: () => import('./percentage-calculator.vue'),
-  icon: Percentage,
+  icon: IconPercentage,
   createdAt: new Date('2023-06-18'),
 });
diff --git a/src/tools/phone-parser-and-formatter/index.ts b/src/tools/phone-parser-and-formatter/index.ts
index 094b21e87..9812a7fa8 100644
--- a/src/tools/phone-parser-and-formatter/index.ts
+++ b/src/tools/phone-parser-and-formatter/index.ts
@@ -1,4 +1,4 @@
-import { Phone } from '@vicons/tabler';
+import { IconPhone } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -20,6 +20,6 @@ export const tool = defineTool({
     'national',
   ],
   component: () => import('./phone-parser-and-formatter.vue'),
-  icon: Phone,
+  icon: IconPhone,
   createdAt: new Date('2023-05-01'),
 });
diff --git a/src/tools/qr-code-generator/index.ts b/src/tools/qr-code-generator/index.ts
index b97b4cbcb..cbfa4588e 100644
--- a/src/tools/qr-code-generator/index.ts
+++ b/src/tools/qr-code-generator/index.ts
@@ -1,4 +1,4 @@
-import { Qrcode } from '@vicons/tabler';
+import { IconQrcode } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.qrcode-generator.description'),
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
   component: () => import('./qr-code-generator.vue'),
-  icon: Qrcode,
+  icon: IconQrcode,
 });
diff --git a/src/tools/random-port-generator/index.ts b/src/tools/random-port-generator/index.ts
index e300b8f0d..0d1358a49 100644
--- a/src/tools/random-port-generator/index.ts
+++ b/src/tools/random-port-generator/index.ts
@@ -1,4 +1,4 @@
-import { Server } from '@vicons/tabler';
+import { IconServer } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.random-port-generator.description'),
   keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
   component: () => import('./random-port-generator.vue'),
-  icon: Server,
+  icon: IconServer,
 });
diff --git a/src/tools/regex-memo/index.ts b/src/tools/regex-memo/index.ts
index f1f56489d..8609d3909 100644
--- a/src/tools/regex-memo/index.ts
+++ b/src/tools/regex-memo/index.ts
@@ -1,4 +1,4 @@
-import { BrandJavascript } from '@vicons/tabler';
+import { IconBrandJavascript } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Javascript Regex/Regular Expression cheatsheet',
   keywords: ['regex', 'regular', 'expression', 'javascript', 'memo', 'cheatsheet'],
   component: () => import('./regex-memo.vue'),
-  icon: BrandJavascript,
+  icon: IconBrandJavascript,
   createdAt: new Date('2024-09-20'),
 });
diff --git a/src/tools/regex-tester/index.ts b/src/tools/regex-tester/index.ts
index 62a5e2346..8a91a82af 100644
--- a/src/tools/regex-tester/index.ts
+++ b/src/tools/regex-tester/index.ts
@@ -1,4 +1,4 @@
-import { Language } from '@vicons/tabler';
+import { IconLanguage } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Test your regular expressions with sample text.',
   keywords: ['regex', 'tester', 'sample', 'expression'],
   component: () => import('./regex-tester.vue'),
-  icon: Language,
+  icon: IconLanguage,
   createdAt: new Date('2024-09-20'),
 });
diff --git a/src/tools/roman-numeral-converter/index.ts b/src/tools/roman-numeral-converter/index.ts
index 6929747f1..545e9e609 100644
--- a/src/tools/roman-numeral-converter/index.ts
+++ b/src/tools/roman-numeral-converter/index.ts
@@ -1,4 +1,4 @@
-import { LetterX } from '@vicons/tabler';
+import { IconLetterX } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.roman-numeral-converter.description'),
   keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
   component: () => import('./roman-numeral-converter.vue'),
-  icon: LetterX,
+  icon: IconLetterX,
 });
diff --git a/src/tools/rsa-key-pair-generator/index.ts b/src/tools/rsa-key-pair-generator/index.ts
index 3d034e5ba..b8285d5a1 100644
--- a/src/tools/rsa-key-pair-generator/index.ts
+++ b/src/tools/rsa-key-pair-generator/index.ts
@@ -1,4 +1,4 @@
-import { Certificate } from '@vicons/tabler';
+import { IconCertificate } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.rsa-key-pair-generator.description'),
   keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
   component: () => import('./rsa-key-pair-generator.vue'),
-  icon: Certificate,
+  icon: IconCertificate,
 });
diff --git a/src/tools/safelink-decoder/index.ts b/src/tools/safelink-decoder/index.ts
index ef865108f..4e1fb6e59 100644
--- a/src/tools/safelink-decoder/index.ts
+++ b/src/tools/safelink-decoder/index.ts
@@ -1,4 +1,4 @@
-import { Mailbox } from '@vicons/tabler';
+import { IconMailbox } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Decode Outlook SafeLink links',
   keywords: ['outlook', 'safelink', 'decoder'],
   component: () => import('./safelink-decoder.vue'),
-  icon: Mailbox,
+  icon: IconMailbox,
   createdAt: new Date('2024-03-11'),
 });
diff --git a/src/tools/slugify-string/index.ts b/src/tools/slugify-string/index.ts
index 1f1bfcf3c..4c9dfbd7c 100644
--- a/src/tools/slugify-string/index.ts
+++ b/src/tools/slugify-string/index.ts
@@ -1,4 +1,4 @@
-import { AbcRound } from '@vicons/material';
+import { IconAbc } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.slugify-string.description'),
   keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
   component: () => import('./slugify-string.vue'),
-  icon: AbcRound,
+  icon: IconAbc,
 });
diff --git a/src/tools/sql-prettify/index.ts b/src/tools/sql-prettify/index.ts
index 96bff0fe8..b8ee137b4 100644
--- a/src/tools/sql-prettify/index.ts
+++ b/src/tools/sql-prettify/index.ts
@@ -1,4 +1,4 @@
-import { Database } from '@vicons/tabler';
+import { IconDatabase } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -23,5 +23,5 @@ export const tool = defineTool({
     'SQL Server Transact-SQL',
   ],
   component: () => import('./sql-prettify.vue'),
-  icon: Database,
+  icon: IconDatabase,
 });
diff --git a/src/tools/string-obfuscator/index.ts b/src/tools/string-obfuscator/index.ts
index 67f1995c9..dbe107cf6 100644
--- a/src/tools/string-obfuscator/index.ts
+++ b/src/tools/string-obfuscator/index.ts
@@ -1,4 +1,4 @@
-import { EyeOff } from '@vicons/tabler';
+import { IconEyeOff } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.string-obfuscator.description'),
   keywords: ['string', 'obfuscator', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
   component: () => import('./string-obfuscator.vue'),
-  icon: EyeOff,
+  icon: IconEyeOff,
   createdAt: new Date('2023-08-16'),
 });
diff --git a/src/tools/string-obfuscator/string-obfuscator.vue b/src/tools/string-obfuscator/string-obfuscator.vue
index 512d37815..0b4f617ad 100644
--- a/src/tools/string-obfuscator/string-obfuscator.vue
+++ b/src/tools/string-obfuscator/string-obfuscator.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconCopy } from '@tabler/icons-vue';
 import { useObfuscateString } from './string-obfuscator.model';
 import { useCopy } from '@/composable/copy';
 
@@ -40,7 +41,7 @@ const { copy } = useCopy({ source: obfuscatedString });
       </div>
 
       <c-button @click="copy()">
-        <icon-mdi:content-copy />
+        <IconCopy size="18" />
       </c-button>
     </c-card>
   </div>
diff --git a/src/tools/svg-placeholder-generator/index.ts b/src/tools/svg-placeholder-generator/index.ts
index 37a709ebd..768b40bb6 100644
--- a/src/tools/svg-placeholder-generator/index.ts
+++ b/src/tools/svg-placeholder-generator/index.ts
@@ -1,4 +1,4 @@
-import { ImageOutlined } from '@vicons/material';
+import { IconFileTypeSvg } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.svg-placeholder-generator.description'),
   keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
   component: () => import('./svg-placeholder-generator.vue'),
-  icon: ImageOutlined,
+  icon: IconFileTypeSvg,
 });
diff --git a/src/tools/temperature-converter/index.ts b/src/tools/temperature-converter/index.ts
index 3f526ee2c..3f6f0e595 100644
--- a/src/tools/temperature-converter/index.ts
+++ b/src/tools/temperature-converter/index.ts
@@ -1,4 +1,4 @@
-import { Temperature } from '@vicons/tabler';
+import { IconTemperature } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -20,5 +20,5 @@ export const tool = defineTool({
     'Rømer',
   ],
   component: () => import('./temperature-converter.vue'),
-  icon: Temperature,
+  icon: IconTemperature,
 });
diff --git a/src/tools/text-diff/index.ts b/src/tools/text-diff/index.ts
index de124ee65..d7bc5ec5e 100644
--- a/src/tools/text-diff/index.ts
+++ b/src/tools/text-diff/index.ts
@@ -1,4 +1,4 @@
-import { FileDiff } from '@vicons/tabler';
+import { IconFileDiff } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.text-diff.description'),
   keywords: ['text', 'diff', 'compare', 'string', 'text diff', 'code'],
   component: () => import('./text-diff.vue'),
-  icon: FileDiff,
+  icon: IconFileDiff,
   createdAt: new Date('2023-08-16'),
 });
diff --git a/src/tools/text-statistics/index.ts b/src/tools/text-statistics/index.ts
index 239378399..d742224a4 100644
--- a/src/tools/text-statistics/index.ts
+++ b/src/tools/text-statistics/index.ts
@@ -1,4 +1,4 @@
-import { FileText } from '@vicons/tabler';
+import { IconFileText } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.text-statistics.description'),
   keywords: ['text', 'statistics', 'length', 'characters', 'count', 'size', 'bytes'],
   component: () => import('./text-statistics.vue'),
-  icon: FileText,
+  icon: IconFileText,
   redirectFrom: ['/text-stats'],
 });
diff --git a/src/tools/text-to-binary/index.ts b/src/tools/text-to-binary/index.ts
index ce0f87ea5..5d7edde8b 100644
--- a/src/tools/text-to-binary/index.ts
+++ b/src/tools/text-to-binary/index.ts
@@ -1,4 +1,4 @@
-import { Binary } from '@vicons/tabler';
+import { IconBinary } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.text-to-binary.description'),
   keywords: ['text', 'to', 'binary', 'converter', 'encode', 'decode', 'ascii'],
   component: () => import('./text-to-binary.vue'),
-  icon: Binary,
+  icon: IconBinary,
   createdAt: new Date('2023-10-15'),
 });
diff --git a/src/tools/text-to-nato-alphabet/index.ts b/src/tools/text-to-nato-alphabet/index.ts
index 43b72fb49..aeb2db0d2 100644
--- a/src/tools/text-to-nato-alphabet/index.ts
+++ b/src/tools/text-to-nato-alphabet/index.ts
@@ -1,4 +1,4 @@
-import { Speakerphone } from '@vicons/tabler';
+import { IconSpeakerphone } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.text-to-nato-alphabet.description'),
   keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
   component: () => import('./text-to-nato-alphabet.vue'),
-  icon: Speakerphone,
+  icon: IconSpeakerphone,
 });
diff --git a/src/tools/text-to-unicode/index.ts b/src/tools/text-to-unicode/index.ts
index 80396026b..2785408c0 100644
--- a/src/tools/text-to-unicode/index.ts
+++ b/src/tools/text-to-unicode/index.ts
@@ -1,4 +1,4 @@
-import { TextWrap } from '@vicons/tabler';
+import { IconTextWrap } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.text-to-unicode.description'),
   keywords: ['text', 'to', 'unicode'],
   component: () => import('./text-to-unicode.vue'),
-  icon: TextWrap,
+  icon: IconTextWrap,
   createdAt: new Date('2024-01-31'),
 });
diff --git a/src/tools/token-generator/index.ts b/src/tools/token-generator/index.ts
index 44923e79e..1e74e0765 100644
--- a/src/tools/token-generator/index.ts
+++ b/src/tools/token-generator/index.ts
@@ -1,4 +1,4 @@
-import { ArrowsShuffle } from '@vicons/tabler';
+import { IconArrowsShuffle } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.token-generator.description'),
   keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase', 'password'],
   component: () => import('./token-generator.tool.vue'),
-  icon: ArrowsShuffle,
+  icon: IconArrowsShuffle,
 });
diff --git a/src/tools/toml-to-json/index.ts b/src/tools/toml-to-json/index.ts
index 77a1b26e5..e6653e02e 100644
--- a/src/tools/toml-to-json/index.ts
+++ b/src/tools/toml-to-json/index.ts
@@ -1,14 +1,13 @@
+import { IconBrackets } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
-import BracketIcon from '~icons/mdi/code-brackets';
-
 export const tool = defineTool({
   name: translate('tools.toml-to-json.title'),
   path: '/toml-to-json',
   description: translate('tools.toml-to-json.description'),
   keywords: ['toml', 'json', 'convert', 'online', 'transform', 'parser'],
   component: () => import('./toml-to-json.vue'),
-  icon: BracketIcon,
+  icon: IconBrackets,
   createdAt: new Date('2023-06-23'),
 });
diff --git a/src/tools/toml-to-yaml/index.ts b/src/tools/toml-to-yaml/index.ts
index 2ee0958b0..d8d1766c9 100644
--- a/src/tools/toml-to-yaml/index.ts
+++ b/src/tools/toml-to-yaml/index.ts
@@ -1,6 +1,6 @@
+import { IconBrackets } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
-import BracketIcon from '~icons/mdi/code-brackets';
 
 export const tool = defineTool({
   name: translate('tools.toml-to-yaml.title'),
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.toml-to-yaml.description'),
   keywords: ['toml', 'yaml', 'convert', 'online', 'transform', 'parse'],
   component: () => import('./toml-to-yaml.vue'),
-  icon: BracketIcon,
+  icon: IconBrackets,
   createdAt: new Date('2023-06-23'),
 });
diff --git a/src/tools/ulid-generator/index.ts b/src/tools/ulid-generator/index.ts
index c12679a75..bd13ff9d0 100644
--- a/src/tools/ulid-generator/index.ts
+++ b/src/tools/ulid-generator/index.ts
@@ -1,4 +1,4 @@
-import { SortDescendingNumbers } from '@vicons/tabler';
+import { IconSortDescendingNumbers } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.ulid-generator.description'),
   keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
   component: () => import('./ulid-generator.vue'),
-  icon: SortDescendingNumbers,
+  icon: IconSortDescendingNumbers,
   createdAt: new Date('2023-09-11'),
 });
diff --git a/src/tools/url-encoder/index.ts b/src/tools/url-encoder/index.ts
index ab85118c8..a9d9b7968 100644
--- a/src/tools/url-encoder/index.ts
+++ b/src/tools/url-encoder/index.ts
@@ -1,4 +1,4 @@
-import { Link } from '@vicons/tabler';
+import { IconLink } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.url-encoder.description'),
   keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
   component: () => import('./url-encoder.vue'),
-  icon: Link,
+  icon: IconLink,
 });
diff --git a/src/tools/url-parser/index.ts b/src/tools/url-parser/index.ts
index 77976a24b..c10ad5cdd 100644
--- a/src/tools/url-parser/index.ts
+++ b/src/tools/url-parser/index.ts
@@ -1,4 +1,4 @@
-import { Unlink } from '@vicons/tabler';
+import { IconUnlink } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.url-parser.description'),
   keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
   component: () => import('./url-parser.vue'),
-  icon: Unlink,
+  icon: IconUnlink,
 });
diff --git a/src/tools/url-parser/url-parser.vue b/src/tools/url-parser/url-parser.vue
index 0799682fa..980d07138 100644
--- a/src/tools/url-parser/url-parser.vue
+++ b/src/tools/url-parser/url-parser.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconCornerDownRight } from '@tabler/icons-vue';
 import InputCopyable from '../../components/InputCopyable.vue';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
@@ -56,10 +57,10 @@ const properties: { title: string; key: keyof URL }[] = [
       flex
     >
       <div style="flex: 1 0 110px">
-        <icon-mdi-arrow-right-bottom />
+        <IconCornerDownRight size="18" />
       </div>
 
-      <InputCopyable :value="k" readonly />
+      <InputCopyable :value="k" readonly mr-1 />
       <InputCopyable :value="v" readonly />
     </div>
   </c-card>
diff --git a/src/tools/user-agent-parser/index.ts b/src/tools/user-agent-parser/index.ts
index 4d026145d..3a0badf00 100644
--- a/src/tools/user-agent-parser/index.ts
+++ b/src/tools/user-agent-parser/index.ts
@@ -1,4 +1,4 @@
-import { Browser } from '@vicons/tabler';
+import { IconBrowser } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.user-agent-parser.description'),
   keywords: ['user', 'agent', 'parser', 'browser', 'engine', 'os', 'cpu', 'device', 'user-agent', 'client'],
   component: () => import('./user-agent-parser.vue'),
-  icon: Browser,
+  icon: IconBrowser,
   createdAt: new Date('2023-04-06'),
 });
diff --git a/src/tools/user-agent-parser/user-agent-parser.vue b/src/tools/user-agent-parser/user-agent-parser.vue
index 5a4ec270d..4fcc855ba 100644
--- a/src/tools/user-agent-parser/user-agent-parser.vue
+++ b/src/tools/user-agent-parser/user-agent-parser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { UAParser } from 'ua-parser-js';
-import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler';
+import { IconAdjustments, IconBrowser, IconCpu, IconDevices, IconEngine } from '@tabler/icons-vue';
 import UserAgentResultCards from './user-agent-result-cards.vue';
 import type { UserAgentResultSection } from './user-agent-parser.types';
 import { withDefaultOnError } from '@/utils/defaults';
@@ -20,7 +20,7 @@ const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(u
 const sections: UserAgentResultSection[] = [
   {
     heading: 'Browser',
-    icon: Browser,
+    icon: IconBrowser,
     content: [
       {
         label: 'Name',
@@ -36,7 +36,7 @@ const sections: UserAgentResultSection[] = [
   },
   {
     heading: 'Engine',
-    icon: Engine,
+    icon: IconEngine,
     content: [
       {
         label: 'Name',
@@ -52,7 +52,7 @@ const sections: UserAgentResultSection[] = [
   },
   {
     heading: 'OS',
-    icon: Adjustments,
+    icon: IconAdjustments,
     content: [
       {
         label: 'Name',
@@ -68,7 +68,7 @@ const sections: UserAgentResultSection[] = [
   },
   {
     heading: 'Device',
-    icon: Devices,
+    icon: IconDevices,
     content: [
       {
         label: 'Model',
@@ -89,7 +89,7 @@ const sections: UserAgentResultSection[] = [
   },
   {
     heading: 'CPU',
-    icon: Cpu,
+    icon: IconCpu,
     content: [
       {
         label: 'Architecture',
diff --git a/src/tools/uuid-generator/index.ts b/src/tools/uuid-generator/index.ts
index 54ec479f6..7b80e5637 100644
--- a/src/tools/uuid-generator/index.ts
+++ b/src/tools/uuid-generator/index.ts
@@ -1,4 +1,4 @@
-import { Fingerprint } from '@vicons/tabler';
+import { IconFingerprint } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,5 +8,5 @@ export const tool = defineTool({
   description: translate('tools.uuid-generator.description'),
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
   component: () => import('./uuid-generator.vue'),
-  icon: Fingerprint,
+  icon: IconFingerprint,
 });
diff --git a/src/tools/wifi-qr-code-generator/index.ts b/src/tools/wifi-qr-code-generator/index.ts
index b59b95dfb..02c1b7cf0 100644
--- a/src/tools/wifi-qr-code-generator/index.ts
+++ b/src/tools/wifi-qr-code-generator/index.ts
@@ -1,4 +1,4 @@
-import { Qrcode } from '@vicons/tabler';
+import { IconQrcode } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.wifi-qrcode-generator.description'),
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent', 'wifi'],
   component: () => import('./wifi-qr-code-generator.vue'),
-  icon: Qrcode,
+  icon: IconQrcode,
   createdAt: new Date('2023-09-06'),
 });
diff --git a/src/tools/xml-formatter/index.ts b/src/tools/xml-formatter/index.ts
index 7aa096da7..96939bef6 100644
--- a/src/tools/xml-formatter/index.ts
+++ b/src/tools/xml-formatter/index.ts
@@ -1,4 +1,4 @@
-import { Code } from '@vicons/tabler';
+import { IconCode } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.xml-formatter.description'),
   keywords: ['xml', 'prettify', 'format'],
   component: () => import('./xml-formatter.vue'),
-  icon: Code,
+  icon: IconCode,
   createdAt: new Date('2023-06-17'),
 });
diff --git a/src/tools/xml-to-json/index.ts b/src/tools/xml-to-json/index.ts
index 8d83f4fe6..65542caf8 100644
--- a/src/tools/xml-to-json/index.ts
+++ b/src/tools/xml-to-json/index.ts
@@ -1,4 +1,4 @@
-import { Braces } from '@vicons/tabler';
+import { IconBraces } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
@@ -7,6 +7,6 @@ export const tool = defineTool({
   description: 'Convert XML to JSON',
   keywords: ['xml', 'json'],
   component: () => import('./xml-to-json.vue'),
-  icon: Braces,
+  icon: IconBraces,
   createdAt: new Date('2024-08-09'),
 });
diff --git a/src/tools/yaml-to-json-converter/index.ts b/src/tools/yaml-to-json-converter/index.ts
index 60110f096..6b7af00cc 100644
--- a/src/tools/yaml-to-json-converter/index.ts
+++ b/src/tools/yaml-to-json-converter/index.ts
@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.yaml-to-json-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./yaml-to-json.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
   createdAt: new Date('2023-04-10'),
 });
diff --git a/src/tools/yaml-to-toml/index.ts b/src/tools/yaml-to-toml/index.ts
index d788887e7..e7ae18f9f 100644
--- a/src/tools/yaml-to-toml/index.ts
+++ b/src/tools/yaml-to-toml/index.ts
@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.yaml-to-toml.description'),
   keywords: ['yaml', 'to', 'toml', 'convert', 'transform'],
   component: () => import('./yaml-to-toml.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
   createdAt: new Date('2023-06-23'),
 });
diff --git a/src/tools/yaml-viewer/index.ts b/src/tools/yaml-viewer/index.ts
index f30432700..9c34ba75d 100644
--- a/src/tools/yaml-viewer/index.ts
+++ b/src/tools/yaml-viewer/index.ts
@@ -1,4 +1,4 @@
-import { AlignJustified } from '@vicons/tabler';
+import { IconAlignJustified } from '@tabler/icons-vue';
 import { defineTool } from '../tool';
 import { translate } from '@/plugins/i18n.plugin';
 
@@ -8,6 +8,6 @@ export const tool = defineTool({
   description: translate('tools.yaml-prettify.description'),
   keywords: ['yaml', 'viewer', 'prettify', 'format'],
   component: () => import('./yaml-viewer.vue'),
-  icon: AlignJustified,
+  icon: IconAlignJustified,
   createdAt: new Date('2024-01-31'),
 });
diff --git a/src/ui/c-alert/c-alert.theme.ts b/src/ui/c-alert/c-alert.theme.ts
index 2176a1027..0580771e4 100644
--- a/src/ui/c-alert/c-alert.theme.ts
+++ b/src/ui/c-alert/c-alert.theme.ts
@@ -1,23 +1,21 @@
+import { IconAlertCircle, IconCircleX } from '@tabler/icons-vue';
 import { darken } from '../color/color.models';
 import { defineThemes } from '../theme/theme.models';
 import { appThemes } from '../theme/themes';
 
-import WarningIcon from '~icons/mdi/alert-circle-outline';
-import ErrorIcon from '~icons/mdi/close-circle-outline';
-
 export const { useTheme } = defineThemes({
   dark: {
     warning: {
       backgroundColor: appThemes.dark.warning.colorFaded,
       borderColor: appThemes.dark.warning.color,
       textColor: appThemes.dark.warning.color,
-      icon: WarningIcon,
+      icon: IconAlertCircle,
     },
     error: {
       backgroundColor: appThemes.dark.error.colorFaded,
       borderColor: appThemes.dark.error.color,
       textColor: appThemes.dark.error.color,
-      icon: ErrorIcon,
+      icon: IconCircleX,
     },
   },
   light: {
@@ -25,13 +23,13 @@ export const { useTheme } = defineThemes({
       backgroundColor: appThemes.light.warning.colorFaded,
       borderColor: appThemes.light.warning.color,
       textColor: darken(appThemes.light.warning.color, 40),
-      icon: WarningIcon,
+      icon: IconAlertCircle,
     },
     error: {
       backgroundColor: appThemes.light.error.colorFaded,
       borderColor: appThemes.light.error.color,
       textColor: darken(appThemes.light.error.color, 40),
-      icon: ErrorIcon,
+      icon: IconCircleX,
     },
   },
 });
diff --git a/src/ui/c-button/c-button.demo.vue b/src/ui/c-button/c-button.demo.vue
index b9d011a30..4369c63c4 100644
--- a/src/ui/c-button/c-button.demo.vue
+++ b/src/ui/c-button/c-button.demo.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _ from 'lodash';
+import { IconCopy } from '@tabler/icons-vue';
 
 const buttonVariants = ['basic', 'text'] as const;
 const buttonTypes = ['default', 'primary', 'warning', 'error'] as const;
@@ -43,7 +44,7 @@ const buttonSizes = ['small', 'medium', 'large'] as const;
         circle
         mx-1
       >
-        <icon-mdi-content-copy />
+        <IconCopy size="20" />
       </c-button>
     </div>
   </div>
diff --git a/src/ui/c-collapse/c-collapse.vue b/src/ui/c-collapse/c-collapse.vue
index ccd7c1eac..b53160994 100644
--- a/src/ui/c-collapse/c-collapse.vue
+++ b/src/ui/c-collapse/c-collapse.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { IconTriangleInvertedFilled } from '@tabler/icons-vue';
+
 const props = withDefaults(defineProps<{ title?: string }>(), { title: '' });
 const { title } = toRefs(props);
 
@@ -8,7 +10,7 @@ const isCollapsed = ref(true);
 <template>
   <div>
     <div flex cursor-pointer items-center @click="isCollapsed = !isCollapsed">
-      <icon-mdi-triangle-down :class="{ 'transform-rotate--90': isCollapsed }" op-50 transition />
+      <n-icon :component="IconTriangleInvertedFilled" :class="{ 'transform-rotate--90': isCollapsed }" lh-1 op50 transition size="17" />
 
       <slot name="title">
         <span class="ml-2" font-bold>{{ title }}</span>
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index b5f423d22..11ff0a257 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { IconEye, IconEyeClosed, IconX } from '@tabler/icons-vue';
 import { useAppTheme } from '../theme/themes';
 import { useTheme } from './c-input-text.theme';
 import { generateRandomId } from '@/utils/random';
@@ -195,12 +196,12 @@ defineExpose({
         >
 
         <c-button v-if="clearable && value" variant="text" circle size="small" @click="value = ''">
-          <icon-mdi-close />
+          <IconX size="15" />
         </c-button>
 
         <c-button v-if="type === 'password'" variant="text" circle size="small" @click="showPassword = !showPassword">
-          <icon-mdi-eye v-if="!showPassword" />
-          <icon-mdi-eye-off v-if="showPassword" />
+          <IconEye v-if="!showPassword" size="20" />
+          <IconEyeClosed v-if="showPassword" size="20" />
         </c-button>
         <slot name="suffix" />
       </div>
diff --git a/src/ui/c-select/c-select.demo.vue b/src/ui/c-select/c-select.demo.vue
index f656c01dc..a00eb1b27 100644
--- a/src/ui/c-select/c-select.demo.vue
+++ b/src/ui/c-select/c-select.demo.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { IconLanguage } from '@tabler/icons-vue';
+
 const optionsA = [
   { label: 'Option A', value: 'a' },
   { label: 'Option B', value: 'b' },
@@ -44,7 +46,7 @@ const value = ref('');
   <c-select v-model:value="value" :options="optionsA">
     <template #displayed-value>
       <span lh-normal>
-        <icon-mdi-translate />
+        <IconLanguage size="20" />
       </span>
     </template>
   </c-select>
diff --git a/src/ui/c-select/c-select.vue b/src/ui/c-select/c-select.vue
index 7b3607c93..ff00ec38b 100644
--- a/src/ui/c-select/c-select.vue
+++ b/src/ui/c-select/c-select.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T extends unknown">
+import { IconChevronDown } from '@tabler/icons-vue';
 import { useAppTheme } from '../theme/themes';
 import type { CLabelProps } from '../c-label/c-label.types';
 import type { CSelectOption } from './c-select.types';
@@ -161,7 +162,7 @@ function onSearchInput() {
           </slot>
         </div>
 
-        <icon-mdi-chevron-down class="chevron" />
+        <IconChevronDown class="chevron" size="15" />
       </div>
 
       <transition name="dropdown">
diff --git a/src/ui/c-text-copyable/c-text-copyable.vue b/src/ui/c-text-copyable/c-text-copyable.vue
index b78e4cda6..943574902 100644
--- a/src/ui/c-text-copyable/c-text-copyable.vue
+++ b/src/ui/c-text-copyable/c-text-copyable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { IconCopy } from '@tabler/icons-vue';
 import { useCopy } from '@/composable/copy';
 
 const props = withDefaults(defineProps<{ value?: string; displayedValue?: string; showIcon?: boolean }>(), { value: '', displayedValue: undefined, showIcon: true });
@@ -11,7 +12,9 @@ const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
   <c-tooltip :tooltip="isJustCopied ? 'Copied!' : 'Copy to clipboard'" cursor-pointer @click="copy">
     <span flex items-center gap-2>
       {{ displayedValue ?? value }}
-      <icon-mdi-content-copy v-if="showIcon" op-40 />
+      <span op-40>
+        <IconCopy v-if="showIcon" size="20" />
+      </span>
     </span>
   </c-tooltip>
 </template>