diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 7fe7b1621e..11ff8d43d2 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -109,7 +109,7 @@ useHead({
         >
           {{ title }}
           <span
-            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index 0e70d3ef7d..776f22b1ed 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -119,8 +119,8 @@ function handleDisconnect() {
           class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           @click="copy('pnpm npmx-connector')"
         >
-          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-          <span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
+          <span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
+          <span v-else class="i-carbon:checkmark w-5 h-5 text-green-500" aria-hidden="true" />
         </button>
       </div>
 
@@ -141,10 +141,10 @@ function handleDisconnect() {
                           class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 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-carbon:copy w-5 h-5" aria-hidden="true" />
                           <span
                             v-else
-                            class="i-carbon:checkmark block w-5 h-5 text-green-500"
+                            class="i-carbon:checkmark w-5 h-5 text-green-500"
                             aria-hidden="true"
                           />
                         </button>
diff --git a/app/components/Header/MobileMenu.vue b/app/components/Header/MobileMenu.vue
index 1e2f49ead5..3aeab273a7 100644
--- a/app/components/Header/MobileMenu.vue
+++ b/app/components/Header/MobileMenu.vue
@@ -94,7 +94,7 @@ onUnmounted(deactivate)
                 :aria-label="$t('common.close')"
                 @click="closeMenu"
               >
-                <span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
+                <span class="i-carbon:close w-5 h-5" aria-hidden="true" />
               </button>
             </div>
 
diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index 85905d955d..512248c870 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -28,7 +28,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
     </template>
     <span
       v-if="hasAnyValidLicense"
-      class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 inline-block self-center"
+      class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 self-center"
       aria-hidden="true"
     />
   </span>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 0791d3aa2b..ebd0ee86f7 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -40,7 +40,7 @@ defineExpose({
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
-          <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+          <span class="i-carbon-close w-5 h-5" aria-hidden="true" />
         </button>
       </div>
       <!-- Modal body content -->
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
index 15924b8231..57d2abdf88 100644
--- a/app/components/Org/MembersPanel.vue
+++ b/app/components/Org/MembersPanel.vue
@@ -302,7 +302,7 @@ watch(lastExecutionTime, () => {
         @click="refreshData"
       >
         <span
-          class="i-carbon:renew block w-4 h-4"
+          class="i-carbon:renew w-4 h-4"
           :class="{ 'motion-safe:animate-spin': isLoading || isLoadingTeams }"
           aria-hidden="true"
         />
@@ -391,7 +391,7 @@ watch(lastExecutionTime, () => {
     <!-- Loading state -->
     <div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
       <span
-        class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
+        class="i-carbon:rotate-180 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>
@@ -470,7 +470,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
-              <span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
+              <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </div>
@@ -549,7 +549,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
-              <span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
+              <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </form>
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index 21b058770a..d398d1ca6c 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -141,7 +141,7 @@ watch(isExecuting, executing => {
           :aria-label="$t('operations.queue.refresh')"
           @click="refreshState"
         >
-          <span class="i-carbon:renew block w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:renew w-4 h-4" aria-hidden="true" />
         </button>
       </div>
     </div>
@@ -213,7 +213,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.approve_operation')"
             @click="approveOperation(op.id)"
           >
-            <span class="i-carbon:checkmark block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon:checkmark w-4 h-4" aria-hidden="true" />
           </button>
           <button
             v-if="op.status !== 'running'"
@@ -222,7 +222,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_operation')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </li>
@@ -235,7 +235,7 @@ watch(isExecuting, executing => {
       role="alert"
     >
       <div class="flex items-center gap-2 mb-2">
-        <span class="i-carbon:locked block w-4 h-4 text-amber-400 shrink-0" aria-hidden="true" />
+        <span class="i-carbon:locked 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>
@@ -295,7 +295,7 @@ watch(isExecuting, executing => {
         class="flex items-center gap-2 font-mono text-xs text-fg-muted cursor-pointer hover:text-fg transition-colors duration-200 select-none"
       >
         <span
-          class="i-carbon:chevron-right rtl-flip block w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
+          class="i-carbon:chevron-right rtl-flip w-3 h-3 transition-transform duration-200 [[open]>&]:rotate-90"
           aria-hidden="true"
         />
         {{ $t('operations.queue.log') }} ({{ completedOperations.length }})
@@ -331,7 +331,7 @@ watch(isExecuting, executing => {
             :aria-label="$t('operations.queue.remove_from_log')"
             @click="removeOperation(op.id)"
           >
-            <span class="i-carbon:close block w-3 h-3" aria-hidden="true" />
+            <span class="i-carbon:close w-3 h-3" aria-hidden="true" />
           </button>
         </li>
       </ul>
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
index 32ecb5be02..1726b079cf 100644
--- a/app/components/Org/TeamsPanel.vue
+++ b/app/components/Org/TeamsPanel.vue
@@ -272,7 +272,7 @@ watch(lastExecutionTime, () => {
         @click="loadTeams"
       >
         <span
-          class="i-carbon:renew block w-4 h-4"
+          class="i-carbon:renew w-4 h-4"
           :class="{ 'animate-spin': isLoadingTeams }"
           aria-hidden="true"
         />
@@ -328,7 +328,7 @@ watch(lastExecutionTime, () => {
     <!-- Loading state -->
     <div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
       <span
-        class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
+        class="i-carbon:rotate-180 w-5 h-5 text-fg-muted motion-safe:animate-spin mx-auto"
         aria-hidden="true"
       />
       <p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.teams.loading') }}</p>
@@ -398,7 +398,7 @@ watch(lastExecutionTime, () => {
             :aria-label="$t('org.teams.delete_team', { name: teamName })"
             @click.stop="handleDestroyTeam(teamName)"
           >
-            <span class="i-carbon:trash-can block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon:trash-can w-4 h-4" aria-hidden="true" />
           </button>
         </div>
 
@@ -432,7 +432,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.remove_user', { user })"
                 @click="handleRemoveUser(teamName, user)"
               >
-                <span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
+                <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
               </button>
             </li>
           </ul>
@@ -468,7 +468,7 @@ watch(lastExecutionTime, () => {
                 :aria-label="$t('org.teams.cancel_add_user')"
                 @click="showAddUserFor = null"
               >
-                <span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
+                <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
               </button>
             </form>
           </div>
@@ -525,7 +525,7 @@ watch(lastExecutionTime, () => {
             :aria-label="$t('org.teams.cancel_create')"
             @click="showCreateTeam = false"
           >
-            <span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon:close w-4 h-4" aria-hidden="true" />
           </button>
         </form>
       </div>
diff --git a/app/components/Package/AccessControls.vue b/app/components/Package/AccessControls.vue
index d46d616276..95367af1fb 100644
--- a/app/components/Package/AccessControls.vue
+++ b/app/components/Package/AccessControls.vue
@@ -163,7 +163,7 @@ watch(
         @click="loadCollaborators"
       >
         <span
-          class="i-carbon-renew block w-3.5 h-3.5"
+          class="i-carbon-renew w-3.5 h-3.5"
           :class="{ 'motion-safe:animate-spin': isLoadingCollaborators }"
           aria-hidden="true"
         />
@@ -173,7 +173,7 @@ watch(
     <!-- Loading state -->
     <div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
       <span
-        class="i-carbon-rotate-180 block w-4 h-4 text-fg-muted animate-spin mx-auto"
+        class="i-carbon-rotate-180 w-4 h-4 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
     </div>
@@ -229,7 +229,7 @@ watch(
           :aria-label="$t('package.access.revoke_access', { name: collab.displayName })"
           @click="handleRevokeAccess(collab.name)"
         >
-          <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-carbon-close 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>
@@ -291,7 +291,7 @@ watch(
             :aria-label="$t('package.access.cancel_grant')"
             @click="showGrantAccess = false"
           >
-            <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
           </button>
         </div>
       </form>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index e40b1db721..f9084bd9f4 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -118,7 +118,7 @@ const pkgDescription = useMarkdown(() => ({
           <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 inline-block" aria-hidden="true" />
+              <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
               <span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
             </dd>
           </div>
@@ -152,7 +152,7 @@ const pkgDescription = useMarkdown(() => ({
           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 inline-block" aria-hidden="true" />
+          <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
           <span class="font-mono text-xs">
             {{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
           </span>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 247ca6fa4b..7014b95708 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -95,7 +95,7 @@ const sortedOptionalDependencies = computed(() => {
               :title="getOutdatedTooltip(outdatedDeps[dep], $t)"
               aria-hidden="true"
             >
-              <span class="i-carbon:warning-alt w-3 h-3 block" />
+              <span class="i-carbon:warning-alt w-3 h-3" />
             </span>
             <NuxtLink
               v-if="getVulnerableDepInfo(dep)"
@@ -107,7 +107,7 @@ const sortedOptionalDependencies = computed(() => {
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
             >
-              <span class="i-carbon:security w-3 h-3 block" aria-hidden="true" />
+              <span class="i-carbon:security w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </NuxtLink>
             <NuxtLink
@@ -119,7 +119,7 @@ const sortedOptionalDependencies = computed(() => {
               class="shrink-0 text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
             >
-              <span class="i-carbon-warning-hex w-3 h-3 block" aria-hidden="true" />
+              <span class="i-carbon-warning-hex w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </NuxtLink>
             <NuxtLink
diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 92a71cc4a1..cd10a31074 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -699,7 +699,7 @@ const config = computed(() => {
             }
           "
         >
-          <span class="i-carbon:reset w-5 h-5 inline-block" aria-hidden="true" />
+          <span class="i-carbon:reset w-5 h-5" aria-hidden="true" />
         </button>
       </div>
     </div>
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index f1524d3669..ad91aae178 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -91,7 +91,7 @@ const isExpanded = shallowRef(false)
               :title="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
               aria-hidden="true"
             >
-              <span class="i-carbon:warning-alt w-3 h-3 block" />
+              <span class="i-carbon:warning-alt w-3 h-3" />
             </span>
             <span
               class="font-mono text-xs text-end truncate"
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
index e84398c46f..423e026e9b 100644
--- a/app/components/Package/ListControls.vue
+++ b/app/components/Package/ListControls.vue
@@ -59,7 +59,7 @@ const showFilteredCount = computed(() => {
         class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
         aria-hidden="true"
       >
-        <div class="i-carbon:search inline-block w-4 h-4" />
+        <div class="i-carbon:search w-4 h-4" />
       </div>
       <input
         id="package-filter"
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 3757ea05f9..4cac0e3885 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -176,7 +176,7 @@ watch(
       >
         {{ $t('package.maintainers.title') }}
         <span
-          class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+          class="i-carbon-link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
           aria-hidden="true"
         />
       </a>
@@ -230,7 +230,7 @@ watch(
           "
           @click="handleRemoveOwner(maintainer.name)"
         >
-          <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
         </button>
       </li>
     </ul>
@@ -280,7 +280,7 @@ watch(
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
           >
-            <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
           </button>
         </form>
       </div>
diff --git a/app/components/Package/SkillsModal.vue b/app/components/Package/SkillsModal.vue
index b9f835a0bd..5b45ecb7b8 100644
--- a/app/components/Package/SkillsModal.vue
+++ b/app/components/Package/SkillsModal.vue
@@ -184,7 +184,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
               <!-- File counts & warnings -->
               <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
                 <span v-if="skill.fileCounts?.scripts" class="text-fg-subtle">
-                  <span class="i-carbon:script size-3 inline-block align-[-2px] me-0.5" />{{
+                  <span class="i-carbon:script size-3 align-[-2px] me-0.5" />{{
                     $t(
                       'package.skills.file_counts.scripts',
                       { count: skill.fileCounts.scripts },
@@ -193,7 +193,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                   }}
                 </span>
                 <span v-if="skill.fileCounts?.references" class="text-fg-subtle">
-                  <span class="i-carbon:document size-3 inline-block align-[-2px] me-0.5" />{{
+                  <span class="i-carbon:document size-3 align-[-2px] me-0.5" />{{
                     $t(
                       'package.skills.file_counts.refs',
                       { count: skill.fileCounts.references },
@@ -202,7 +202,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                   }}
                 </span>
                 <span v-if="skill.fileCounts?.assets" class="text-fg-subtle">
-                  <span class="i-carbon:image size-3 inline-block align-[-2px] me-0.5" />{{
+                  <span class="i-carbon:image size-3 align-[-2px] me-0.5" />{{
                     $t(
                       'package.skills.file_counts.assets',
                       { count: skill.fileCounts.assets },
@@ -212,7 +212,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
                 </span>
                 <template v-for="warning in skill.warnings" :key="warning.message">
                   <span class="text-amber-500">
-                    <span class="i-carbon:warning size-3 inline-block align-[-2px] me-0.5" />{{
+                    <span class="i-carbon:warning size-3 align-[-2px] me-0.5" />{{
                       warning.message
                     }}
                   </span>
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 37bd3441f4..86eeed3113 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -153,10 +153,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
               class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
-              <span
-                class="i-carbon:arrow-right rtl-flip w-3 h-3 inline-block align-middle"
-                aria-hidden="true"
-              />
+              <span class="i-carbon:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />
               <span class="sr-only">View {{ typesPackageName }}</span>
             </NuxtLink>
           </div>
diff --git a/app/components/UserCombobox.vue b/app/components/UserCombobox.vue
index 9af0abb970..7c7b2e44e7 100644
--- a/app/components/UserCombobox.vue
+++ b/app/components/UserCombobox.vue
@@ -204,10 +204,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
           role="status"
           aria-live="polite"
         >
-          <span
-            class="i-carbon:information w-3 h-3 inline-block me-1 align-middle"
-            aria-hidden="true"
-          />
+          <span class="i-carbon:information w-3 h-3 me-1 align-middle" aria-hidden="true" />
           {{
             $t('user.combobox.press_enter_to_add', {
               username: inputValue.trim().replace(/^@/, ''),
diff --git a/app/components/compare/PackageSelector.vue b/app/components/compare/PackageSelector.vue
index 5200ef72a8..2e8c2e92ce 100644
--- a/app/components/compare/PackageSelector.vue
+++ b/app/components/compare/PackageSelector.vue
@@ -75,7 +75,7 @@ function handleBlur() {
           :aria-label="$t('compare.selector.remove_package', { package: pkg })"
           @click="removePackage(pkg)"
         >
-          <span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
         </button>
       </div>
     </div>
@@ -90,7 +90,7 @@ function handleBlur() {
           class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle"
           aria-hidden="true"
         >
-          <span class="i-carbon:search inline-block w-4 h-4" />
+          <span class="i-carbon:search w-4 h-4" />
         </span>
         <input
           id="package-search"
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 894096e084..b860e4c45f 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -783,7 +783,7 @@ function handleClick(event: MouseEvent) {
                 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"
                 :title="$t('package.stats.view_dependency_graph')"
               >
-                <span class="i-carbon:network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
+                <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
                 <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
               </a>
 
@@ -795,10 +795,7 @@ function handleClick(event: MouseEvent) {
                 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"
                 :title="$t('package.stats.inspect_dependency_tree')"
               >
-                <span
-                  class="i-solar:eye-scan-outline w-3.5 h-3.5 inline-block"
-                  aria-hidden="true"
-                />
+                <span class="i-solar:eye-scan-outline w-3.5 h-3.5" aria-hidden="true" />
                 <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
               </a>
             </dd>
@@ -932,7 +929,7 @@ function handleClick(event: MouseEvent) {
             >
               {{ $t('package.get_started.title') }}
               <span
-                class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                 aria-hidden="true"
               />
             </a>
@@ -984,7 +981,7 @@ function handleClick(event: MouseEvent) {
           >
             {{ $t('package.readme.title') }}
             <span
-              class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
               aria-hidden="true"
             />
           </a>
@@ -1022,7 +1019,7 @@ function handleClick(event: MouseEvent) {
               >
                 {{ $t('package.keywords_title') }}
                 <span
-                  class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                  class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                   aria-hidden="true"
                 />
               </a>
@@ -1072,7 +1069,7 @@ function handleClick(event: MouseEvent) {
               >
                 {{ $t('package.compatibility') }}
                 <span
-                  class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                  class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                   aria-hidden="true"
                 />
               </a>
diff --git a/uno.config.ts b/uno.config.ts
index 67a80d9548..284aabc760 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -21,6 +21,9 @@ export default defineConfig({
   presets: [
     presetWind4(),
     presetIcons({
+      extraProperties: {
+        display: 'inline-block',
+      },
       warn: true,
       scale: 1.2,
       collections: {