refactor: replace carbon icons (#1454)

app/components/AppHeader.vue

···
     keyshortcut: 'c',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:compare',
+    iconClass: 'i-lucide:git-compare',
   },
   {
     name: 'Settings',
···
     keyshortcut: ',',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:settings',
+    iconClass: 'i-lucide:settings',
   },
 ])
 
···
         to: { name: 'about' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:information',
+        iconClass: 'i-lucide:info',
       },
       {
         name: 'Privacy Policy',
···
         to: { name: 'privacy' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:security',
+        iconClass: 'i-lucide:shield-check',
       },
       {
         name: 'Accessibility',
···
         to: { name: 'accessibility' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:accessibility-alt',
+        iconClass: 'i-custom:a11y',
       },
     ],
   },
···
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:document',
+        iconClass: 'i-lucide:file-text',
       },
       {
         name: 'Source',
···
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-github',
+        iconClass: 'i-simple-icons:github',
       },
       {
         name: 'Social',
···
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-bluesky',
+        iconClass: 'i-simple-icons:bluesky',
       },
       {
         name: 'Chat',
···
         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
···
         :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) -->
···
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"
-        classicon="i-carbon:menu"
+        classicon="i-lucide:menu"
       />
     </nav>
 

app/components/BlueskyPostEmbed.client.vue

···
         <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>
···
     <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>

app/components/CallToAction.vue

···
   {
     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'),
···
   {
     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'),
···
   {
     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'),
···
           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>

app/components/Code/FileTree.vue

···
           :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"

app/components/Code/MobileTreeDrawer.vue

···
     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 -->
···
         <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-          classicon="i-carbon-close"
+          classicon="i-lucide:x"
         />
       </div>
       <CodeFileTree

app/components/CollapsibleSection.vue

···
           :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>

app/components/ColumnPicker.vue

···
       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>

app/components/Compare/ComparisonGrid.vue

···
             </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')"
               />
···
             {{ $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')"
               />

app/components/Compare/FacetCard.vue

···
       <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"
         />
···
         <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 -->

app/components/Compare/FacetRow.vue

···
     <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>
 
···
 
       <!-- 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 -->

app/components/Compare/FacetSelector.vue

···
             facet.comingSoon
               ? undefined
               : isFacetSelected(facet.id)
-                ? 'i-carbon:checkmark'
-                : 'i-carbon:add'
+                ? 'i-lucide:check'
+                : 'i-lucide:plus'
           "
         >
           {{ facet.label }}

app/components/Compare/PackageSelector.vue

···
         <!-- 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>
···
             })
           "
           @click="removePackage(pkg)"
-          classicon="i-carbon:close"
+          classicon="i-lucide:x"
         />
       </TagStatic>
     </div>
···
             @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">

app/components/Compare/ReplacementSuggestion.vue

···
   >
     <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>

app/components/DependencyPathPopup.vue

···
       :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>
 

app/components/Filter/Chips.vue

···
           :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>

app/components/Filter/Panel.vue

···
       @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"
       />

app/components/Header/AccountMenu.client.vue

···
           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) -->
···
           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>
 
···
 
       <!-- 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"
       />
···
                 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>
···
                 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"
···
               <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">
···
               @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">

app/components/Header/AccountMenu.server.vue

···
       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>

app/components/Header/AuthModal.client.vue

···
         type="button"
         class="w-full"
         @click="handleBlueskySignIn"
-        classicon="i-carbon:logo-bluesky"
+        classicon="i-simple-icons:bluesky"
       >
         {{ $t('auth.modal.connect_bluesky') }}
       </ButtonBase>

app/components/Header/ConnectorModal.vue

···
           :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>
 
···
                           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>

app/components/Header/MobileMenu.client.vue

···
                 :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>
 
···
                   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" />
···
                   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>
···
                 @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>
···
                       {{ 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>

app/components/Header/OrgsDropdown.vue

···
     >
       {{ $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"
       />
···
               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>

app/components/Header/PackagesDropdown.vue

···
     >
       {{ $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"
       />
···
               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>

app/components/LicenseDisplay.vue

···
     </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>

app/components/Link/Base.vue

···
     <!-- 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

app/components/Modal.client.vue

···
           type="button"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
-          classicon="i-carbon-close"
+          classicon="i-lucide:x"
         />
       </div>
       <!-- Modal body content -->

app/components/Org/MembersPanel.vue

···
     <!-- 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>
···
         @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"
         />
···
     <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>
···
     <!-- 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>
···
               :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>
···
               :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>

app/components/Org/OperationsQueue.vue

···
 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'
   }
 }
 
···
           :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>
···
             :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'"
···
             :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>
···
       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>
···
         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>
···
         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 }})
···
           <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"
···
             :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>

app/components/Org/TeamsPanel.vue

···
     <!-- 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>
···
         @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"
         />
···
     <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>
···
 
     <!-- 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>
 
···
             <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"
···
             </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>
···
             :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>
 
···
                 :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>
···
                 :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>
···
             :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>

app/components/Package/AccessControls.vue

···
         @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"
         />
···
     <!-- 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>
···
         <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">
···
           :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>
···
             :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>

app/components/Package/Card.vue

···
           <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>
···
           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>

app/components/Package/ClaimPackageModal.vue

···
       <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">
···
           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>
 
···
           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>
···
             >
               <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" />

app/components/Package/Compatibility.vue

···
 }
 
 function getIcon(engine: string): string {
-  return engineIcons[engine] || 'i-carbon:code'
+  return engineIcons[engine] || 'i-lucide:code'
 }
 
 const sortedEngines = computed(() => {

app/components/Package/Dependencies.vue

···
               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)"
···
               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>
···
               :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>

app/components/Package/DeprecatedTree.vue

···
         @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"
         />

app/components/Package/InstallScripts.vue

···
   <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">
···
         @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"
         />
···
               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"

app/components/Package/ListControls.vue

···
         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"

app/components/Package/ListToolbar.vue

···
               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"
             />

app/components/Package/Maintainers.vue

···
           "
           @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>
···
           <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-            classicon="i-carbon-close"
+            classicon="i-lucide:x"
           />
         </form>
       </div>

app/components/Package/ManagerSelect.vue

···
       >
     </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',
···
           <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>

app/components/Package/MetricsBadges.vue

···
           variant="button-secondary"
           size="small"
           :to="typesHref"
-          classicon="i-carbon:checkmark"
+          classicon="i-lucide:check"
         >
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
···
           :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') }}
···
           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
···
         <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>

app/components/Package/Playgrounds.vue

···
   '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
···
 }
 
 function getIcon(provider: string): string {
-  return providerIcons[provider] || 'i-carbon:play'
+  return providerIcons[provider] || 'i-lucide:play'
 }
 
 function getColor(provider: string): string {
···
         @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"
         />

app/components/Package/Replacement.vue

···
     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">
···
             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>
···
             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>
···
         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"
···
         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>

app/components/Package/Skeleton.vue

···
                 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>
···
                 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>
···
                 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>
···
               <!-- 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>
···
               <!-- 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>
···
                 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>
···
                 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>
···
                 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>

app/components/Package/SkillsModal.vue

···
         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>
 
···
           @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"
           />
···
             :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>
 
···
               <!-- 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 },
···
                   }}
                 </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 },
