From 9e345ef7efbb5bc50a336bfba7cf579feeba935e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 17:14:28 +0100
Subject: [PATCH] refactor: replace carbon icons (#1454)

---
 app/components/AppHeader.vue                  | 24 +++---
 app/components/BlueskyPostEmbed.client.vue    |  8 +-
 app/components/CallToAction.vue               |  8 +-
 app/components/Code/FileTree.vue              |  2 +-
 app/components/Code/MobileTreeDrawer.vue      |  4 +-
 app/components/CollapsibleSection.vue         |  8 +-
 app/components/ColumnPicker.vue               |  2 +-
 app/components/Compare/ComparisonGrid.vue     |  4 +-
 app/components/Compare/FacetCard.vue          |  7 +-
 app/components/Compare/FacetRow.vue           |  7 +-
 app/components/Compare/FacetSelector.vue      |  4 +-
 app/components/Compare/PackageSelector.vue    |  6 +-
 .../Compare/ReplacementSuggestion.vue         |  2 +-
 app/components/DependencyPathPopup.vue        |  2 +-
 app/components/Filter/Chips.vue               |  2 +-
 app/components/Filter/Panel.vue               |  4 +-
 app/components/Header/AccountMenu.client.vue  | 16 ++--
 app/components/Header/AccountMenu.server.vue  |  2 +-
 app/components/Header/AuthModal.client.vue    |  2 +-
 app/components/Header/ConnectorModal.vue      |  6 +-
 app/components/Header/MobileMenu.client.vue   | 10 +--
 app/components/Header/OrgsDropdown.vue        |  4 +-
 app/components/Header/PackagesDropdown.vue    |  4 +-
 app/components/LicenseDisplay.vue             |  2 +-
 app/components/Link/Base.vue                  |  4 +-
 app/components/Modal.client.vue               |  2 +-
 app/components/Org/MembersPanel.vue           | 12 +--
 app/components/Org/OperationsQueue.vue        | 30 +++----
 app/components/Org/TeamsPanel.vue             | 23 +++---
 app/components/Package/AccessControls.vue     | 12 +--
 app/components/Package/Card.vue               |  4 +-
 app/components/Package/ClaimPackageModal.vue  | 10 +--
 app/components/Package/Compatibility.vue      |  2 +-
 app/components/Package/Dependencies.vue       |  6 +-
 app/components/Package/DeprecatedTree.vue     |  4 +-
 app/components/Package/InstallScripts.vue     |  6 +-
 app/components/Package/ListControls.vue       |  2 +-
 app/components/Package/ListToolbar.vue        |  4 +-
 app/components/Package/Maintainers.vue        |  4 +-
 app/components/Package/ManagerSelect.vue      |  4 +-
 app/components/Package/MetricsBadges.vue      | 18 +----
 app/components/Package/Playgrounds.vue        |  8 +-
 app/components/Package/Replacement.vue        | 10 +--
 app/components/Package/Skeleton.vue           | 16 ++--
 app/components/Package/SkillsModal.vue        | 16 ++--
 app/components/Package/Table.vue              | 24 ++++--
 app/components/Package/TableRow.vue           |  4 +-
 app/components/Package/TrendsChart.vue        | 42 ++++------
 .../Package/VersionDistribution.vue           | 46 ++++-------
 app/components/Package/Versions.vue           | 26 +++---
 app/components/Package/VulnerabilityTree.vue  |  8 +-
 .../Package/WeeklyDownloadStats.vue           |  2 +-
 app/components/PackageProvenanceSection.vue   |  2 +-
 app/components/PaginationControls.vue         |  4 +-
 app/components/ProvenanceBadge.vue            |  4 +-
 app/components/Readme.vue                     | 26 +++---
 app/components/ReadmeTocDropdown.vue          |  4 +-
 app/components/ScrollToTop.client.vue         |  4 +-
 .../SearchProviderToggle.client.vue           |  8 +-
 .../SearchProviderToggle.server.vue           |  2 +-
 app/components/SearchSuggestionCard.vue       |  2 +-
 app/components/Select/Field.vue               |  2 +-
 app/components/Settings/AccentColorPicker.vue |  2 +-
 app/components/Settings/TranslationHelper.vue |  4 +-
 app/components/Terminal/Install.vue           |  4 +-
 app/components/UserCombobox.vue               |  2 +-
 app/components/VersionSelector.vue            |  6 +-
 app/components/ViewModeToggle.vue             |  4 +-
 app/pages/about.vue                           |  6 +-
 app/pages/accessibility.vue                   |  4 +-
 app/pages/compare.vue                         |  7 +-
 app/pages/index.vue                           |  2 +-
 app/pages/org/[org].vue                       |  4 +-
 .../v/[version]/[...filePath].vue             | 10 +--
 app/pages/package/[[org]]/[name].vue          | 80 ++++++++-----------
 app/pages/privacy.vue                         | 10 +--
 app/pages/recharging.vue                      | 26 +++---
 app/pages/settings.vue                        |  6 +-
 app/pages/~[username]/index.vue               |  4 +-
 app/pages/~[username]/orgs.vue                |  4 +-
 app/utils/file-icons.ts                       |  6 +-
 .../content/1.getting-started/.navigation.yml |  2 +-
 .../1.getting-started/1.introduction.md       |  2 +-
 .../1.getting-started/2.quick-start.md        |  2 +-
 docs/content/2.guide/.navigation.yml          |  2 +-
 docs/content/2.guide/1.features.md            |  4 +-
 docs/content/2.guide/2.keyboard-shortcuts.md  |  2 +-
 docs/content/2.guide/3.url-structure.md       |  2 +-
 docs/content/3.faq/.navigation.yml            |  2 +-
 docs/content/3.faq/1.troubleshooting.md       |  2 +-
 docs/content/3.faq/2.comparison.md            |  2 +-
 docs/content/index.md                         | 14 ++--
 package.json                                  |  1 -
 pnpm-lock.yaml                                | 10 ---
 scripts/generate-file-tree-sprite.ts          |  4 +-
 server/utils/readme.ts                        |  4 +-
 test/nuxt/components/LicenseDisplay.spec.ts   |  6 +-
 test/nuxt/components/PackageVersions.spec.ts  |  2 +-
 test/nuxt/components/VersionSelector.spec.ts  |  2 +-
 test/nuxt/components/compare/FacetRow.spec.ts |  8 +-
 .../components/compare/FacetSelector.spec.ts  |  8 +-
 .../compare/PackageSelector.spec.ts           |  6 +-
 uno.config.ts                                 |  2 +
 103 files changed, 385 insertions(+), 442 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index f05dbb0..5af7c70 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -23,7 +23,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: 'c',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:compare',
+    iconClass: 'i-lucide:git-compare',
   },
   {
     name: 'Settings',
@@ -32,7 +32,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: ',',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:settings',
+    iconClass: 'i-lucide:settings',
   },
 ])
 
@@ -55,7 +55,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         to: { name: 'about' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:information',
+        iconClass: 'i-lucide:info',
       },
       {
         name: 'Privacy Policy',
@@ -63,7 +63,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         to: { name: 'privacy' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:security',
+        iconClass: 'i-lucide:shield-check',
       },
       {
         name: 'Accessibility',
@@ -71,7 +71,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         to: { name: 'accessibility' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:accessibility-alt',
+        iconClass: 'i-custom:a11y',
       },
     ],
   },
@@ -90,7 +90,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:document',
+        iconClass: 'i-lucide:file-text',
       },
       {
         name: 'Source',
@@ -99,7 +99,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-github',
+        iconClass: 'i-simple-icons:github',
       },
       {
         name: 'Social',
@@ -108,7 +108,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-bluesky',
+        iconClass: 'i-simple-icons:bluesky',
       },
       {
         name: 'Chat',
@@ -117,14 +117,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:chat',
+        iconClass: 'i-lucide:message-circle',
       },
     ],
   },
 ])
 
 const showFullSearch = shallowRef(false)
-const showMobileMenu = shallowRef(false)
+const showMobileMenu = shallowRef(true)
 const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