···
                   }}
                 </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 },
···
                 </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>
···
                 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>

app/components/Package/Table.vue

···
               <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>
···
               <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>
···
               <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>

app/components/Package/TableRow.vue

···
     <!-- 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>

app/components/Package/TrendsChart.vue

···
             </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
···
             </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
···
           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>
···
             </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"
               />
···
             <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"
               />

app/components/Package/VersionDistribution.vue

···
               </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
···
               </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
···
 
             <!-- 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"
               />
···
 
             <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 #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"
               />
···
             <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"
               />
···
       <!-- 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>
···
       <!-- 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>

app/components/Package/Versions.vue

···
         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>
···
           >
             <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"
             />
···
               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"
             />
···
                       })
                     : 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 }}
···
                       })
                     : 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 }}
···
           >
             <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>
···
                       })
                     : 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 }}
···
                         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"
                       />
···
                           : 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">
···
                           : 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">
···
                             })
                           : 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 }}

app/components/Package/VulnerabilityTree.vue

···
         @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(
···
         <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"
           />
···
           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>
···
   <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>

app/components/Package/WeeklyDownloadStats.vue

···
           @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>

app/components/PackageProvenanceSection.vue

···
       <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">

app/components/PaginationControls.vue

···
           :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 -->
···
           :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>

app/components/ProvenanceBadge.vue

···
     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>
···
     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>

app/components/Readme.vue

···
     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)
···
 .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) {
···
 }
 .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 */
···
 }
 .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 */
···
 }
 .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 */
···
 }
 .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 */
···
 }
 .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 */

app/components/ReadmeTocDropdown.vue

···
     :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',

app/components/ScrollToTop.client.vue

···
     :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 -->
···
       :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>

app/components/SearchProviderToggle.client.vue

···
       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"
     />
 
···
             "
           >
             <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"
             />
···
             "
           >
             <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"
             />
···
               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>

app/components/SearchProviderToggle.server.vue

···
 <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>

app/components/SearchSuggestionCard.vue

···
       </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>

app/components/Select/Field.vue

···
       </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>

app/components/Settings/AccentColorPicker.vue

···
         :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>

app/components/Settings/TranslationHelper.vue

···
           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>
 
···
           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>

app/components/Terminal/Install.vue

···
               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>
···
                 :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>

app/components/UserCombobox.vue

···
           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(/^@/, ''),

app/components/VersionSelector.vue

···
         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"
       />
···
             >
               <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>

app/components/ViewModeToggle.vue

···
       :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
···
       :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>

app/pages/about.vue

···
             @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>
···
                     :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 })"
                   >
···
                   </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>

app/pages/accessibility.vue

···
             @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>
···
                   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>

app/pages/compare.vue

···
             @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>
···
         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>

app/pages/index.vue

···
                   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') }}

app/pages/org/[org].vue

···
               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>
···
             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
             >

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

···
   {
     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
 
···
                 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>
···
 
         <!-- 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">
             {{
···
 
         <!-- 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

app/pages/package/[[org]]/[name].vue

···
 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',
···
   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(() => {
···
               :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"
               />
···
             <!-- 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
···
                   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>
···
               v-if="docsLink"
               :to="docsLink"
               aria-keyshortcuts="d"
-              classicon="i-carbon:document"
+              classicon="i-lucide:file-text"
             >
               {{ $t('package.links.docs') }}
             </LinkBase>
···
               variant="button-secondary"
               :to="codeLink"
               aria-keyshortcuts="."
-              classicon="i-carbon:code"
+              classicon="i-lucide:code"
             >
               {{ $t('package.links.code') }}
             </LinkBase>
···
               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>
···
                 :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>
···
               </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>
···
               <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>
···
               </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>
···
                       "
                       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)
···
                   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>
···
                   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>
···
                   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>
···
                   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) }}
···
                 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>
···
             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">
···
                     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>
···
                     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>
···
                     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>
···
                     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>
···
                 :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>
···
             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
···
             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>

app/pages/privacy.vue

···
             @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>
···
                 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">
···
                 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">
···
                 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>
···
                   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>

app/pages/recharging.vue

···
 // 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 ---
···
             @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>
···
                 @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>
···
           </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>

app/pages/settings.vue

···
             @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>
···
                 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>
···
                 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>

app/pages/~[username]/index.vue

···
               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>
···
             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
             >

app/pages/~[username]/orgs.vue

···
           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>
···
               <!-- 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(

app/utils/file-icons.ts

···
 /**
  * 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
···
 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',
 }
 
 /**

docs/content/1.getting-started/.navigation.yml

···
 title: Getting Started
-icon: i-lucide-rocket
+icon: i-lucide:rocket

docs/content/1.getting-started/1.introduction.md

···
 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.

docs/content/1.getting-started/2.quick-start.md

···
 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.

docs/content/2.guide/.navigation.yml

···
 title: Guide
-icon: i-lucide-book-open
+icon: i-lucide:book-open

docs/content/2.guide/1.features.md

···
 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.
···
 | ------------------------------------------------------------------------------ | -------------------------------------------- |
 | :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              |
 

docs/content/2.guide/2.keyboard-shortcuts.md

···
 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.

docs/content/2.guide/3.url-structure.md

···
 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.

docs/content/3.faq/.navigation.yml

···
 title: FAQ
-icon: i-lucide-circle-help
+icon: i-lucide:circle-help

docs/content/3.faq/1.troubleshooting.md

···
 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.

docs/content/3.faq/2.comparison.md

···
 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.

docs/content/index.md

···
   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
···
 
 ::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."}
 :::
 ::

package.json

···
     "@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",

pnpm-lock.yaml

···
       '@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
···
   '@humanwhocodes/retry@0.4.3':
     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==}
···
   '@humanwhocodes/module-importer@1.0.1': {}
 
   '@humanwhocodes/retry@0.4.3': {}
-
-  '@iconify-json/carbon@1.2.18':
-    dependencies:
-      '@iconify/types': 2.0.0
 
   '@iconify-json/lucide@1.2.87':
     dependencies:

scripts/generate-file-tree-sprite.ts

···
-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'
···
 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('|')})-(.+)$`)
 

server/utils/readme.ts

···
     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}

test/nuxt/components/LicenseDisplay.spec.ts

···
       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)
     })
 
···
       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)
     })
   })
···
       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)
     })
   })

test/nuxt/components/PackageVersions.spec.ts

···
       })
 
       // 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')

test/nuxt/components/VersionSelector.spec.ts

···
 
       // 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)
       })
 

test/nuxt/components/compare/FacetRow.spec.ts

···
           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)
     })
   })
 
···
         },
       })
       // 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 () => {
···
         },
       })
       // 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)
     })
   })

test/nuxt/components/compare/FacetSelector.spec.ts

···
 
       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 () => {
···
 
       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 () => {
···
       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 () => {

test/nuxt/components/compare/PackageSelector.spec.ts

···
 
       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)
     })
 
···
         },
       })
 
-      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')

uno.config.ts

···
     '<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({