@@ -288,7 +288,7 @@ onKeyStroke(
         :aria-expanded="showMobileMenu"
         @click="expandMobileSearch"
         v-if="!isSearchExpanded && !isOnHomePage"
-        classicon="i-carbon:search"
+        classicon="i-lucide:search"
       />
 
       <!-- Mobile: Menu button (always visible, click to open menu) -->
@@ -298,7 +298,7 @@ onKeyStroke(
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"
-        classicon="i-carbon:menu"
+        classicon="i-lucide:menu"
       />
     </nav>
 
diff --git a/app/components/BlueskyPostEmbed.client.vue b/app/components/BlueskyPostEmbed.client.vue
index 32e3b98..ed253b8 100644
--- a/app/components/BlueskyPostEmbed.client.vue
+++ b/app/components/BlueskyPostEmbed.client.vue
@@ -83,7 +83,7 @@ const { data: post, status } = useAsyncData(
         <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
       </div>
       <span
-        class="i-carbon:logo-bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
+        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
         aria-hidden="true"
       />
     </div>
@@ -112,15 +112,15 @@ const { data: post, status } = useAsyncData(
     <div class="flex items-center gap-4 text-sm text-fg-subtle">
       <DateTime :datetime="post.record.createdAt" date-style="medium" />
       <span v-if="post.likeCount" class="flex items-center gap-1">
-        <span class="i-carbon:favorite w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:heart w-3.5 h-3.5" aria-hidden="true" />
         {{ post.likeCount }}
       </span>
       <span v-if="post.repostCount" class="flex items-center gap-1">
-        <span class="i-carbon:repeat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:repeat w-3.5 h-3.5" aria-hidden="true" />
         {{ post.repostCount }}
       </span>
       <span v-if="post.replyCount" class="flex items-center gap-1">
-        <span class="i-carbon:chat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:message-circle w-3.5 h-3.5" aria-hidden="true" />
         {{ post.replyCount }}
       </span>
     </div>
diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index fc5ee6c..81f01c6 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -3,7 +3,7 @@ const socialLinks = computed(() => [
   {
     id: 'github',
     href: 'https://repo.npmx.dev',
-    icon: 'i-carbon:logo-github',
+    icon: 'i-simple-icons:github',
     titleKey: $t('about.get_involved.contribute.title'),
     descriptionKey: $t('about.get_involved.contribute.description'),
     ctaKey: $t('about.get_involved.contribute.cta'),
@@ -11,7 +11,7 @@ const socialLinks = computed(() => [
   {
     id: 'discord',
     href: 'https://chat.npmx.dev',
-    icon: 'i-carbon:chat',
+    icon: 'i-lucide:message-circle',
     titleKey: $t('about.get_involved.community.title'),
     descriptionKey: $t('about.get_involved.community.description'),
     ctaKey: $t('about.get_involved.community.cta'),
@@ -19,7 +19,7 @@ const socialLinks = computed(() => [
   {
     id: 'bluesky',
     href: 'https://social.npmx.dev',
-    icon: 'i-carbon:logo-bluesky',
+    icon: 'i-simple-icons:bluesky',
     titleKey: $t('about.get_involved.follow.title'),
     descriptionKey: $t('about.get_involved.follow.description'),
     ctaKey: $t('about.get_involved.follow.cta'),
@@ -55,7 +55,7 @@ const socialLinks = computed(() => [
           class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
         >
           {{ link.ctaKey }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
           <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>
diff --git a/app/components/Code/FileTree.vue b/app/components/Code/FileTree.vue
index 6f6c62d..2e2d235 100644
--- a/app/components/Code/FileTree.vue
+++ b/app/components/Code/FileTree.vue
@@ -59,7 +59,7 @@ watch(
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
-          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+          :classicon="isExpanded(node.path) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
         >
           <svg
             class="size-[1em] me-1 shrink-0"
diff --git a/app/components/Code/MobileTreeDrawer.vue b/app/components/Code/MobileTreeDrawer.vue
index c45b164..17f8b23 100644
--- a/app/components/Code/MobileTreeDrawer.vue
+++ b/app/components/Code/MobileTreeDrawer.vue
@@ -32,7 +32,7 @@ watch(isOpen, open => (isLocked.value = open))
     class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+    :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
   />
 
   <!-- Backdrop -->
@@ -68,7 +68,7 @@ watch(isOpen, open => (isLocked.value = open))
         <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-          classicon="i-carbon-close"
+          classicon="i-lucide:x"
         />
       </div>
       <CodeFileTree
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index e7d010f..35faa43 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -92,15 +92,11 @@ useHead({
           :aria-label="ariaLabel"
           @click="toggle"
         >
-          <span
-            v-if="isLoading"
-            class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
+          <span v-if="isLoading" class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
           <span
             v-else
             class="w-3 h-3 transition-transform duration-200"
-            :class="isOpen ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+            :class="isOpen ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
             aria-hidden="true"
           />
         </button>
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index f27617c..7dfe611 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -75,7 +75,7 @@ function handleReset() {
       aria-haspopup="true"
       :aria-controls="menuId"
       @click.stop="isOpen = !isOpen"
-      classicon="i-carbon-column"
+      classicon="i-lucide:columns-3-cog"
     >
       {{ $t('filters.columns.title') }}
     </ButtonBase>
diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue
index 3bf2129..c468203 100644
--- a/app/components/Compare/ComparisonGrid.vue
+++ b/app/components/Compare/ComparisonGrid.vue
@@ -50,7 +50,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
             </LinkBase>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span
-                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
                 role="img"
                 :aria-label="$t('package.replacement.title')"
               />
@@ -69,7 +69,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
             {{ $t('compare.no_dependency.label') }}
             <TooltipApp interactive position="bottom">
               <span
-                class="i-carbon:idea w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
+                class="i-lucide:lightbulb w-3.5 h-3.5 text-amber-500 shrink-0 cursor-help"
                 role="img"
                 :aria-label="$t('compare.no_dependency.tooltip_title')"
               />
diff --git a/app/components/Compare/FacetCard.vue b/app/components/Compare/FacetCard.vue
index b819333..92d0c90 100644
--- a/app/components/Compare/FacetCard.vue
+++ b/app/components/Compare/FacetCard.vue
@@ -77,7 +77,7 @@ function getShortName(header: string): string {
       <span class="text-xs text-fg-muted uppercase tracking-wider font-medium">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
         <span
-          class="i-carbon:information w-3 h-3 text-fg-subtle"
+          class="i-lucide:info w-3 h-3 text-fg-subtle"
           :title="description"
           aria-hidden="true"
         />
@@ -111,10 +111,7 @@ function getShortName(header: string): string {
         <span class="relative min-w-0 text-end">
           <!-- Loading state -->
           <template v-if="isCellLoading(index)">
-            <span
-              class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
-              aria-hidden="true"
-            />
+            <span class="i-svg-spinners:ring-resize w-4 h-4 text-fg-subtle" aria-hidden="true" />
           </template>
 
           <!-- No data -->
diff --git a/app/components/Compare/FacetRow.vue b/app/components/Compare/FacetRow.vue
index 6c0b49a..b7d216e 100644
--- a/app/components/Compare/FacetRow.vue
+++ b/app/components/Compare/FacetRow.vue
@@ -93,7 +93,7 @@ function isCellLoading(index: number): boolean {
     <div class="comparison-label flex items-center gap-1.5 px-4 py-3 border-b border-border">
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
       <TooltipApp v-if="description" :text="description" position="top">
-        <span class="i-carbon:information w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
+        <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
       </TooltipApp>
     </div>
 
@@ -114,10 +114,7 @@ function isCellLoading(index: number): boolean {
 
       <!-- Loading state -->
       <template v-if="isCellLoading(index)">
-        <span
-          class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
-          aria-hidden="true"
-        />
+        <span class="i-svg-spinners:ring-resize w-4 h-4 text-fg-subtle" aria-hidden="true" />
       </template>
 
       <!-- No data -->
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index c96c8d9..f8f39ae 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -82,8 +82,8 @@ function isCategoryNoneSelected(category: string): boolean {
             facet.comingSoon
               ? undefined
               : isFacetSelected(facet.id)
-                ? 'i-carbon:checkmark'
-                : 'i-carbon:add'
+                ? 'i-lucide:check'
+                : 'i-lucide:plus'
           "
         >
           {{ facet.label }}
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index 057e7d6..2d5ada2 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -199,7 +199,7 @@ function handleFocus() {
         <!-- No dependency display -->
         <template v-if="pkg === NO_DEPENDENCY_ID">
           <span class="text-sm text-accent italic flex items-center gap-1.5">
-            <span class="i-carbon:clean w-3.5 h-3.5" aria-hidden="true" />
+            <span class="i-lucide:leaf w-3.5 h-3.5" aria-hidden="true" />
             {{ $t('compare.no_dependency.label') }}
           </span>
         </template>
@@ -214,7 +214,7 @@ function handleFocus() {
             })
           "
           @click="removePackage(pkg)"
-          classicon="i-carbon:close"
+          classicon="i-lucide:x"
         />
       </TagStatic>
     </div>
@@ -273,7 +273,7 @@ function handleFocus() {
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
             <span class="text-sm text-accent italic flex items-center gap-2">
-              <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:leaf w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
             </span>
             <span class="text-xs text-fg-muted truncate mt-0.5">
diff --git a/app/components/Compare/ReplacementSuggestion.vue b/app/components/Compare/ReplacementSuggestion.vue
index 17c35a8..169c850 100644
--- a/app/components/Compare/ReplacementSuggestion.vue
+++ b/app/components/Compare/ReplacementSuggestion.vue
@@ -31,7 +31,7 @@ const docUrl = computed(() => {
   >
     <span
       class="w-4 h-4 flex-shrink-0 mt-0.5"
-      :class="variant === 'nodep' ? 'i-carbon:idea' : 'i-carbon:information'"
+      :class="variant === 'nodep' ? 'i-lucide:lightbulb' : 'i-lucide:info'"
     />
     <div class="min-w-0 flex-1">
       <p class="font-medium">{{ packageName }}: {{ $t('package.replacement.title') }}</p>
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
index 4872288..9d0f40b 100644
--- a/app/components/DependencyPathPopup.vue
+++ b/app/components/DependencyPathPopup.vue
@@ -72,7 +72,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >
-      <span class="i-carbon:tree-view w-3 h-3" aria-hidden="true" />
+      <span class="i-lucide:network w-3 h-3" aria-hidden="true" />
       <span>{{ $t('package.vulnerabilities.path') }}</span>
     </button>
 
diff --git a/app/components/Filter/Chips.vue b/app/components/Filter/Chips.vue
index 059cc2a..6279da8 100644
--- a/app/components/Filter/Chips.vue
+++ b/app/components/Filter/Chips.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >
-          <span class="i-carbon-close w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
         </button>
       </TagStatic>
     </TransitionGroup>
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 34f2fb0..788403a 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -193,14 +193,14 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
       @click="isExpanded = !isExpanded"
     >
       <span class="flex items-center gap-2 text-sm font-mono text-fg shrink-0">
-        <span class="i-carbon-filter w-4 h-4" aria-hidden="true" />
+        <span class="i-lucide:funnel w-4 h-4" aria-hidden="true" />
         {{ $t('filters.title') }}
       </span>
       <span v-if="!isExpanded && hasActiveFilters" class="text-xs font-mono text-fg-muted truncate">
         {{ filterSummary }}
       </span>
       <span
-        class="i-carbon-chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ms-auto"
+        class="i-lucide:chevron-down w-4 h-4 text-fg-subtle transition-transform duration-200 shrink-0 ms-auto"
         :class="{ 'rotate-180': isExpanded }"
         aria-hidden="true"
       />
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index b2c9963..00fa7a1 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -83,7 +83,7 @@ function openAuthModal() {
           v-else-if="isNpmConnected"
           class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
         >
-          <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+          <span class="i-lucide:terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
 
         <!-- Atmosphere avatar (second/front, overlapping) -->
@@ -101,7 +101,7 @@ function openAuthModal() {
           class="w-6 h-6 rounded-full bg-bg-muted ring-2 ring-bg flex items-center justify-center"
           :class="hasBothConnections ? 'relative z-10' : ''"
         >
-          <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+          <span class="i-lucide:at-sign w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
       </span>
 
@@ -112,7 +112,7 @@ function openAuthModal() {
 
       <!-- Chevron -->
       <span
-        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        class="i-lucide:chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
@@ -161,7 +161,7 @@ function openAuthModal() {
                 v-else
                 class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
               >
-                <span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
+                <span class="i-lucide:terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
                 <span class="font-mono text-sm text-fg truncate block">~{{ npmUser }}</span>
@@ -203,7 +203,7 @@ function openAuthModal() {
                 v-else
                 class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center"
               >
-                <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
+                <span class="i-lucide:at-sign w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
                 <span class="font-mono text-sm text-fg truncate block"
@@ -231,10 +231,10 @@ function openAuthModal() {
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span
                   v-if="isNpmConnecting"
-                  class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
+                  class="i-svg-spinners:ring-resize w-4 h-4 text-yellow-500 animate-spin"
                   aria-hidden="true"
                 />
-                <span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
+                <span v-else class="i-lucide:terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
                 <span class="font-mono text-sm text-fg block">
@@ -255,7 +255,7 @@ function openAuthModal() {
               @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
-                <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
+                <span class="i-lucide:at-sign w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
                 <span class="font-mono text-sm text-fg block">
diff --git a/app/components/Header/AccountMenu.server.vue b/app/components/Header/AccountMenu.server.vue
index f5fc08a..fc8b783 100644
--- a/app/components/Header/AccountMenu.server.vue
+++ b/app/components/Header/AccountMenu.server.vue
@@ -4,7 +4,7 @@
       class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border-none"
     >
       <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
-      <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
+      <span class="i-lucide:chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
     </div>
   </div>
 </template>
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index baccae9..f0f2ea2 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -132,7 +132,7 @@ watch(handleInput, newHandleInput => {
         type="button"
         class="w-full"
         @click="handleBlueskySignIn"
-        classicon="i-carbon:logo-bluesky"
+        classicon="i-simple-icons:bluesky"
       >
         {{ $t('auth.modal.connect_bluesky') }}
       </ButtonBase>
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index c0e3367..445161d 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -121,7 +121,7 @@ function handleDisconnect() {
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
           @click="copy('pnpm npmx-connector')"
           class="ms-auto"
-          :classicon="copied ? 'i-carbon:checkmark text-green-500' : 'i-carbon:copy'"
+          :classicon="copied ? 'i-lucide:check text-green-500' : 'i-lucide:copy'"
         />
       </div>
 
@@ -142,10 +142,10 @@ function handleDisconnect() {
                           class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
                           @click="copyCommand"
                         >
-                          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+                          <span v-if="!copied" class="i-lucide:copy block w-5 h-5" aria-hidden="true" />
                           <span
                             v-else
-                            class="i-carbon:checkmark block w-5 h-5 text-green-500"
+                            class="i-lucide:check block w-5 h-5 text-green-500"
                             aria-hidden="true"
                           />
                         </button>
diff --git a/app/components/Header/MobileMenu.client.vue b/app/components/Header/MobileMenu.client.vue
index 36579cc..49c5149 100644
--- a/app/components/Header/MobileMenu.client.vue
+++ b/app/components/Header/MobileMenu.client.vue
@@ -99,7 +99,7 @@ onUnmounted(deactivate)
                 :aria-label="$t('common.close')"
                 @click="closeMenu"
               >
-                <span class="i-carbon:close w-5 h-5" aria-hidden="true" />
+                <span class="i-lucide:x w-5 h-5" aria-hidden="true" />
               </button>
             </div>
 
@@ -130,7 +130,7 @@ onUnmounted(deactivate)
                   v-else
                   class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon-terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
+                  <span class="i-lucide:terminal w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1">~{{ npmUser }}</span>
                 <span class="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
@@ -155,7 +155,7 @@ onUnmounted(deactivate)
                   v-else
                   class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center"
                 >
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                  <span class="i-lucide:at-sign w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1 truncate">@{{ atprotoUser.handle }}</span>
               </button>
@@ -168,7 +168,7 @@ onUnmounted(deactivate)
                 @click="handleShowAuth"
               >
                 <span class="w-5 h-5 rounded-full bg-bg-muted flex items-center justify-center">
-                  <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
+                  <span class="i-lucide:at-sign w-3 h-3 text-fg-muted" aria-hidden="true" />
                 </span>
                 <span class="flex-1">{{ $t('account_menu.connect_atmosphere') }}</span>
               </button>
@@ -211,7 +211,7 @@ onUnmounted(deactivate)
                       {{ link.label }}
                       <span
                         v-if="link.external"
-                        class="i-carbon:launch rtl-flip w-3 h-3 ms-auto text-fg-subtle"
+                        class="i-lucide:external-link rtl-flip w-3 h-3 ms-auto text-fg-subtle"
                         aria-hidden="true"
                       />
                     </NuxtLink>
diff --git a/app/components/Header/OrgsDropdown.vue b/app/components/Header/OrgsDropdown.vue
index 222319c..b07b635 100644
--- a/app/components/Header/OrgsDropdown.vue
+++ b/app/components/Header/OrgsDropdown.vue
@@ -63,7 +63,7 @@ function handleKeydown(event: KeyboardEvent) {
     >
       {{ $t('header.orgs') }}
       <span
-        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        class="i-lucide:chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.orgs_dropdown.view_all') }}
-              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+              <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
         </div>
diff --git a/app/components/Header/PackagesDropdown.vue b/app/components/Header/PackagesDropdown.vue
index ddd9f86..3f70c64 100644
--- a/app/components/Header/PackagesDropdown.vue
+++ b/app/components/Header/PackagesDropdown.vue
@@ -63,7 +63,7 @@ function handleKeydown(event: KeyboardEvent) {
     >
       {{ $t('header.packages') }}
       <span
-        class="i-carbon-chevron-down w-3 h-3 transition-transform duration-200"
+        class="i-lucide:chevron-down w-3 h-3 transition-transform duration-200"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.packages_dropdown.view_all') }}
-              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+              <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
         </div>
diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index eda37fe..c83cb46 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -28,7 +28,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
     </template>
     <span
       v-if="hasAnyValidLicense"
-      class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 self-center"
+      class="i-lucide:scale w-3.5 h-3.5 text-fg-subtle flex-shrink-0 self-center"
       aria-hidden="true"
     />
   </span>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 968fa44..1dffa3d 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -101,12 +101,12 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
     <!-- automatically show icon indicating external link -->
     <span
       v-if="isLinkExternal && !classicon"
-      class="i-carbon:launch rtl-flip size-[1em] opacity-50"
+      class="i-lucide:external-link rtl-flip size-[1em] opacity-50"
       aria-hidden="true"
     />
     <span
       v-else-if="isLinkAnchor && isLink"
-      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
+      class="i-lucide:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
     <kbd
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 2b81fc4..54d97fe 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -57,7 +57,7 @@ defineExpose({
           type="button"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
-          classicon="i-carbon-close"
+          classicon="i-lucide:x"
         />
       </div>
       <!-- Modal body content -->
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
index 757030e..580f35e 100644
--- a/app/components/Org/MembersPanel.vue
+++ b/app/components/Org/MembersPanel.vue
@@ -304,7 +304,7 @@ watch(lastExecutionTime, () => {
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="members-heading" class="font-mono text-sm font-medium flex items-center gap-2">
-        <span class="i-carbon:user-multiple w-4 h-4 text-fg-muted" aria-hidden="true" />
+        <span class="i-lucide:users w-4 h-4 text-fg-muted" aria-hidden="true" />
         {{ $t('org.members.title') }}
         <span v-if="memberList.length > 0" class="text-fg-muted">({{ memberList.length }})</span>
       </h2>
@@ -316,7 +316,7 @@ watch(lastExecutionTime, () => {
         @click="refreshData"
       >
         <span
-          class="i-carbon:renew w-4 h-4"
+          class="i-lucide:refresh-ccw w-4 h-4"
           :class="{ 'motion-safe:animate-spin': isLoading || isLoadingTeams }"
           aria-hidden="true"
         />
@@ -327,7 +327,7 @@ watch(lastExecutionTime, () => {
     <div class="flex flex-wrap items-center gap-2 p-3 border-b border-border bg-bg">
       <div class="flex-1 min-w-[150px] relative">
         <span
-          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon:search w-3.5 h-3.5 text-fg-subtle"
+          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-lucide:search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
         <label for="members-search" class="sr-only">{{ $t('org.members.filter_label') }}</label>
@@ -407,7 +407,7 @@ watch(lastExecutionTime, () => {
     <!-- Loading state -->
     <div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
       <span
-        class="i-carbon:rotate-180 w-5 h-5 text-fg-muted animate-spin mx-auto"
+        class="i-svg-spinners:ring-resize w-5 h-5 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
       <p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.members.loading') }}</p>
@@ -486,7 +486,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
-              <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </div>
@@ -572,7 +572,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
-              <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+              <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </form>
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index 60341b2..ca16844 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -158,17 +158,17 @@ function getStatusColor(status: string): string {
 function getStatusIcon(status: string): string {
   switch (status) {
     case 'pending':
-      return 'i-carbon:time'
+      return 'i-lucide:clock'
     case 'approved':
-      return 'i-carbon:checkmark'
+      return 'i-lucide:check'
     case 'running':
-      return 'i-carbon:rotate-180'
+      return 'i-svg-spinners:ring-resize'
     case 'completed':
-      return 'i-carbon:checkmark-filled'
+      return 'i-lucide:check-filled'
     case 'failed':
-      return 'i-carbon:close-filled'
+      return 'i-lucide:x-filled'
     default:
-      return 'i-carbon:help'
+      return 'i-lucide:circle-question-mark'
   }
 }
 
@@ -211,7 +211,7 @@ watch(isExecuting, executing => {
           :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
-          <span class="i-carbon:renew w-4 h-4" aria-hidden="true" />
+          <span class="i-lucide:refresh-ccw w-4 h-4" aria-hidden="true" />
         </button>
       </div>
     </div>
@@ -283,7 +283,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
-            <span class="i-carbon:checkmark w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:check w-4 h-4" aria-hidden="true" />
           </button>
           <button
             v-if="op.status !== 'running'"
@@ -292,7 +292,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </li>
@@ -305,7 +305,7 @@ watch(isExecuting, executing => {
       role="alert"
     >
       <div class="flex items-center gap-2 mb-2">
-        <span class="i-carbon:locked w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
+        <span class="i-lucide:lock w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
         <span class="font-mono text-sm text-amber-400">
           {{ $t('operations.queue.otp_prompt') }}
         </span>
@@ -384,7 +384,7 @@ watch(isExecuting, executing => {
         class="flex-1 px-4 py-2 font-mono text-sm text-accent bg-accent/10 border border-accent/30 rounded-md transition-colors duration-200 hover:bg-accent/20"
         @click="handleOpenAuthUrl"
       >
-        <span class="i-carbon:launch w-4 h-4 inline-block me-1" aria-hidden="true" />
+        <span class="i-lucide:external-link w-4 h-4 inline-block me-1" aria-hidden="true" />
         {{ $t('operations.queue.open_web_auth') }}
       </button>
     </div>
@@ -395,7 +395,7 @@ watch(isExecuting, executing => {
         class="flex items-center gap-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 select-none"
       >
         <span
-          class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
+          class="i-lucide:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
           aria-hidden="true"
         />
         {{ $t('operations.queue.log') }} ({{ completedOperations.length }})
@@ -410,8 +410,8 @@ watch(isExecuting, executing => {
           <span
             :class="
               op.status === 'completed'
-                ? 'i-carbon:checkmark-filled text-green-500'
-                : 'i-carbon:close-filled text-red-500'
+                ? 'i-lucide:check-filled text-green-500'
+                : 'i-lucide:x-filled text-red-500'
             "
             class="w-3.5 h-3.5 shrink-0 mt-0.5"
             aria-hidden="true"
@@ -431,7 +431,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon:close w-3 h-3" aria-hidden="true" />
+            <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
           </button>
         </li>
       </ul>
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
index ad378e5..b0ddf52 100644
--- a/app/components/Org/TeamsPanel.vue
+++ b/app/components/Org/TeamsPanel.vue
@@ -259,7 +259,7 @@ watch(lastExecutionTime, () => {
     <!-- Header -->
     <div class="flex items-center justify-start p-4 border-b border-border">
       <h2 id="teams-heading" class="font-mono text-sm font-medium flex items-center gap-2">
-        <span class="i-carbon:group w-4 h-4 text-fg-muted" aria-hidden="true" />
+        <span class="i-lucide:users w-4 h-4 text-fg-muted" aria-hidden="true" />
         {{ $t('org.teams.title') }}
         <span v-if="teams.length > 0" class="text-fg-muted">({{ teams.length }})</span>
       </h2>
@@ -272,7 +272,7 @@ watch(lastExecutionTime, () => {
         @click="loadTeams"
       >
         <span
-          class="i-carbon:renew w-4 h-4"
+          class="i-lucide:refresh-ccw w-4 h-4"
           :class="{ 'animate-spin': isLoadingTeams }"
           aria-hidden="true"
         />
@@ -283,7 +283,7 @@ watch(lastExecutionTime, () => {
     <div class="flex items-center gap-2 p-3 border-b border-border bg-bg">
       <div class="flex-1 relative">
         <span
-          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon:search w-3.5 h-3.5 text-fg-subtle"
+          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-lucide:search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
         <label for="teams-search" class="sr-only">{{ $t('org.teams.filter_label') }}</label>
@@ -328,10 +328,7 @@ watch(lastExecutionTime, () => {
 
     <!-- Loading state -->
     <div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
-      <span
-        class="i-carbon:rotate-180 w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
-        aria-hidden="true"
-      />
+      <span class="i-svg-spinners:ring-resize w-5 h-5 text-fg-muted mx-auto" aria-hidden="true" />
       <p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
     </div>
 
@@ -371,7 +368,7 @@ watch(lastExecutionTime, () => {
             <span
               class="w-4 h-4 transition-transform duration-200 rtl-flip"
               :class="[
-                expandedTeams.has(teamName) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right',
+                expandedTeams.has(teamName) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right',
                 'text-fg-muted',
               ]"
               aria-hidden="true"
@@ -388,7 +385,7 @@ watch(lastExecutionTime, () => {
             </span>
             <span
               v-if="isLoadingUsers[teamName]"
-              class="i-carbon:rotate-180 w-3 h-3 text-fg-muted motion-safe:animate-spin"
+              class="i-svg-spinners:ring-resize w-3 h-3 text-fg-muted"
               aria-hidden="true"
             />
           </button>
@@ -399,7 +396,7 @@ watch(lastExecutionTime, () => {
             :aria-label="$t('org.teams.delete_team', { name: teamName })"
             @click.stop="handleDestroyTeam(teamName)"
           >
-            <span class="i-carbon:trash-can w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:trash w-4 h-4" aria-hidden="true" />
           </button>
         </div>
 
@@ -433,7 +430,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
-                <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
+                <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
               </button>
             </li>
           </ul>
@@ -470,7 +467,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
-                <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
               </button>
             </form>
           </div>
@@ -528,7 +525,7 @@ watch(lastExecutionTime, () => {
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
-            <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
           </button>
         </form>
       </div>
diff --git a/app/components/Package/AccessControls.vue b/app/components/Package/AccessControls.vue
index 087ad47..05b2360 100644
--- a/app/components/Package/AccessControls.vue
+++ b/app/components/Package/AccessControls.vue
@@ -163,7 +163,7 @@ watch(
         @click="loadCollaborators"
       >
         <span
-          class="i-carbon-renew w-3.5 h-3.5"
+          class="i-lucide:refresh-ccw w-3.5 h-3.5"
           :class="{ 'motion-safe:animate-spin': isLoadingCollaborators }"
           aria-hidden="true"
         />
@@ -173,7 +173,7 @@ watch(
     <!-- Loading state -->
     <div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
       <span
-        class="i-carbon-rotate-180 w-4 h-4 text-fg-muted animate-spin mx-auto"
+        class="i-svg-spinners:ring-resize w-4 h-4 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
     </div>
@@ -197,12 +197,12 @@ watch(
         <div class="flex items-center gap-2 min-w-0">
           <span
             v-if="collab.isTeam"
-            class="i-carbon-group w-3.5 h-3.5 text-fg-subtle shrink-0"
+            class="i-lucide:users w-3.5 h-3.5 text-fg-subtle shrink-0"
             aria-hidden="true"
           />
           <span
             v-else
-            class="i-carbon-user w-3.5 h-3.5 text-fg-subtle shrink-0"
+            class="i-lucide:user w-3.5 h-3.5 text-fg-subtle shrink-0"
             aria-hidden="true"
           />
           <span class="font-mono text-sm text-fg-muted truncate">
@@ -229,7 +229,7 @@ watch(
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
-          <span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
         </button>
         <span v-else class="text-xs text-fg-subtle"> {{ $t('package.access.owner') }} </span>
       </li>
@@ -289,7 +289,7 @@ watch(
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
-            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:x w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </form>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index f0423b1..12d2526 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -118,7 +118,7 @@ const numberFormatter = useNumberFormatter()
           <div class="flex items-center gap-1.5">
             <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
             <dd class="flex items-center gap-1.5">
-              <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
+              <span class="i-lucide:chart-line w-3.5 h-3.5" aria-hidden="true" />
               <span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
             </dd>
           </div>
@@ -152,7 +152,7 @@ const numberFormatter = useNumberFormatter()
           v-if="result.downloads?.weekly"
           class="text-fg-subtle gap-2 flex items-center justify-end"
         >
-          <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:chart-line w-3.5 h-3.5" aria-hidden="true" />
           <span class="font-mono text-xs">
             {{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
           </span>
diff --git a/app/components/Package/ClaimPackageModal.vue b/app/components/Package/ClaimPackageModal.vue
index e87515e..5d1ccc8 100644
--- a/app/components/Package/ClaimPackageModal.vue
+++ b/app/components/Package/ClaimPackageModal.vue
@@ -158,7 +158,7 @@ const previewPackageJson = computed(() => {
       <div
         class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
       >
-        <span class="i-carbon-checkmark-filled text-green-500 w-6 h-6" aria-hidden="true" />
+        <span class="i-lucide:check-filled text-green-500 w-6 h-6" aria-hidden="true" />
         <div>
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.success') }}</p>
           <p class="text-xs text-fg-muted">
@@ -226,7 +226,7 @@ const previewPackageJson = computed(() => {
           v-if="checkResult.available"
           class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
         >
-          <span class="i-carbon-checkmark-filled text-green-500 w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:check-filled text-green-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.available') }}</p>
         </div>
 
@@ -234,7 +234,7 @@ const previewPackageJson = computed(() => {
           v-else
           class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
         >
-          <span class="i-carbon-close-filled text-red-500 w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:x-filled text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
       </div>
@@ -266,12 +266,12 @@ const previewPackageJson = computed(() => {
             >
               <span
                 v-if="pkg.similarity === 'exact-match'"
-                class="i-carbon-warning-filled text-red-500 w-4 h-4 mt-0.5 shrink-0"
+                class="i-lucide:circle-alert text-red-500 w-4 h-4 mt-0.5 shrink-0"
                 aria-hidden="true"
               />
               <span
                 v-else-if="pkg.similarity === 'very-similar'"
-                class="i-carbon-warning text-yellow-500 w-4 h-4 mt-0.5 shrink-0"
+                class="i-lucide:circle-alert text-yellow-500 w-4 h-4 mt-0.5 shrink-0"
                 aria-hidden="true"
               />
               <span v-else class="w-4 h-4 shrink-0" />
diff --git a/app/components/Package/Compatibility.vue b/app/components/Package/Compatibility.vue
index 78f67ce..149b84d 100644
--- a/app/components/Package/Compatibility.vue
+++ b/app/components/Package/Compatibility.vue
@@ -23,7 +23,7 @@ function getName(engine: string): string {
 }
 
 function getIcon(engine: string): string {
-  return engineIcons[engine] || 'i-carbon:code'
+  return engineIcons[engine] || 'i-lucide:code'
 }
 
 const sortedEngines = computed(() => {
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 74427ce..ec8e29f 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -102,7 +102,7 @@ const numberFormatter = useNumberFormatter()
               aria-hidden="true"
               :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
             >
-              <span class="i-carbon:warning-alt w-3 h-3" />
+              <span class="i-lucide:circle-alert w-3 h-3" />
             </TooltipApp>
             <LinkBase
               v-if="getVulnerableDepInfo(dep)"
@@ -110,7 +110,7 @@ const numberFormatter = useNumberFormatter()
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
-              classicon="i-carbon:security"
+              classicon="i-lucide:shield-check"
             >
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </LinkBase>
@@ -119,7 +119,7 @@ const numberFormatter = useNumberFormatter()
               :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
               class="shrink-0 text-purple-700 dark:text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
-              classicon="i-carbon:warning-hex"
+              classicon="i-lucide:octagon-alert"
             >
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index d8e06b7..079427c 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -54,13 +54,13 @@ function getDepthStyle(depth: DependencyDepth) {
         @click="isExpanded = !isExpanded"
       >
         <span class="flex items-center gap-2 min-w-0">
-          <span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
+          <span class="i-lucide:octagon-alert w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
           </span>
         </span>
         <span
-          class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
+          class="i-lucide:chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
           :class="{ 'rotate-180': isExpanded }"
           aria-hidden="true"
         />
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index f45a572..9b9d591 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -61,7 +61,7 @@ const isExpanded = shallowRef(false)
   <CollapsibleSection
     :title="$t('package.install_scripts.title')"
     id="installScripts"
-    icon="i-carbon:warning-alt w-3 h-3 text-yellow-500"
+    icon="i-lucide:circle-alert w-3 h-3 text-yellow-500"
   >
     <!-- Script list: name as label, content below -->
     <dl class="space-y-2 m-0">
@@ -99,7 +99,7 @@ const isExpanded = shallowRef(false)
         @click="isExpanded = !isExpanded"
       >
         <span
-          class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200"
+          class="i-lucide:chevron-right rtl-flip w-3 h-3 transition-transform duration-200"
           :class="{ 'rotate-90': isExpanded }"
           aria-hidden="true"
         />
@@ -139,7 +139,7 @@ const isExpanded = shallowRef(false)
               aria-hidden="true"
               :text="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
             >
-              <span class="i-carbon:warning-alt w-3 h-3" />
+              <span class="i-lucide:circle-alert w-3 h-3" />
             </TooltipApp>
             <span
               class="font-mono text-xs text-end truncate"
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
index 321272a..95ce64e 100644
--- a/app/components/Package/ListControls.vue
+++ b/app/components/Package/ListControls.vue
@@ -59,7 +59,7 @@ const showFilteredCount = computed(() => {
         class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
         aria-hidden="true"
       >
-        <div class="i-carbon:search w-4 h-4" />
+        <div class="i-lucide:search w-4 h-4" />
       </div>
       <InputBase
         id="package-filter"
diff --git a/app/components/Package/ListToolbar.vue b/app/components/Package/ListToolbar.vue
index daee439..8aad0a8 100644
--- a/app/components/Package/ListToolbar.vue
+++ b/app/components/Package/ListToolbar.vue
@@ -194,8 +194,8 @@ function getSortKeyLabelKey(key: SortKey): string {
               class="w-4 h-4 block transition-transform duration-200"
               :class="
                 currentSort.direction === 'asc'
-                  ? 'i-carbon-sort-ascending'
-                  : 'i-carbon-sort-descending'
+                  ? 'i-lucide:arrow-down-narrow-wide'
+                  : 'i-lucide:arrow-down-wide-narrow'
               "
               aria-hidden="true"
             />
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index cd08b4e..340ff95 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -228,7 +228,7 @@ watch(
           "
           @click="handleRemoveOwner(maintainer.name)"
         >
-          <span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:x w-3.5 h-3.5" aria-hidden="true" />
         </ButtonBase>
       </li>
     </ul>
@@ -270,7 +270,7 @@ watch(
           <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-            classicon="i-carbon-close"
+            classicon="i-lucide:x"
           />
         </form>
       </div>
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 0d4de0b..2f9e3d5 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -111,7 +111,7 @@ function handleKeydown(event: KeyboardEvent) {
       >
     </template>
     <span
-      class="i-carbon:chevron-down w-3 h-3"
+      class="i-lucide:chevron-down w-3 h-3"
       :class="[
         { 'rotate-180': isOpen },
         prefersReducedMotion ? '' : 'transition-transform duration-200',
@@ -162,7 +162,7 @@ function handleKeydown(event: KeyboardEvent) {
           <span>{{ pm.label }}</span>
           <span
             v-if="selectedPM === pm.id"
-            class="i-carbon:checkmark w-3 h-3 text-accent ms-auto"
+            class="i-lucide:check w-3 h-3 text-accent ms-auto"
             aria-hidden="true"
           />
         </li>
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 7ad9b6d..b749df5 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -63,7 +63,7 @@ const typesHref = computed(() => {
           variant="button-secondary"
           size="small"
           :to="typesHref"
-          classicon="i-carbon:checkmark"
+          classicon="i-lucide:check"
         >
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
@@ -72,11 +72,7 @@ const typesHref = computed(() => {
           :variant="hasTypes && !isLoading ? 'default' : 'ghost'"
           :tabindex="0"
           :classicon="
-            isLoading
-              ? 'i-carbon:circle-dash motion-safe:animate-spin'
-              : hasTypes
-                ? 'i-carbon:checkmark'
-                : 'i-carbon:close'
+            isLoading ? 'i-svg-spinners:ring-resize ' : hasTypes ? 'i-lucide:check' : 'i-lucide:x'
           "
         >
           {{ $t('package.metrics.types_label') }}
@@ -94,11 +90,7 @@ const typesHref = computed(() => {
           tabindex="0"
           :variant="hasEsm && !isLoading ? 'default' : 'ghost'"
           :classicon="
-            isLoading
-              ? 'i-carbon:circle-dash motion-safe:animate-spin'
-              : hasEsm
-                ? 'i-carbon:checkmark'
-                : 'i-carbon:close'
+            isLoading ? 'i-svg-spinners:ring-resize ' : hasEsm ? 'i-lucide:check' : 'i-lucide:x'
           "
         >
           ESM
@@ -112,9 +104,7 @@ const typesHref = computed(() => {
         <TagStatic
           tabindex="0"
           :variant="isLoading ? 'ghost' : 'default'"
-          :classicon="
-            isLoading ? 'i-carbon:circle-dash motion-safe:animate-spin' : 'i-carbon:checkmark'
-          "
+          :classicon="isLoading ? 'i-svg-spinners:ring-resize ' : 'i-lucide:check'"
         >
           CJS
         </TagStatic>
diff --git a/app/components/Package/Playgrounds.vue b/app/components/Package/Playgrounds.vue
index 199439e..a79488f 100644
--- a/app/components/Package/Playgrounds.vue
+++ b/app/components/Package/Playgrounds.vue
@@ -16,7 +16,7 @@ const providerIcons: Record<string, string> = {
   'vue-playground': 'i-simple-icons:vuedotjs',
   'nuxt-new': 'i-simple-icons:nuxtdotjs',
   'vite-new': 'i-simple-icons:vite',
-  'jsfiddle': 'i-carbon:code',
+  'jsfiddle': 'i-lucide:code',
 }
 
 // Map provider id to color class
@@ -33,7 +33,7 @@ const providerColors: Record<string, string> = {
 }
 
 function getIcon(provider: string): string {
-  return providerIcons[provider] || 'i-carbon:play'
+  return providerIcons[provider] || 'i-lucide:play'
 }
 
 function getColor(provider: string): string {
@@ -145,13 +145,13 @@ function focusMenuItem(index: number) {
         @keydown="handleKeydown"
       >
         <span class="flex items-center gap-2">
-          <span class="i-carbon:play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+          <span class="i-lucide:play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
           <span class="text-fg-muted"
             >{{ $t('package.playgrounds.choose') }} ({{ links.length }})</span
           >
         </span>
         <span
-          class="i-carbon:chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
+          class="i-lucide:chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
           :class="{ 'rotate-180': isOpen }"
           aria-hidden="true"
         />
diff --git a/app/components/Package/Replacement.vue b/app/components/Package/Replacement.vue
index dd49440..f54eb17 100644
--- a/app/components/Package/Replacement.vue
+++ b/app/components/Package/Replacement.vue
@@ -21,7 +21,7 @@ const docPath = computed(() => {
     class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
   >
     <h2 class="font-medium mb-1 flex items-center gap-2">
-      <span class="i-carbon-idea w-4 h-4" aria-hidden="true" />
+      <span class="i-lucide:lightbulb w-4 h-4" aria-hidden="true" />
       {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
@@ -50,7 +50,7 @@ const docPath = computed(() => {
             class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
           >
             {{ $t('package.replacement.community') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
           </a>
         </template>
         <template #replacement>
@@ -70,7 +70,7 @@ const docPath = computed(() => {
             class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
           >
             {{ $t('package.replacement.community') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
           </a>
         </template>
       </i18n-t>
@@ -85,7 +85,7 @@ const docPath = computed(() => {
         class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
       >
         {{ $t('package.replacement.mdn') }}
-        <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+        <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
       </a>
       <a
         v-if="docPath"
@@ -95,7 +95,7 @@ const docPath = computed(() => {
         class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
       >
         {{ $t('package.replacement.learn_more') }}
-        <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+        <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
       </a>
     </p>
   </div>
diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 66ce3ed..0617677 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -208,7 +208,7 @@
                 class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
               >
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:chevron-down w-3 h-3" aria-hidden="true" />
                 </span>
                 {{ $t('package.downloads.title') }}
               </h2>
@@ -245,7 +245,7 @@
                 class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
               >
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:chevron-down w-3 h-3" aria-hidden="true" />
                 </span>
                 {{ $t('package.compatibility') }}
               </h2>
@@ -265,7 +265,7 @@
                 class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
               >
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:chevron-down w-3 h-3" aria-hidden="true" />
                 </span>
                 {{ $t('package.skeleton.versions') }}
               </h2>
@@ -274,7 +274,7 @@
               <!-- Version rows with expand chevron + version + tag + date -->
               <div v-for="i in 4" :key="i" class="flex items-center gap-2 px-1">
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-right w-3 h-3 text-fg-subtle" aria-hidden="true" />
+                  <span class="i-lucide:chevron-right w-3 h-3 text-fg-subtle" aria-hidden="true" />
                 </span>
                 <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
                   <div>
@@ -290,7 +290,7 @@
               <!-- Other versions row -->
               <div class="flex items-center gap-2 p-1">
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-right w-3 h-3 text-fg-subtle" aria-hidden="true" />
+                  <span class="i-lucide:chevron-right w-3 h-3 text-fg-subtle" aria-hidden="true" />
                 </span>
                 <SkeletonInline class="h-3 w-28" />
               </div>
@@ -304,7 +304,7 @@
                 class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
               >
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:chevron-down w-3 h-3" aria-hidden="true" />
                 </span>
                 {{ $t('package.skeleton.dependencies') }}
               </h2>
@@ -336,7 +336,7 @@
                 class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
               >
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:chevron-down w-3 h-3" aria-hidden="true" />
                 </span>
                 {{ $t('package.skeleton.keywords') }}
               </h2>
@@ -358,7 +358,7 @@
                 class="text-xs font-mono text-fg-subtle uppercase tracking-wider flex items-center gap-2"
               >
                 <span class="w-4 h-4 flex items-center justify-center shrink-0">
-                  <span class="i-carbon:chevron-down w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:chevron-down w-3 h-3" aria-hidden="true" />
                 </span>
                 {{ $t('package.skeleton.maintainers') }}
               </h2>
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index 83708be..ff418c6 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -110,7 +110,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors shrink-0"
       >
         {{ $t('package.skills.learn_more') }}
-        <span class="i-carbon:arrow-right w-3 h-3" />
+        <span class="i-lucide:arrow-right w-3 h-3" />
       </a>
     </div>
 
@@ -159,7 +159,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
           @click="toggleSkill(skill.dirName)"
         >
           <span
-            class="i-carbon:chevron-right w-3 h-3 text-fg-subtle shrink-0 transition-transform duration-200"
+            class="i-lucide:chevron-right w-3 h-3 text-fg-subtle shrink-0 transition-transform duration-200"
             :class="{ 'rotate-90': expandedSkills.has(skill.dirName) }"
             aria-hidden="true"
           />
@@ -171,7 +171,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             :text="getWarningTooltip(skill)"
             to="#skills-modal"
           >
-            <span class="i-carbon:warning w-3.5 h-3.5 text-amber-500" />
+            <span class="i-lucide:circle-alert w-3.5 h-3.5 text-amber-500" />
           </TooltipApp>
         </button>
 
@@ -193,7 +193,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               <!-- File counts & warnings -->
               <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
                 <span v-if="skill.fileCounts?.scripts" class="text-fg-subtle">
-                  <span class="i-carbon:script size-3 align-[-2px] me-0.5" />{{
+                  <span class="i-lucide:file-code size-3 align-[-2px] me-0.5" />{{
                     $t(
                       'package.skills.file_counts.scripts',
                       { count: skill.fileCounts.scripts },
@@ -202,7 +202,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                   }}
                 </span>
                 <span v-if="skill.fileCounts?.references" class="text-fg-subtle">
-                  <span class="i-carbon:document size-3 align-[-2px] me-0.5" />{{
+                  <span class="i-lucide:file-text size-3 align-[-2px] me-0.5" />{{
                     $t(
                       'package.skills.file_counts.refs',
                       { count: skill.fileCounts.references },
@@ -211,7 +211,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                   }}
                 </span>
                 <span v-if="skill.fileCounts?.assets" class="text-fg-subtle">
-                  <span class="i-carbon:image size-3 align-[-2px] me-0.5" />{{
+                  <span class="i-lucide:image size-3 align-[-2px] me-0.5" />{{
                     $t(
                       'package.skills.file_counts.assets',
                       { count: skill.fileCounts.assets },
@@ -221,7 +221,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                 </span>
                 <template v-for="warning in skill.warnings" :key="warning.message">
                   <span class="text-amber-500">
-                    <span class="i-carbon:warning size-3 align-[-2px] me-0.5" />{{
+                    <span class="i-lucide:circle-alert size-3 align-[-2px] me-0.5" />{{
                       warning.message
                     }}
                   </span>
@@ -234,7 +234,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                 class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors"
                 @click.stop
               >
-                <span class="i-carbon:code size-3" />{{ $t('package.skills.view_source') }}
+                <span class="i-lucide:code size-3" />{{ $t('package.skills.view_source') }}
               </NuxtLink>
             </div>
           </div>
diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index fa3ab3c..d713375 100644
--- a/app/components/Package/Table.vue
+++ b/app/components/Package/Table.vue
@@ -139,11 +139,15 @@ function getColumnLabel(id: ColumnId): string {
               <template v-if="isSortable('name')">
                 <span
                   v-if="isColumnSorted('name')"
-                  class="i-carbon-caret-down w-3 h-3"
+                  class="i-lucide:chevron-down w-3 h-3"
                   :class="getSortDirection('name') === 'asc' ? 'rotate-180' : ''"
                   aria-hidden="true"
                 />
-                <span v-else class="i-carbon-caret-sort w-3 h-3 opacity-30" aria-hidden="true" />
+                <span
+                  v-else
+                  class="i-lucide:chevrons-up-down w-3 h-3 opacity-30"
+                  aria-hidden="true"
+                />
               </template>
             </span>
           </th>
@@ -189,11 +193,15 @@ function getColumnLabel(id: ColumnId): string {
               <template v-if="isSortable('downloads')">
                 <span
                   v-if="isColumnSorted('downloads')"
-                  class="i-carbon-caret-down w-3 h-3"
+                  class="i-lucide:caret-down w-3 h-3"
                   :class="getSortDirection('downloads') === 'asc' ? 'rotate-180' : ''"
                   aria-hidden="true"
                 />
-                <span v-else class="i-carbon-caret-sort w-3 h-3 opacity-30" aria-hidden="true" />
+                <span
+                  v-else
+                  class="i-lucide:chevrons-up-down w-3 h-3 opacity-30"
+                  aria-hidden="true"
+                />
               </template>
             </span>
           </th>
@@ -223,11 +231,15 @@ function getColumnLabel(id: ColumnId): string {
               <template v-if="isSortable('updated')">
                 <span
                   v-if="isColumnSorted('updated')"
-                  class="i-carbon-caret-down w-3 h-3"
+                  class="i-lucide:caret-down w-3 h-3"
                   :class="getSortDirection('updated') === 'asc' ? 'rotate-180' : ''"
                   aria-hidden="true"
                 />
-                <span v-else class="i-carbon-caret-sort w-3 h-3 opacity-30" aria-hidden="true" />
+                <span
+                  v-else
+                  class="i-lucide:chevrons-up-down w-3 h-3 opacity-30"
+                  aria-hidden="true"
+                />
               </template>
             </span>
           </th>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 0cf385b..017d1b2 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -187,11 +187,11 @@ const allMaintainersText = computed(() => {
     <!-- Security -->
     <td v-if="isColumnVisible('security')" class="py-2 px-3">
       <span v-if="result.flags?.insecure" class="text-syntax-kw">
-        <span class="i-carbon-warning w-4 h-4" aria-hidden="true" />
+        <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
         <span class="sr-only">{{ $t('filters.table.security_warning') }}</span>
       </span>
       <span v-else-if="result.flags !== undefined" class="text-provider-nuxt">
-        <span class="i-carbon-checkmark w-4 h-4" aria-hidden="true" />
+        <span class="i-lucide:check w-4 h-4" aria-hidden="true" />
         <span class="sr-only">{{ $t('filters.table.secure') }}</span>
       </span>
       <span v-else class="text-fg-subtle"> - </span>
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index ce12285..984acb0 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1490,7 +1490,7 @@ watch(selectedMetric, value => {
             </label>
             <div class="relative flex items-center">
               <span
-                class="absolute inset-is-2 i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
+                class="absolute inset-is-2 i-lucide:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
                 aria-hidden="true"
               />
               <InputBase
@@ -1510,7 +1510,7 @@ watch(selectedMetric, value => {
             </label>
             <div class="relative flex items-center">
               <span
-                class="absolute inset-is-2 i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
+                class="absolute inset-is-2 i-lucide:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
                 aria-hidden="true"
               />
               <InputBase
@@ -1532,7 +1532,7 @@ watch(selectedMetric, value => {
           class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
           @click="resetDateRange"
         >
-          <span class="i-carbon:reset w-5 h-5" aria-hidden="true" />
+          <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
         </button>
       </div>
     </div>
@@ -1661,58 +1661,46 @@ watch(selectedMetric, value => {
             </template>
 
             <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
-              <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
+              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
             </template>
             <template #optionCsv>
-              <span
-                class="i-carbon:csv w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+              <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
             </template>
             <template #optionImg>
-              <span
-                class="i-carbon:png w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
             </template>
             <template #optionSvg>
-              <span
-                class="i-carbon:svg w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
             </template>
 
             <template #annotator-action-close>
               <span
-                class="i-carbon:close w-6 h-6 text-fg-subtle"
+                class="i-lucide:x w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
             </template>
             <template #annotator-action-color="{ color }">
-              <span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
+              <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
             </template>
             <template #annotator-action-undo>
               <span
-                class="i-carbon:undo w-6 h-6 text-fg-subtle"
+                class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
             </template>
             <template #annotator-action-redo>
               <span
-                class="i-carbon:redo w-6 h-6 text-fg-subtle"
+                class="i-lucide:redo-2 w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
             </template>
             <template #annotator-action-delete>
               <span
-                class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
+                class="i-lucide:trash w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
@@ -1720,13 +1708,13 @@ watch(selectedMetric, value => {
             <template #optionAnnotator="{ isAnnotator }">
               <span
                 v-if="isAnnotator"
-                class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
+                class="i-lucide:pen-off w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
               <span
                 v-else
-                class="i-carbon:edit w-6 h-6 text-fg-subtle"
+                class="i-lucide:pen w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 9cf79b9..7513f6e 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -388,7 +388,7 @@ const endDate = computed(() => {
               </label>
               <div class="relative flex items-center">
                 <span
-                  class="absolute inset-is-2 i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
+                  class="absolute inset-is-2 i-lucide:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
                   aria-hidden="true"
                 />
                 <InputBase
@@ -419,7 +419,7 @@ const endDate = computed(() => {
               </label>
               <div class="relative flex items-center">
                 <span
-                  class="absolute inset-is-2 i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
+                  class="absolute inset-is-2 i-lucide:calendar w-4 h-4 text-fg-subtle shrink-0 pointer-events-none"
                   aria-hidden="true"
                 />
                 <InputBase
@@ -523,51 +523,37 @@ const endDate = computed(() => {
 
             <!-- Contextual menu icon -->
             <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
-              <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
+              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
             </template>
 
             <!-- Export options -->
             <template #optionCsv>
-              <span
-                class="i-carbon:csv w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+              <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
             </template>
-
             <template #optionImg>
-              <span
-                class="i-carbon:png w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
             </template>
-
             <template #optionSvg>
-              <span
-                class="i-carbon:svg w-6 h-6 text-fg-subtle"
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
+              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
             </template>
 
             <!-- Annotator action icons -->
             <template #annotator-action-close>
               <span
-                class="i-carbon:close w-6 h-6 text-fg-subtle"
+                class="i-lucide:x w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
             </template>
 
             <template #annotator-action-color="{ color }">
-              <span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
+              <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
             </template>
 
             <template #annotator-action-undo>
               <span
-                class="i-carbon:undo w-6 h-6 text-fg-subtle"
+                class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
@@ -575,7 +561,7 @@ const endDate = computed(() => {
 
             <template #annotator-action-redo>
               <span
-                class="i-carbon:redo w-6 h-6 text-fg-subtle"
+                class="i-lucide:redo-2 w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
@@ -583,7 +569,7 @@ const endDate = computed(() => {
 
             <template #annotator-action-delete>
               <span
-                class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
+                class="i-lucide:trash w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
@@ -592,13 +578,13 @@ const endDate = computed(() => {
             <template #optionAnnotator="{ isAnnotator }">
               <span
                 v-if="isAnnotator"
-                class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
+                class="i-lucide:pen-off w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
               <span
                 v-else
-                class="i-carbon:edit w-6 h-6 text-fg-subtle"
+                class="i-lucide:pen w-6 h-6 text-fg-subtle"
                 style="pointer-events: none"
                 aria-hidden="true"
               />
@@ -614,7 +600,7 @@ const endDate = computed(() => {
       <!-- No-data state -->
       <div v-if="!hasData && !pending && !error" class="flex items-center justify-center h-full">
         <div class="text-sm text-fg-subtle font-mono text-center flex flex-col items-center gap-2">
-          <span class="i-carbon:data-vis-4 w-8 h-8" />
+          <span class="i-lucide:database w-8 h-8" />
           <p>{{ $t('package.trends.no_data') }}</p>
         </div>
       </div>
@@ -622,7 +608,7 @@ const endDate = computed(() => {
       <!-- Error state -->
       <div v-if="error" class="flex items-center justify-center h-full" role="alert">
         <div class="text-sm text-fg-subtle font-mono text-center flex flex-col items-center gap-2">
-          <span class="i-carbon:warning-hex w-8 h-8 text-red-400" />
+          <span class="i-lucide:octagon-alert w-8 h-8 text-red-400" />
           <p>{{ error.message }}</p>
           <p class="text-xs">Package: {{ packageName }}</p>
         </div>
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 2a9b2b7..3e60bbf 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -477,7 +477,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
         variant="secondary"
         class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 -m-1 p-1 rounded"
         :title="$t('package.downloads.community_distribution')"
-        classicon="i-carbon:load-balancer-network"
+        classicon="i-lucide:file-stack"
         @click="openDistributionModal"
       >
         <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
@@ -561,7 +561,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           >
             <span
               v-if="loadingTags.has(row.tag)"
-              class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
+              class="i-svg-spinners:ring-resize w-3 h-3"
               data-testid="loading-spinner"
               aria-hidden="true"
             />
@@ -569,7 +569,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
               v-else
               class="w-3 h-3 transition-transform duration-200 rtl-flip"
               :class="
-                expandedTags.has(row.tag) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'
+                expandedTags.has(row.tag) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'
               "
               aria-hidden="true"
             />
@@ -595,7 +595,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                       })
                     : row.primaryVersion.version
                 "
-                :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
+                :classicon="row.primaryVersion.deprecated ? 'i-lucide:octagon-alert' : undefined"
               >
                 <span dir="ltr" class="block truncate">
                   {{ row.primaryVersion.version }}
@@ -659,7 +659,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                       })
                     : v.version
                 "
-                :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
+                :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
               >
                 <span dir="ltr" class="block truncate">
                   {{ v.version }}
@@ -718,14 +718,14 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           >
             <span
               v-if="otherVersionsLoading"
-              class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
+              class="i-svg-spinners:ring-resize w-3 h-3"
               data-testid="loading-spinner"
               aria-hidden="true"
             />
             <span
               v-else
               class="w-3 h-3 transition-transform duration-200 rtl-flip"
-              :class="otherVersionsExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+              :class="otherVersionsExpanded ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
               aria-hidden="true"
             />
           </span>
@@ -769,7 +769,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                       })
                     : row.primaryVersion.version
                 "
-                :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
+                :classicon="row.primaryVersion.deprecated ? 'i-lucide:octagon-alert' : undefined"
               >
                 <span dir="ltr" class="block truncate">
                   {{ row.primaryVersion.version }}
@@ -829,8 +829,8 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                         class="w-3 h-3 transition-transform duration-200 rtl-flip"
                         :class="
                           expandedMajorGroups.has(group.groupKey)
-                            ? 'i-carbon:chevron-down'
-                            : 'i-carbon:chevron-right'
+                            ? 'i-lucide:chevron-down'
+                            : 'i-lucide:chevron-right'
                         "
                         aria-hidden="true"
                       />
@@ -853,7 +853,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                           : group.versions[0]?.version
                       "
                       :classicon="
-                        group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
+                        group.versions[0]?.deprecated ? 'i-lucide:octagon-alert' : undefined
                       "
                     >
                       <span dir="ltr" class="block truncate">
@@ -918,7 +918,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                           : group.versions[0]?.version
                       "
                       :classicon="
-                        group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
+                        group.versions[0]?.deprecated ? 'i-lucide:octagon-alert' : undefined
                       "
                     >
                       <span dir="ltr" class="block truncate">
@@ -984,7 +984,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
                             })
                           : v.version
                       "
-                      :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
+                      :classicon="v.deprecated ? 'i-lucide:octagon-alert' : undefined"
                     >
                       <span dir="ltr" class="block truncate">
                         {{ v.version }}
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 2260fe5..0eb15eb 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -84,7 +84,7 @@ function getDepthStyle(depth: string | undefined) {
         @click="isExpanded = !isExpanded"
       >
         <span class="flex items-center gap-2 min-w-0">
-          <span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
+          <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{
               $t(
@@ -102,7 +102,7 @@ function getDepthStyle(depth: string | undefined) {
         <span class="flex items-center gap-2 shrink-0">
           <span class="text-xs op-90 dark:op-80 hidden sm:inline">{{ summaryText }}</span>
           <span
-            class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
+            class="i-lucide:chevron-down w-4 h-4 transition-transform duration-200"
             :class="{ 'rotate-180': isExpanded }"
             aria-hidden="true"
           />
@@ -199,7 +199,7 @@ function getDepthStyle(depth: string | undefined) {
           v-if="vulnTree!.failedQueries"
           class="px-4 py-2 text-xs text-fg-subtle border-t border-border flex items-center gap-2"
         >
-          <span class="i-carbon:warning w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" />
           <span>{{ $t('package.vulnerabilities.packages_failed', vulnTree!.failedQueries) }}</span>
         </div>
       </div>
@@ -214,7 +214,7 @@ function getDepthStyle(depth: string | undefined) {
   <section v-else-if="status === 'error'" aria-labelledby="vuln-tree-error">
     <div class="rounded-lg border border-border bg-bg-subtle px-4 py-3">
       <div class="flex items-center gap-2">
-        <span class="i-carbon:warning w-4 h-4 text-fg-subtle" aria-hidden="true" />
+        <span class="i-lucide:circle-alert w-4 h-4 text-fg-subtle" aria-hidden="true" />
         <span class="text-sm text-fg-muted">
           {{ $t('package.vulnerabilities.scan_failed') }}
         </span>
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index dfe7da4..c8f591e 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -256,7 +256,7 @@ const config = computed(() => {
           @click="openChartModal"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
-          classicon="i-carbon:data-analytics"
+          classicon="i-lucide:chart-line"
         >
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
         </ButtonBase>
diff --git a/app/components/PackageProvenanceSection.vue b/app/components/PackageProvenanceSection.vue
index caf6cd3..9ff77f3 100644
--- a/app/components/PackageProvenanceSection.vue
+++ b/app/components/PackageProvenanceSection.vue
@@ -18,7 +18,7 @@ defineProps<{
       <div class="space-y-1">
         <p class="flex items-start gap-2 text-sm text-fg m-0">
           <span
-            class="i-lucide-shield-check w-4 h-4 shrink-0 text-emerald-500 mt-0.5"
+            class="i-lucide:shield-check w-4 h-4 shrink-0 text-emerald-500 mt-0.5"
             aria-hidden="true"
           />
           <i18n-t keypath="package.provenance_section.built_and_signed_on" tag="span">
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
index f3fe1d0..4bb8701 100644
--- a/app/components/PaginationControls.vue
+++ b/app/components/PaginationControls.vue
@@ -197,7 +197,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.previous')"
           @click="goPrev"
         >
-          <span class="i-carbon-chevron-left block rtl-flip w-4 h-4" aria-hidden="true" />
+          <span class="i-lucide:chevron-left block rtl-flip w-4 h-4" aria-hidden="true" />
         </button>
 
         <!-- Page numbers -->
@@ -227,7 +227,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.next')"
           @click="goNext"
         >
-          <span class="i-carbon-chevron-right block rtl-flip w-4 h-4" aria-hidden="true" />
+          <span class="i-lucide:chevron-right block rtl-flip w-4 h-4" aria-hidden="true" />
         </button>
       </nav>
     </div>
diff --git a/app/components/ProvenanceBadge.vue b/app/components/ProvenanceBadge.vue
index 825ba74..08e91bc 100644
--- a/app/components/ProvenanceBadge.vue
+++ b/app/components/ProvenanceBadge.vue
@@ -35,7 +35,7 @@ const title = computed(() =>
     class="inline-flex items-center justify-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
     :title="title"
   >
-    <span class="i-lucide-shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
+    <span class="i-lucide:shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
       $t('badges.provenance.verified')
     }}</span>
@@ -45,7 +45,7 @@ const title = computed(() =>
     class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted"
     :title="title"
   >
-    <span class="i-lucide-shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
+    <span class="i-lucide:shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
       $t('badges.provenance.verified')
     }}</span>
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index 534c9b5..56a19b5 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -30,8 +30,8 @@ function handleClick(event: MouseEvent) {
     const icon = copyTarget.querySelector('span')
     if (!icon) return
 
-    const originalIcon = 'i-carbon:copy'
-    const successIcon = 'i-carbon:checkmark'
+    const originalIcon = 'i-lucide:copy'
+    const successIcon = 'i-lucide:check'
 
     icon.classList.remove(originalIcon)
     icon.classList.add(successIcon)
@@ -147,7 +147,7 @@ function handleClick(event: MouseEvent) {
 .readme :deep(a[target='_blank']:not(:has(img))::after) {
   /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
   content: '__';
-  @apply inline i-carbon:launch rtl-flip ms-1 opacity-50;
+  @apply inline i-lucide:external-link rtl-flip ms-1 opacity-50;
 }
 
 .readme :deep(code) {
@@ -313,8 +313,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='note']::after) {
   background-color: #3b82f6;
-  -webkit-mask: icon('i-lucide-info') no-repeat;
-  mask: icon('i-lucide-info') no-repeat;
+  -webkit-mask: icon('i-lucide:info') no-repeat;
+  mask: icon('i-lucide:info') no-repeat;
 }
 
 /* Tip - green */
@@ -328,8 +328,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='tip']::after) {
   background-color: #22c55e;
-  -webkit-mask: icon('i-lucide-lightbulb') no-repeat;
-  mask: icon('i-lucide-lightbulb') no-repeat;
+  -webkit-mask: icon('i-lucide:lightbulb') no-repeat;
+  mask: icon('i-lucide:lightbulb') no-repeat;
 }
 
 /* Important - purple */
@@ -343,8 +343,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='important']::after) {
   background-color: var(--syntax-fn);
-  -webkit-mask: icon('i-lucide-pin') no-repeat;
-  mask: icon('i-lucide-pin') no-repeat;
+  -webkit-mask: icon('i-lucide:pin') no-repeat;
+  mask: icon('i-lucide:pin') no-repeat;
 }
 
 /* Warning - yellow/orange */
@@ -358,8 +358,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='warning']::after) {
   background-color: #eab308;
-  -webkit-mask: icon('i-lucide-triangle-alert') no-repeat;
-  mask: icon('i-lucide-triangle-alert') no-repeat;
+  -webkit-mask: icon('i-lucide:triangle-alert') no-repeat;
+  mask: icon('i-lucide:triangle-alert') no-repeat;
 }
 
 /* Caution - red */
@@ -373,8 +373,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='caution']::after) {
   background-color: #ef4444;
-  -webkit-mask: icon('i-lucide-circle-alert') no-repeat;
-  mask: icon('i-lucide-circle-alert') no-repeat;
+  -webkit-mask: icon('i-lucide:circle-alert') no-repeat;
+  mask: icon('i-lucide:circle-alert') no-repeat;
 }
 
 /* Table wrapper for horizontal scroll on mobile */
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index 0fba743..66f92d0 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -151,12 +151,12 @@ function handleKeydown(event: KeyboardEvent) {
     :aria-controls="listboxId"
     @click="toggle"
     @keydown="handleKeydown"
-    classicon="i-carbon:list"
+    classicon="i-lucide:list"
     class="px-2.5"
     block
   >
     <span
-      class="i-carbon:chevron-down w-3 h-3"
+      class="i-lucide:chevron-down w-3 h-3"
       :class="[
         { 'rotate-180': isOpen },
         prefersReducedMotion ? '' : 'transition-transform duration-200',
diff --git a/app/components/ScrollToTop.client.vue b/app/components/ScrollToTop.client.vue
index 63cdbef..e1e70ec 100644
--- a/app/components/ScrollToTop.client.vue
+++ b/app/components/ScrollToTop.client.vue
@@ -42,7 +42,7 @@ onMounted(() => {
     :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
-    <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
+    <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
   </button>
 
   <!-- JS fallback for browsers without scroll-state support -->
@@ -62,7 +62,7 @@ onMounted(() => {
       :aria-label="$t('common.scroll_to_top')"
       @click="scrollToTop"
     >
-      <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
+      <span class="i-lucide:arrow-up w-5 h-5" aria-hidden="true" />
     </button>
   </Transition>
 </template>
diff --git a/app/components/SearchProviderToggle.client.vue b/app/components/SearchProviderToggle.client.vue
index deeb89f..2766836 100644
--- a/app/components/SearchProviderToggle.client.vue
+++ b/app/components/SearchProviderToggle.client.vue
@@ -30,7 +30,7 @@ useEventListener('keydown', event => {
       aria-haspopup="true"
       size="small"
       class="border-none w-8 h-8 !px-0 justify-center"
-      classicon="i-carbon:settings"
+      classicon="i-lucide:settings"
       @click="isOpen = !isOpen"
     />
 
@@ -64,7 +64,7 @@ useEventListener('keydown', event => {
             "
           >
             <span
-              class="i-carbon:catalog w-4 h-4 mt-0.5 shrink-0"
+              class="i-simple-icons:npm w-4 h-4 mt-0.5 shrink-0"
               :class="searchProviderValue !== 'algolia' ? 'text-accent' : 'text-fg-muted'"
               aria-hidden="true"
             />
@@ -96,7 +96,7 @@ useEventListener('keydown', event => {
             "
           >
             <span
-              class="i-carbon:search w-4 h-4 mt-0.5 shrink-0"
+              class="i-simple-icons:algolia w-4 h-4 mt-0.5 shrink-0"
               :class="searchProviderValue === 'algolia' ? 'text-accent' : 'text-fg-muted'"
               aria-hidden="true"
             />
@@ -125,7 +125,7 @@ useEventListener('keydown', event => {
               class="text-xs text-fg-subtle hover:text-fg-muted transition-colors inline-flex items-center gap-1 px-2"
             >
               {{ $t('search.algolia_disclaimer') }}
-              <span class="i-carbon:launch w-3 h-3" aria-hidden="true" />
+              <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
             </a>
           </div>
         </div>
diff --git a/app/components/SearchProviderToggle.server.vue b/app/components/SearchProviderToggle.server.vue
index 0cb0032..ef0f6b8 100644
--- a/app/components/SearchProviderToggle.server.vue
+++ b/app/components/SearchProviderToggle.server.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <div class="flex items-center justify-center w-8 h-8 rounded-md text-fg-subtle">
-      <span class="i-carbon:settings w-4 h-4" aria-hidden="true" />
+      <span class="i-lucide:settings w-4 h-4" aria-hidden="true" />
     </div>
   </div>
 </template>
diff --git a/app/components/SearchSuggestionCard.vue b/app/components/SearchSuggestionCard.vue
index c55b8ed..26e29f7 100644
--- a/app/components/SearchSuggestionCard.vue
+++ b/app/components/SearchSuggestionCard.vue
@@ -62,7 +62,7 @@ defineProps<{
       </div>
 
       <span
-        class="i-carbon:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
+        class="i-lucide:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
         aria-hidden="true"
       />
     </NuxtLink>
diff --git a/app/components/Select/Field.vue b/app/components/Select/Field.vue
index 20dc3ed..7b962db 100644
--- a/app/components/Select/Field.vue
+++ b/app/components/Select/Field.vue
@@ -69,7 +69,7 @@ const props = withDefaults(defineProps<SelectFieldProps>(), {
       </SelectBase>
       <span
         aria-hidden="true"
-        class="block i-carbon:chevron-down absolute top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none group-hover/select:text-fg group-focus-within/select:text-fg"
+        class="block i-lucide:chevron-down absolute top-1/2 -translate-y-1/2 text-fg-subtle pointer-events-none group-hover/select:text-fg group-focus-within/select:text-fg"
         :class="[SELECT_FIELD_ICON_SIZES[size]]"
       />
     </div>
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index e5d3b2c..3900336 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -55,7 +55,7 @@ onPrehydrate(el => {
         :aria-label="$t('settings.clear_accent')"
         @change="setAccentColor(null)"
       />
-      <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
+      <span class="i-lucide:ban size-4 text-bg" aria-hidden="true" />
     </label>
   </fieldset>
 </template>
diff --git a/app/components/Settings/TranslationHelper.vue b/app/components/Settings/TranslationHelper.vue
index 7a13db2..e386f5c 100644
--- a/app/components/Settings/TranslationHelper.vue
+++ b/app/components/Settings/TranslationHelper.vue
@@ -122,7 +122,7 @@ ${template}`
           rel="noopener noreferrer"
           class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-bg hover:bg-bg-subtle border border-border rounded-md transition-colors focus-visible:outline-accent/70"
         >
-          <span class="i-carbon-edit w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:pen w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.edit_on_github') }}
         </a>
 
@@ -132,7 +132,7 @@ ${template}`
           rel="noopener noreferrer"
           class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-fg-muted hover:text-fg rounded transition-colors focus-visible:outline-accent/70"
         >
-          <span class="i-carbon-document w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-lucide:file-text w-3.5 h-3.5" aria-hidden="true" />
           {{ $t('i18n.view_guide') }}
         </a>
       </div>
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 4b16872..190c5db 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -219,7 +219,7 @@ const copyDevInstallCommand = () =>
               class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded select-none"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
-              <span class="i-carbon:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
+              <span class="i-lucide:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
               <span class="sr-only">View {{ typesPackageName }}</span>
             </NuxtLink>
           </div>
@@ -271,7 +271,7 @@ const copyDevInstallCommand = () =>
                 :to="packageRoute(createPackageInfo.packageName)"
                 class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-muted hover:text-fg text-xs transition-colors focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
               >
-                <span class="i-carbon:information w-3 h-3" aria-hidden="true" />
+                <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
                 <span class="sr-only">{{
                   $t('package.create.view', { packageName: createPackageInfo.packageName })
                 }}</span>
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index b2875d7..5464b65 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -204,7 +204,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
           role="status"
           aria-live="polite"
         >
-          <span class="i-carbon:information w-3 h-3 me-1 align-middle" aria-hidden="true" />
+          <span class="i-lucide:info w-3 h-3 me-1 align-middle" aria-hidden="true" />
           {{
             $t('user.combobox.press_enter_to_add', {
               username: inputValue.trim().replace(/^@/, ''),
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index af9d616..5a0867e 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -484,7 +484,7 @@ watch(
         latest
       </span>
       <span
-        class="i-carbon:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
+        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
@@ -540,13 +540,13 @@ watch(
             >
               <span
                 v-if="group.isLoading"
-                class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
+                class="i-svg-spinners:ring-resize w-3 h-3"
                 aria-hidden="true"
               />
               <span
                 v-else
                 class="w-3 h-3 transition-transform duration-200 rtl-flip"
-                :class="group.isExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+                :class="group.isExpanded ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
                 aria-hidden="true"
               />
             </button>
diff --git a/app/components/ViewModeToggle.vue b/app/components/ViewModeToggle.vue
index 88f7b43..46908ce 100644
--- a/app/components/ViewModeToggle.vue
+++ b/app/components/ViewModeToggle.vue
@@ -18,7 +18,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.cards')"
       @click="viewMode = 'cards'"
     >
-      <span class="i-carbon-horizontal-view w-4 h-4" aria-hidden="true" />
+      <span class="i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
     </button>
     <button
@@ -29,7 +29,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.table')"
       @click="viewMode = 'table'"
     >
-      <span class="i-carbon-table-split w-4 h-4" aria-hidden="true" />
+      <span class="i-lucide:table w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
     </button>
   </div>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 88125dc..0436f30 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -61,7 +61,7 @@ const roleLabels = computed(
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -207,7 +207,7 @@ const roleLabels = computed(
                     :to="person.sponsors_url"
                     no-underline
                     no-external-icon
-                    classicon="i-carbon:favorite"
+                    classicon="i-lucide:heart"
                     class="relative z-10 text-xs text-fg-muted hover:text-pink-400 mt-0.5"
                     :aria-label="$t('about.team.sponsor_aria', { name: person.login })"
                   >
@@ -215,7 +215,7 @@ const roleLabels = computed(
                   </LinkBase>
                 </div>
                 <span
-                  class="i-carbon:launch rtl-flip w-3.5 h-3.5 text-fg-muted opacity-50 shrink-0 self-start mt-0.5"
+                  class="i-lucide:external-link rtl-flip w-3.5 h-3.5 text-fg-muted opacity-50 shrink-0 self-start mt-0.5"
                   aria-hidden="true"
                 />
               </li>
diff --git a/app/pages/accessibility.vue b/app/pages/accessibility.vue
index af21426..8f3750f 100644
--- a/app/pages/accessibility.vue
+++ b/app/pages/accessibility.vue
@@ -31,7 +31,7 @@ const canGoBack = useCanGoBack()
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -132,7 +132,7 @@ const canGoBack = useCanGoBack()
                   class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
                 >
                   {{ $t('a11y.contact.link') }}
-                  <span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true" />
+                  <span class="i-lucide:external-link rtl-flip w-4 h-4" aria-hidden="true" />
                 </a>
               </template>
             </i18n-t>
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index a3c9a7c..9f7d7e5 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -121,7 +121,7 @@ useSeoMeta({
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -257,7 +257,10 @@ useSeoMeta({
         v-else
         class="text-center px-1.5 py-16 border border-dashed border-border-hover rounded-lg"
       >
-        <div class="i-carbon:compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" />
+        <div
+          class="i-lucide:git-compare w-12 h-12 text-fg-subtle mx-auto mb-4"
+          aria-hidden="true"
+        />
         <h2 class="font-mono text-lg text-fg-muted mb-2">
           {{ $t('compare.packages.empty_title') }}
         </h2>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index b969407..4421dc7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -93,7 +93,7 @@ defineOgImageComponent('Default', {
                   type="submit"
                   variant="primary"
                   class="absolute inset-ie-2 border-transparent"
-                  classicon="i-carbon:search"
+                  classicon="i-lucide:search"
                 >
                   <span class="sr-only sm:not-sr-only">
                     {{ $t('search.button') }}
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index 08739fd..3291640 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -182,7 +182,7 @@ defineOgImageComponent('Default', {
               class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               :title="$t('common.view_on_npm')"
             >
-              <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
+              <span class="i-simple-icons:npm w-4 h-4" aria-hidden="true" />
               npm
             </a>
           </nav>
@@ -190,7 +190,7 @@ defineOgImageComponent('Default', {
             class="text-fg-subtle text-xs mt-1 flex items-center gap-1.5 justify-end cursor-help"
             :title="$t('common.vanity_downloads_hint', { count: filteredCount }, filteredCount)"
           >
-            <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
+            <span class="i-lucide:chart-line w-3.5 h-3.5" aria-hidden="true" />
             <span class="font-mono"
               >{{ $n(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
             >
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 0e63213..7d42e6e 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -256,12 +256,12 @@ const markdownViewModes = [
   {
     key: 'preview',
     label: $t('code.markdown_view_mode.preview'),
-    icon: 'i-carbon-view',
+    icon: 'i-lucide:eye',
   },
   {
     key: 'code',
     label: $t('code.markdown_view_mode.code'),
-    icon: 'i-carbon-code',
+    icon: 'i-lucide:code',
   },
 ] as const
 
@@ -463,7 +463,7 @@ defineOgImageComponent('Default', {
                 class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
               >
                 {{ $t('code.raw') }}
-                <span class="i-carbon:launch w-3 h-3" />
+                <span class="i-lucide:external-link w-3 h-3" />
               </a>
             </div>
           </div>
@@ -486,7 +486,7 @@ defineOgImageComponent('Default', {
 
         <!-- File too large warning -->
         <div v-else-if="isViewingFile && isFileTooLarge" class="py-20 text-center">
-          <div class="i-carbon:document w-12 h-12 mx-auto text-fg-subtle mb-4" />
+          <div class="i-lucide:file-text w-12 h-12 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
             {{
@@ -541,7 +541,7 @@ defineOgImageComponent('Default', {
 
         <!-- Error loading file -->
         <div v-else-if="filePath && fileStatus === 'error'" class="py-20 text-center" role="alert">
-          <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
+          <div class="i-lucide:circle-alert w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
           <LinkBase
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index c18d199..419422d 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -395,7 +395,7 @@ const repositoryUrl = computed(() => {
 const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 
 const PROVIDER_ICONS: Record<string, string> = {
-  github: 'i-carbon:logo-github',
+  github: 'i-simple-icons:github',
   gitlab: 'i-simple-icons:gitlab',
   bitbucket: 'i-simple-icons:bitbucket',
   codeberg: 'i-simple-icons:codeberg',
@@ -404,13 +404,13 @@ const PROVIDER_ICONS: Record<string, string> = {
   gitee: 'i-simple-icons:gitee',
   sourcehut: 'i-simple-icons:sourcehut',
   tangled: 'i-custom:tangled',
-  radicle: 'i-carbon:network-3', // Radicle is a P2P network, using network icon
+  radicle: 'i-lucide:network', // Radicle is a P2P network, using network icon
 }
 
 const repoProviderIcon = computed(() => {
   const provider = repoRef.value?.provider
-  if (!provider) return 'i-carbon:logo-github'
-  return PROVIDER_ICONS[provider] ?? 'i-carbon:code'
+  if (!provider) return 'i-simple-icons:github'
+  return PROVIDER_ICONS[provider] ?? 'i-lucide:code'
 })
 
 const homepageUrl = computed(() => {
@@ -692,7 +692,7 @@ const showSkeleton = shallowRef(false)
               :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
             >
               <span
-                :class="copiedPkgName ? 'i-carbon:checkmark' : 'i-carbon:copy'"
+                :class="copiedPkgName ? 'i-lucide:check' : 'i-lucide:copy'"
                 class="w-3.5 h-3.5"
                 aria-hidden="true"
               />
@@ -706,7 +706,7 @@ const showSkeleton = shallowRef(false)
             <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
             <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
               <span class="font-mono text-fg-muted text-sm" dir="ltr">{{ requestedVersion }}</span>
-              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+              <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </template>
 
             <LinkBase
@@ -735,7 +735,7 @@ const showSkeleton = shallowRef(false)
                   size="small"
                   to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
-                  classicon="i-lucide-shield-check"
+                  classicon="i-lucide:shield-check"
                 />
               </TooltipApp>
             </template>
@@ -760,7 +760,7 @@ const showSkeleton = shallowRef(false)
               v-if="docsLink"
               :to="docsLink"
               aria-keyshortcuts="d"
-              classicon="i-carbon:document"
+              classicon="i-lucide:file-text"
             >
               {{ $t('package.links.docs') }}
             </LinkBase>
@@ -769,7 +769,7 @@ const showSkeleton = shallowRef(false)
               variant="button-secondary"
               :to="codeLink"
               aria-keyshortcuts="."
-              classicon="i-carbon:code"
+              classicon="i-lucide:code"
             >
               {{ $t('package.links.code') }}
             </LinkBase>
@@ -777,7 +777,7 @@ const showSkeleton = shallowRef(false)
               variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
               aria-keyshortcuts="c"
-              classicon="i-carbon:compare"
+              classicon="i-lucide:git-compare"
             >
               {{ $t('package.links.compare') }}
             </LinkBase>
@@ -818,13 +818,13 @@ const showSkeleton = shallowRef(false)
                 :aria-pressed="likesData?.userHasLiked"
                 :classicon="
                   likesData?.userHasLiked
-                    ? 'i-lucide-heart-minus text-red-500'
-                    : 'i-lucide-heart-plus'
+                    ? 'i-lucide:heart-minus text-red-500'
+                    : 'i-lucide:heart-plus'
                 "
               >
                 <span
                   v-if="isLoadingLikeData"
-                  class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin my-0.5"
+                  class="i-svg-spinners:ring-resize w-3 h-3 my-0.5"
                   aria-hidden="true"
                 />
                 <span v-else>
@@ -862,23 +862,23 @@ const showSkeleton = shallowRef(false)
               </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase :to="starsLink" classicon="i-carbon:star">
+              <LinkBase :to="starsLink" classicon="i-lucide:star">
                 {{ compactNumberFormatter.format(stars) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <LinkBase :to="forksLink" classicon="i-carbon:fork">
+              <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
                 {{ compactNumberFormatter.format(forks) }}
               </LinkBase>
             </li>
             <li class="basis-full sm:hidden" />
             <li v-if="homepageUrl">
-              <LinkBase :to="homepageUrl" classicon="i-carbon:link">
+              <LinkBase :to="homepageUrl" classicon="i-lucide:link">
                 {{ $t('package.links.homepage') }}
               </LinkBase>
             </li>
             <li v-if="displayVersion?.bugs?.url">
-              <LinkBase :to="displayVersion.bugs.url" classicon="i-carbon:warning">
+              <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
                 {{ $t('package.links.issues') }}
               </LinkBase>
             </li>
@@ -886,7 +886,7 @@ const showSkeleton = shallowRef(false)
               <LinkBase
                 :to="`https://www.npmjs.com/package/${pkg.name}`"
                 :title="$t('common.view_on_npm')"
-                classicon="i-carbon:logo-npm"
+                classicon="i-simple-icons:npm"
               >
                 npm
               </LinkBase>
@@ -901,7 +901,7 @@ const showSkeleton = shallowRef(false)
               </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <LinkBase :to="fundingUrl" classicon="i-carbon:favorite">
+              <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
@@ -962,10 +962,7 @@ const showSkeleton = shallowRef(false)
                       "
                       class="inline-flex items-center gap-1 text-fg-subtle"
                     >
-                      <span
-                        class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                        aria-hidden="true"
-                      />
+                      <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
                     </span>
                     <span v-else-if="totalDepsCount !== null">{{
                       numberFormatter.format(totalDepsCount)
@@ -983,7 +980,7 @@ const showSkeleton = shallowRef(false)
                   size="small"
                   :to="`https://npmgraph.js.org/?q=${pkg.name}`"
                   :title="$t('package.stats.view_dependency_graph')"
-                  classicon="i-carbon:network-3"
+                  classicon="i-lucide:network -rotate-90"
                 >
                   <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
                 </LinkBase>
@@ -993,7 +990,7 @@ const showSkeleton = shallowRef(false)
                   size="small"
                   :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                   :title="$t('package.stats.inspect_dependency_tree')"
-                  classicon="i-carbon:tree-view"
+                  classicon="i-lucide:table"
                 >
                   <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
                 </LinkBase>
@@ -1009,7 +1006,7 @@ const showSkeleton = shallowRef(false)
                   tabindex="0"
                   class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
                 >
-                  <span class="i-carbon:information w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
                 </span>
               </TooltipApp>
             </dt>
@@ -1030,10 +1027,7 @@ const showSkeleton = shallowRef(false)
                   v-if="installSizeStatus === 'pending'"
                   class="inline-flex items-center gap-1 text-fg-subtle"
                 >
-                  <span
-                    class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                    aria-hidden="true"
-                  />
+                  <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
                 </span>
                 <span v-else-if="installSize?.totalSize" dir="ltr">
                   {{ bytesFormatter.format(installSize.totalSize) }}
@@ -1053,17 +1047,14 @@ const showSkeleton = shallowRef(false)
                 v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
                 class="inline-flex items-center gap-1 text-fg-subtle"
               >
-                <span
-                  class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                  aria-hidden="true"
-                />
+                <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
               </span>
               <span v-else-if="vulnTreeStatus === 'success'">
                 <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
                   {{ numberFormatter.format(vulnCount) }}
                 </span>
                 <span v-else class="inline-flex items-center gap-1 text-fg-muted">
-                  <span class="i-carbon:checkmark w-3 h-3" aria-hidden="true" />
+                  <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
                   {{ numberFormatter.format(0) }}
                 </span>
               </span>
@@ -1149,7 +1140,7 @@ const showSkeleton = shallowRef(false)
             class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
           >
             <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
-              <span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
+              <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
               {{ $t('package.security_downgrade.title') }}
             </h3>
             <p class="mt-2 mb-0 text-sm">
@@ -1169,7 +1160,7 @@ const showSkeleton = shallowRef(false)
                     rel="noopener noreferrer"
                     class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
                     >{{ $t('package.security_downgrade.provenance_link_text')
-                    }}<span class="i-carbon-launch w-3 h-3" aria-hidden="true"
+                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                   /></a>
                 </template>
               </i18n-t>
@@ -1189,7 +1180,7 @@ const showSkeleton = shallowRef(false)
                     rel="noopener noreferrer"
                     class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
                     >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                    }}<span class="i-carbon-launch w-3 h-3" aria-hidden="true"
+                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                   /></a>
                 </template>
               </i18n-t>
@@ -1209,7 +1200,7 @@ const showSkeleton = shallowRef(false)
                     rel="noopener noreferrer"
                     class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
                     >{{ $t('package.security_downgrade.provenance_link_text')
-                    }}<span class="i-carbon-launch w-3 h-3" aria-hidden="true"
+                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                   /></a>
                 </template>
                 <template #trustedPublishing>
@@ -1219,7 +1210,7 @@ const showSkeleton = shallowRef(false)
                     rel="noopener noreferrer"
                     class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
                     >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                    }}<span class="i-carbon-launch w-3 h-3" aria-hidden="true"
+                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
                   /></a>
                 </template>
               </i18n-t>
@@ -1284,7 +1275,7 @@ const showSkeleton = shallowRef(false)
                 :aria-label="
                   copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
                 "
-                :classicon="copiedReadme ? 'i-carbon:checkmark' : 'i-simple-icons:markdown'"
+                :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
               >
                 {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
               </ButtonBase>
@@ -1320,10 +1311,7 @@ const showSkeleton = shallowRef(false)
             v-if="provenanceStatus === 'pending'"
             class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
           >
-            <span
-              class="i-carbon-circle-dash w-4 h-4 motion-safe:animate-spin"
-              aria-hidden="true"
-            />
+            <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
             <span>{{ $t('package.provenance_section.title') }}…</span>
           </div>
           <PackageProvenanceSection
@@ -1336,7 +1324,7 @@ const showSkeleton = shallowRef(false)
             v-else-if="provenanceStatus === 'error'"
             class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
           >
-            <span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
             <span>{{ $t('package.provenance_section.error_loading') }}</span>
           </div>
         </section>
diff --git a/app/pages/privacy.vue b/app/pages/privacy.vue
index a43bc66..c0e9303 100644
--- a/app/pages/privacy.vue
+++ b/app/pages/privacy.vue
@@ -33,7 +33,7 @@ const { locale } = useI18n()
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -183,7 +183,7 @@ const { locale } = useI18n()
                 class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
               >
                 {{ $t('privacy_policy.cookies.management.chrome') }}
-                <span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:external-link rtl-flip w-4 h-4" aria-hidden="true" />
               </a>
             </li>
             <li class="flex items-start gap-3">
@@ -195,7 +195,7 @@ const { locale } = useI18n()
                 class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
               >
                 {{ $t('privacy_policy.cookies.management.firefox') }}
-                <span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:external-link rtl-flip w-4 h-4" aria-hidden="true" />
               </a>
             </li>
             <li class="flex items-start gap-3">
@@ -207,7 +207,7 @@ const { locale } = useI18n()
                 class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
               >
                 {{ $t('privacy_policy.cookies.management.edge') }}
-                <span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true" />
+                <span class="i-lucide:external-link rtl-flip w-4 h-4" aria-hidden="true" />
               </a>
             </li>
           </ul>
@@ -333,7 +333,7 @@ const { locale } = useI18n()
                   class="inline-flex items-center gap-1 text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
                 >
                   {{ $t('privacy_policy.contact.link') }}
-                  <span class="i-carbon:launch rtl-flip w-4 h-4" aria-hidden="true" />
+                  <span class="i-lucide:external-link rtl-flip w-4 h-4" aria-hidden="true" />
                 </a>
               </template>
             </i18n-t>
diff --git a/app/pages/recharging.vue b/app/pages/recharging.vue
index 5d5df22..69316f5 100644
--- a/app/pages/recharging.vue
+++ b/app/pages/recharging.vue
@@ -47,15 +47,15 @@ function pokeLog() {
 // Icons that tile across the banner, repeating to fill.
 // Classes must be written out statically so UnoCSS can detect them at build time.
 const icons = [
-  'i-carbon:snowflake',
-  'i-carbon:mountain',
-  'i-carbon:tree',
-  'i-carbon:cafe',
-  'i-carbon:book',
-  'i-carbon:music',
-  'i-carbon:snowflake',
-  'i-carbon:star',
-  'i-carbon:moon',
+  'i-lucide:snowflake',
+  'i-lucide:mountain',
+  'i-lucide:tree-pine',
+  'i-lucide:coffee',
+  'i-lucide:book',
+  'i-lucide:music',
+  'i-lucide:snowflake',
+  'i-lucide:star',
+  'i-lucide:moon',
 ] as const
 
 // --- .ics calendar reminder ---
@@ -122,7 +122,7 @@ function downloadIcs() {
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -205,11 +205,11 @@ function downloadIcs() {
                 @click="pokeLog"
               >
                 <span
-                  class="absolute inset-0 i-carbon:fire w-5 h-5 sm:w-6 sm:h-6 text-orange-400 transition-opacity duration-400"
+                  class="absolute inset-0 i-lucide:flame-kindling w-5 h-5 sm:w-6 sm:h-6 text-orange-400 transition-opacity duration-400"
                   :class="fireVisible ? 'opacity-100' : 'opacity-0'"
                 />
                 <span
-                  class="absolute inset-0 i-carbon:campsite w-5 h-5 sm:w-6 sm:h-6 transition-colors duration-400"
+                  class="absolute inset-0 i-lucide:tent w-5 h-5 sm:w-6 sm:h-6 transition-colors duration-400"
                   :class="fireVisible ? 'text-amber-700' : ''"
                 />
               </button>
@@ -240,7 +240,7 @@ function downloadIcs() {
           </p>
 
           <!-- Add to calendar button -->
-          <ButtonBase classicon="i-carbon:calendar" @click="downloadIcs">
+          <ButtonBase classicon="i-lucide:calendar" @click="downloadIcs">
             {{ $t('vacations.return.add_to_calendar') }}
           </ButtonBase>
         </div>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 14d50e1..0b44449 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -55,7 +55,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             @click="router.back()"
             v-if="canGoBack"
           >
-            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
@@ -199,7 +199,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg-muted transition-colors mt-2"
               >
                 {{ $t('search.algolia_disclaimer') }}
-                <span class="i-carbon:launch w-3 h-3" aria-hidden="true" />
+                <span class="i-lucide:external-link w-3 h-3" aria-hidden="true" />
               </a>
             </div>
           </div>
@@ -254,7 +254,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 rel="noopener noreferrer"
                 class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
               >
-                <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
+                <span class="i-simple-icons:github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}
               </a>
             </template>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 84d9713..5634925 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -158,7 +158,7 @@ defineOgImageComponent('Default', {
               class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               :title="$t('common.view_on_npm')"
             >
-              <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
+              <span class="i-simple-icons:npm w-4 h-4" aria-hidden="true" />
               npm
             </a>
           </nav>
@@ -166,7 +166,7 @@ defineOgImageComponent('Default', {
             class="text-fg-subtle text-xs mt-1 flex items-center gap-1.5 justify-end cursor-help"
             :title="$t('common.vanity_downloads_hint', { count: filteredCount }, filteredCount)"
           >
-            <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
+            <span class="i-lucide:chart-line w-3.5 h-3.5" aria-hidden="true" />
             <span class="font-mono"
               >{{ $n(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
             >
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 06c7f6a..138bd69 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -140,7 +140,7 @@ defineOgImageComponent('Default', {
           id="back-to-profile"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
         >
-          <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+          <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('user.orgs_page.back_to_profile') }}
         </NuxtLink>
       </nav>
@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
               <!-- Stats -->
               <div class="flex items-center gap-4 text-sm text-fg-muted">
                 <div class="flex items-center gap-1.5">
-                  <span class="i-carbon:cube w-4 h-4" aria-hidden="true" />
+                  <span class="i-lucide:box w-4 h-4" aria-hidden="true" />
                   <span v-if="org.packageCount !== null">
                     {{
                       $t(
diff --git a/app/utils/file-icons.ts b/app/utils/file-icons.ts
index 3e8b2d4..977812c 100644
--- a/app/utils/file-icons.ts
+++ b/app/utils/file-icons.ts
@@ -1,6 +1,6 @@
 /**
  * Get icon class for a file based on its name/extension.
- * Uses vscode-icons and carbon icons.
+ * Uses vscode-icons and lucide icons.
  *
  * Based on this file, a sprite file (<ORIGIN_URL>/file-tree-sprite.svg) is generated on postinstall
  * @see /scripts/generate-file-tree-sprite.ts
@@ -314,8 +314,8 @@ export const COMPOUND_EXTENSIONS: Record<string, string> = {
 export const DEFAULT_ICON = 'vscode-icons-default-file'
 
 export const ADDITIONAL_ICONS = {
-  'folder': 'carbon-folder',
-  'folder-open': 'carbon-folder-open',
+  'folder': 'lucide-folder',
+  'folder-open': 'lucide-folder-open',
 }
 
 /**
diff --git a/docs/content/1.getting-started/.navigation.yml b/docs/content/1.getting-started/.navigation.yml
index dacc69b..ef1093b 100644
--- a/docs/content/1.getting-started/.navigation.yml
+++ b/docs/content/1.getting-started/.navigation.yml
@@ -1,2 +1,2 @@
 title: Getting Started
-icon: i-lucide-rocket
+icon: i-lucide:rocket
diff --git a/docs/content/1.getting-started/1.introduction.md b/docs/content/1.getting-started/1.introduction.md
index 1b6e63d..427ada9 100644
--- a/docs/content/1.getting-started/1.introduction.md
+++ b/docs/content/1.getting-started/1.introduction.md
@@ -2,7 +2,7 @@
 title: Introduction
 description: Learn what npmx.dev is and why you should use it
 navigation:
-  icon: i-lucide-house
+  icon: i-lucide:house
 ---
 
 npmx.dev provides a better way to browse the npm registry.
diff --git a/docs/content/1.getting-started/2.quick-start.md b/docs/content/1.getting-started/2.quick-start.md
index 8e68401..35ab7a0 100644
--- a/docs/content/1.getting-started/2.quick-start.md
+++ b/docs/content/1.getting-started/2.quick-start.md
@@ -2,7 +2,7 @@
 title: Quick Start
 description: Start using npmx.dev in seconds
 navigation:
-  icon: i-lucide-zap
+  icon: i-lucide:zap
 ---
 
 npmx.dev works in your browser with no installation required.
diff --git a/docs/content/2.guide/.navigation.yml b/docs/content/2.guide/.navigation.yml
index aa0bc99..72cd352 100644
--- a/docs/content/2.guide/.navigation.yml
+++ b/docs/content/2.guide/.navigation.yml
@@ -1,2 +1,2 @@
 title: Guide
-icon: i-lucide-book-open
+icon: i-lucide:book-open
diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
index b8449b3..c0521ed 100644
--- a/docs/content/2.guide/1.features.md
+++ b/docs/content/2.guide/1.features.md
@@ -2,7 +2,7 @@
 title: Features
 description: Explore all the features npmx.dev offers
 navigation:
-  icon: i-lucide-sparkles
+  icon: i-lucide:sparkles
 ---
 
 npmx.dev provides a comprehensive set of features for browsing npm packages.
@@ -85,7 +85,7 @@ Quick access to online development environments detected from package READMEs:
 | ------------------------------------------------------------------------------ | -------------------------------------------- |
 | :icon{name="i-simple-icons-stackblitz"} [StackBlitz](https://stackblitz.com)   | Browser-based IDE with instant environments  |
 | :icon{name="i-simple-icons-codesandbox"} [CodeSandbox](https://codesandbox.io) | Online code editor and prototyping tool      |
-| :icon{name="i-lucide-pen-tool"} [CodePen](https://codepen.io)                  | Social development environment for front-end |
+| :icon{name="i-lucide:pen-tool"} [CodePen](https://codepen.io)                  | Social development environment for front-end |
 | :icon{name="i-simple-icons-jsfiddle"} [JSFiddle](https://jsfiddle.net)         | Online editor for web snippets               |
 | :icon{name="i-simple-icons-replit"} [Replit](https://replit.com)               | Collaborative browser-based IDE              |
 
diff --git a/docs/content/2.guide/2.keyboard-shortcuts.md b/docs/content/2.guide/2.keyboard-shortcuts.md
index c0da8f1..936ea16 100644
--- a/docs/content/2.guide/2.keyboard-shortcuts.md
+++ b/docs/content/2.guide/2.keyboard-shortcuts.md
@@ -2,7 +2,7 @@
 title: Keyboard Shortcuts
 description: Navigate npmx.dev efficiently with keyboard shortcuts
 navigation:
-  icon: i-lucide-keyboard
+  icon: i-lucide:keyboard
 ---
 
 npmx.dev supports keyboard navigation for faster browsing.
diff --git a/docs/content/2.guide/3.url-structure.md b/docs/content/2.guide/3.url-structure.md
index 3479049..8db36ea 100644
--- a/docs/content/2.guide/3.url-structure.md
+++ b/docs/content/2.guide/3.url-structure.md
@@ -2,7 +2,7 @@
 title: URL Structure
 description: Understand how URLs work in npmx.dev
 navigation:
-  icon: i-lucide-link
+  icon: i-lucide:link
 ---
 
 npmx.dev supports npm-compatible URLs and simpler alternatives.
diff --git a/docs/content/3.faq/.navigation.yml b/docs/content/3.faq/.navigation.yml
index e83a796..afe8bfb 100644
--- a/docs/content/3.faq/.navigation.yml
+++ b/docs/content/3.faq/.navigation.yml
@@ -1,2 +1,2 @@
 title: FAQ
-icon: i-lucide-circle-help
+icon: i-lucide:circle-help
diff --git a/docs/content/3.faq/1.troubleshooting.md b/docs/content/3.faq/1.troubleshooting.md
index 2b37821..fed3cb1 100644
--- a/docs/content/3.faq/1.troubleshooting.md
+++ b/docs/content/3.faq/1.troubleshooting.md
@@ -2,7 +2,7 @@
 title: Troubleshooting
 description: Common issues and how to resolve them
 navigation:
-  icon: i-lucide-wrench
+  icon: i-lucide:wrench
 ---
 
 Solutions to common issues when using npmx.dev.
diff --git a/docs/content/3.faq/2.comparison.md b/docs/content/3.faq/2.comparison.md
index 29c775d..51d152e 100644
--- a/docs/content/3.faq/2.comparison.md
+++ b/docs/content/3.faq/2.comparison.md
@@ -2,7 +2,7 @@
 title: Comparison
 description: How npmx.dev compares to npmjs.com
 navigation:
-  icon: i-lucide-git-compare
+  icon: i-lucide:git-compare
 ---
 
 A feature comparison between npmx.dev and npmjs.com.
diff --git a/docs/content/index.md b/docs/content/index.md
index b96ed03..df883a4 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -15,7 +15,7 @@ links:
   to: /getting-started/introduction
   color: neutral
   size: xl
-  trailingIcon: i-lucide-arrow-right
+  trailingIcon: i-lucide:arrow-right
 - label: View on GitHub
   to: https://github.com/npmx-dev/npmx.dev
   target: \_blank
@@ -30,21 +30,21 @@ links:
 
 ::u-page-section{title="What you can do"}
 #features
-:::u-page-feature{icon="i-lucide-search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}
+:::u-page-feature{icon="i-lucide:search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}
 :::
 
-:::u-page-feature{icon="i-lucide-code" to="/guide/features" title="Browse source code" description="View package source code with syntax highlighting and permalink to specific lines."}
+:::u-page-feature{icon="i-lucide:code" to="/guide/features" title="Browse source code" description="View package source code with syntax highlighting and permalink to specific lines."}
 :::
 
-:::u-page-feature{icon="i-lucide-link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
+:::u-page-feature{icon="i-lucide:link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
 :::
 
-:::u-page-feature{icon="i-lucide-keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Press / to search, . for code viewer, arrow keys to navigate results."}
+:::u-page-feature{icon="i-lucide:keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Press / to search, . for code viewer, arrow keys to navigate results."}
 :::
 
-:::u-page-feature{icon="i-lucide-shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}
+:::u-page-feature{icon="i-lucide:shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}
 :::
 
-:::u-page-feature{icon="i-lucide-moon" to="/guide/features" title="Enjoy dark mode" description="Dark mode by default for a better viewing experience."}
+:::u-page-feature{icon="i-lucide:moon" to="/guide/features" title="Enjoy dark mode" description="Dark mode by default for a better viewing experience."}
 :::
 ::
diff --git a/package.json b/package.json
index 86c2668..804a4dc 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "@atproto/oauth-client-node": "^0.3.15",
     "@deno/doc": "jsr:^0.189.1",
     "@floating-ui/vue": "1.1.10",
-    "@iconify-json/carbon": "1.2.18",
     "@iconify-json/lucide": "1.2.87",
     "@iconify-json/simple-icons": "1.2.68",
     "@iconify-json/svg-spinners": "1.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d909826..fd7800b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       '@floating-ui/vue':
         specifier: 1.1.10
         version: 1.1.10(vue@3.5.27(typescript@5.9.3))
-      '@iconify-json/carbon':
-        specifier: 1.2.18
-        version: 1.2.18
       '@iconify-json/lucide':
         specifier: 1.2.87
         version: 1.2.87
@@ -1538,9 +1535,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify-json/carbon@1.2.18':
-    resolution: {integrity: sha512-Grb13E6r/RqTEV4Sqd/BQR2FUt57U2WLuticJ5H8JbTdHLop1LmdePu3EJJA3Xi8DcWRbD6OnC133hKfOwlgtg==}
-
   '@iconify-json/lucide@1.2.87':
     resolution: {integrity: sha512-wxYIAp0f8Uw0rJa6BMWMaRbiHk3yV4XczA38GKXFlqyZtTdmHM1QOF4NZw5xpMlRDzbh2MnB7wjteLeFnn/ciQ==}
 
@@ -11138,10 +11132,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify-json/carbon@1.2.18':
-    dependencies:
-      '@iconify/types': 2.0.0
-
   '@iconify-json/lucide@1.2.87':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/scripts/generate-file-tree-sprite.ts b/scripts/generate-file-tree-sprite.ts
index eb6c0e6..67adabc 100644
--- a/scripts/generate-file-tree-sprite.ts
+++ b/scripts/generate-file-tree-sprite.ts
@@ -1,4 +1,4 @@
-import type { IconifyJSON } from '@iconify-json/carbon'
+import type { IconifyJSON } from '@iconify-json/lucide'
 import { promises as fs } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import path from 'node:path'
@@ -15,7 +15,7 @@ const outputDevPath = path.join(rootDir, 'public', 'file-tree-sprite.svg')
 const outputStagePath = path.join(rootDir, 'public-dev', 'file-tree-sprite.svg')
 const outputProdPath = path.join(rootDir, 'public-prod', 'file-tree-sprite.svg')
 
-const COLLECTION_NAMES = ['carbon', 'lucide', 'simple-icons', 'svg-spinners', 'vscode-icons']
+const COLLECTION_NAMES = ['lucide', 'simple-icons', 'svg-spinners', 'vscode-icons']
 
 const COLLECTION_REGEXP = new RegExp(`^(${COLLECTION_NAMES.join('|')})-(.+)$`)
 
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index a76e644..ef936e1 100644
--- a/server/utils/readme.ts
+++ b/server/utils/readme.ts
@@ -395,8 +395,8 @@ export async function renderReadmeHtml(
     const html = highlightCodeSync(shiki, text, lang || 'text')
     // Add copy button
     return `<div class="readme-code-block" >
-<button type="button" class="readme-copy-button" aria-label="Copy code" check-icon="i-carbon:checkmark" copy-icon="i-carbon:copy" data-copy>
-<span class="i-carbon:copy" aria-hidden="true"></span>
+<button type="button" class="readme-copy-button" aria-label="Copy code" check-icon="i-lucide:check" copy-icon="i-lucide:copy" data-copy>
+<span class="i-lucide:copy" aria-hidden="true"></span>
 <span class="sr-only">Copy code</span>
 </button>
 ${html}
diff --git a/test/nuxt/components/LicenseDisplay.spec.ts b/test/nuxt/components/LicenseDisplay.spec.ts
index 69536a3..dadc6d7 100644
--- a/test/nuxt/components/LicenseDisplay.spec.ts
+++ b/test/nuxt/components/LicenseDisplay.spec.ts
@@ -27,7 +27,7 @@ describe('LicenseDisplay', () => {
       const component = await mountSuspended(LicenseDisplay, {
         props: { license: 'MIT' },
       })
-      const icon = component.find('.i-carbon-scales')
+      const icon = component.find('.i-lucide\\:scale')
       expect(icon.exists()).toBe(true)
     })
 
@@ -35,7 +35,7 @@ describe('LicenseDisplay', () => {
       const component = await mountSuspended(LicenseDisplay, {
         props: { license: 'CustomLicense' },
       })
-      const icon = component.find('.i-carbon-scales')
+      const icon = component.find('.i-lucide\\:scale')
       expect(icon.exists()).toBe(false)
     })
   })
@@ -105,7 +105,7 @@ describe('LicenseDisplay', () => {
       const component = await mountSuspended(LicenseDisplay, {
         props: { license: 'CustomLicense OR MIT' },
       })
-      const icon = component.find('.i-carbon-scales')
+      const icon = component.find('.i-lucide\\:scale')
       expect(icon.exists()).toBe(true)
     })
   })
diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
index fab403e..79a6fa2 100644
--- a/test/nuxt/components/PackageVersions.spec.ts
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -920,7 +920,7 @@ describe('PackageVersions', () => {
       })
 
       // Find chevron icons inside buttons
-      const chevronIcons = component.findAll('button span.i-carbon\\:chevron-right')
+      const chevronIcons = component.findAll('button span.i-lucide\\:chevron-right')
       expect(chevronIcons.length).toBeGreaterThan(0)
       for (const icon of chevronIcons) {
         expect(icon.attributes('aria-hidden')).toBe('true')
diff --git a/test/nuxt/components/VersionSelector.spec.ts b/test/nuxt/components/VersionSelector.spec.ts
index f55b4d1..dc3e2b5 100644
--- a/test/nuxt/components/VersionSelector.spec.ts
+++ b/test/nuxt/components/VersionSelector.spec.ts
@@ -544,7 +544,7 @@ describe('VersionSelector', () => {
 
       // Should show loading spinner (motion-safe:animate-spin is applied)
       await vi.waitFor(() => {
-        const spinner = component.find('.i-carbon\\:rotate-180')
+        const spinner = component.find('.i-svg-spinners\\:ring-resize')
         expect(spinner.exists()).toBe(true)
       })
 
diff --git a/test/nuxt/components/compare/FacetRow.spec.ts b/test/nuxt/components/compare/FacetRow.spec.ts
index ff07657..cfa30ad 100644
--- a/test/nuxt/components/compare/FacetRow.spec.ts
+++ b/test/nuxt/components/compare/FacetRow.spec.ts
@@ -33,14 +33,14 @@ describe('FacetRow', () => {
           description: 'Number of downloads per week',
         },
       })
-      expect(component.find('.i-carbon\\:information').exists()).toBe(true)
+      expect(component.find('.i-lucide\\:info').exists()).toBe(true)
     })
 
     it('does not render description icon when not provided', async () => {
       const component = await mountSuspended(FacetRow, {
         props: baseProps,
       })
-      expect(component.find('.i-carbon\\:information').exists()).toBe(false)
+      expect(component.find('.i-lucide\\:info').exists()).toBe(false)
     })
   })
 
@@ -80,7 +80,7 @@ describe('FacetRow', () => {
         },
       })
       // All cells should show loading spinner
-      expect(component.findAll('.i-carbon\\:circle-dash').length).toBe(2)
+      expect(component.findAll('.i-svg-spinners\\:ring-resize').length).toBe(2)
     })
 
     it('renders loading state for specific column loading', async () => {
@@ -92,7 +92,7 @@ describe('FacetRow', () => {
         },
       })
       // Only second cell should show loading spinner
-      const spinners = component.findAll('.i-carbon\\:circle-dash')
+      const spinners = component.findAll('.i-svg-spinners\\:ring-resize')
       expect(spinners.length).toBe(1)
     })
   })
diff --git a/test/nuxt/components/compare/FacetSelector.spec.ts b/test/nuxt/components/compare/FacetSelector.spec.ts
index 9dc2757..3db7637 100644
--- a/test/nuxt/components/compare/FacetSelector.spec.ts
+++ b/test/nuxt/components/compare/FacetSelector.spec.ts
@@ -152,7 +152,7 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-carbon\\:checkmark').exists()).toBe(true)
+      expect(component.find('.i-lucide\\:check').exists()).toBe(true)
     })
 
     it('shows add icon for unselected facets', async () => {
@@ -161,7 +161,7 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-carbon\\:add').exists()).toBe(true)
+      expect(component.find('.i-lucide\\:plus').exists()).toBe(true)
     })
 
     it('applies aria-pressed for selected state', async () => {
@@ -211,8 +211,8 @@ describe('FacetSelector', () => {
       const comingSoonButton = buttons.find(b => b.text().includes(comingSoonFacetLabel))
 
       // Should not have checkmark or add icon
-      expect(comingSoonButton?.find('.i-carbon\\:checkmark').exists()).toBe(false)
-      expect(comingSoonButton?.find('.i-carbon\\:add').exists()).toBe(false)
+      expect(comingSoonButton?.find('.i-lucide\\:check').exists()).toBe(false)
+      expect(comingSoonButton?.find('.i-lucide\\:plus').exists()).toBe(false)
     })
 
     it('does not call toggleFacet when comingSoon facet is clicked', async () => {
diff --git a/test/nuxt/components/compare/PackageSelector.spec.ts b/test/nuxt/components/compare/PackageSelector.spec.ts
index 0d1901e..54eece3 100644
--- a/test/nuxt/components/compare/PackageSelector.spec.ts
+++ b/test/nuxt/components/compare/PackageSelector.spec.ts
@@ -54,7 +54,7 @@ describe('PackageSelector', () => {
 
       const removeButtons = component
         .findAll('button')
-        .filter(b => b.find('.i-carbon\\:close').exists())
+        .filter(b => b.find('.i-lucide\\:x').exists())
       expect(removeButtons.length).toBe(2)
     })
 
@@ -65,9 +65,7 @@ describe('PackageSelector', () => {
         },
       })
 
-      const removeButton = component
-        .findAll('button')
-        .find(b => b.find('.i-carbon\\:close').exists())
+      const removeButton = component.findAll('button').find(b => b.find('.i-lucide\\:x').exists())
       await removeButton!.trigger('click')
 
       const emitted = component.emitted('update:modelValue')
diff --git a/uno.config.ts b/uno.config.ts
index b754467..45348b9 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -16,6 +16,8 @@ const customIcons = {
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path fill="currentColor" d="M16.346 24.11c-.785-.007-1.384-.235-2.034-.632-.932-.49-1.643-1.314-2.152-2.222-.808 1.003-1.888 1.611-3.097 1.955-.515.15-1.416.301-2.911-.24-2.154-.724-3.723-2.965-3.545-5.25-.033-.946.313-1.875.802-2.674-1.305-.7-2.37-1.876-2.777-3.318-.248-.79-.237-1.64-.146-2.452.327-1.916 1.764-3.582 3.615-4.182.738-1.683 2.35-2.938 4.176-3.193a5.54 5.54 0 0 1 3.528.7C13.351.89 16.043.383 18.1 1.436c1.568.75 2.69 2.312 2.962 4.015 1.492.598 2.749 1.817 3.242 3.365.33.958.34 2.013.127 2.997-.382 1.536-1.465 2.842-2.868 3.557.003.273.901 2.243.751 3.73-.033 1.858-1.211 3.62-2.846 4.475-.954.557-2.085.546-3.12.535m-4.47-5.35c1.322-.148 2.19-1.3 2.862-2.339.319-.473.562-1.002.803-1.506.314.287.58.828 1.075.957.522.163 1.133.03 1.453-.443.611-1.14.31-2.517-.046-3.699-.22-.679-.507-1.375-1.054-1.856.116-.823-.372-1.66-1.065-2.09-.592.47-1.491.468-2.061-.037-1.093 1.115-2.095 1.078-3.063.195-.217-.199-.632 1.212-2.088.413-.837.7-1.485 1.375-2.06 2.346-.559 1.046-1.143 1.976-1.194 3.113-.024.664.495 1.36 1.198 1.306.703.063 1.182-.63 1.714-.917.08.928.169 1.924.482 2.829.36 1.171 1.627 1.916 2.825 1.745zm.687-3.498c-.644-.394-.334-1.25-.36-1.871.064-.75.115-1.538.453-2.221.356-.487 1.226-.3 1.265.326-.026.628-.314 1.254-.28 1.905-.075.544.054 1.155-.186 1.653-.198.275-.6.355-.892.208m-2.81-.358c-.605-.329-.413-1.156-.508-1.73.08-.666.014-1.51.571-1.978.545-.38 1.287.271 1.03.869-.276.755-.096 1.58-.09 2.346a.712.712 0 0 1-1.002.493"/></svg>',
   'vlt':
     '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.9991 5.03666C7.9991 5.46387 7.93211 5.87545 7.80808 6.26145C7.45933 7.34674 7.1975 8.58253 7.7669 9.57009L10.389 14.1177C10.7072 14.6697 11.3617 14.9108 11.9989 14.9108V14.9108V14.9108C12.6352 14.9108 13.2886 14.6699 13.6064 14.1187L16.2301 9.5682C16.7993 8.58097 16.5379 7.34565 16.1895 6.26064C16.0656 5.87488 15.9987 5.46358 15.9987 5.03666C15.9987 2.82777 17.7894 1.03711 19.9983 1.03711C22.2071 1.03711 23.9978 2.82777 23.9978 5.03666C23.9978 7.24555 22.2071 9.03621 19.9983 9.03621V9.03621C19.3609 9.03621 18.7062 9.27733 18.3878 9.82951L15.7661 14.3766C15.1967 15.3642 15.4586 16.6001 15.8074 17.6854C15.9314 18.0715 15.9984 18.4831 15.9984 18.9104C15.9984 21.1193 14.2078 22.9099 11.9989 22.9099C9.79001 22.9099 7.99935 21.1193 7.99935 18.9104C7.99935 18.4834 8.06626 18.072 8.19016 17.6862C8.53863 16.6012 8.80017 15.3657 8.23092 14.3785L5.60752 9.8285C5.28961 9.27712 4.63601 9.03621 3.99955 9.03621V9.03621C1.79066 9.03621 0 7.24555 0 5.03666C0 2.82777 1.79066 1.03711 3.99955 1.03711C6.20844 1.03711 7.9991 2.82777 7.9991 5.03666Z" fill="currentColor"></path></svg>',
+  'a11y':
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="6" r="1"/><path d="m9 18 3-5 3 5"/><path d="m8 10 8 0"/><path d="M12 10v4"/></svg>',
 }
 
 export default defineConfig({
-- 
knotmirror 0.0.1