From 75dc349b048a4d7dd26c170ad0cb9529020fce99 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Wed, 15 Apr 2026 11:35:58 -0500
Subject: [PATCH] refactor: use icon kind & bool props

---
 src/components/LoginPanel.tsx                 |  4 +--
 src/components/ProfileSkeleton.tsx            |  2 +-
 src/components/ReauthBanner.tsx               |  2 +-
 src/components/Wordmark.tsx                   |  4 +--
 src/components/account/AccountButtons.tsx     |  8 ++---
 src/components/account/AccountSwitcher.tsx    |  2 +-
 src/components/account/AccountSwitcherRow.tsx |  2 +-
 .../actors/ActorTypeaheadLoading.tsx          |  2 +-
 src/components/deck/AddColumnPanel.tsx        | 33 ++++++++---------
 src/components/deck/ColumnPicker.tsx          |  5 ++-
 src/components/deck/DeckColumn.tsx            | 17 ++++-----
 src/components/deck/DeckWorkspace.tsx         |  4 +--
 src/components/deck/DiagnosticsPanel.tsx      | 12 +++----
 .../diagnostics/RecordBacklinksPanel.tsx      |  4 +--
 .../explorer/ExplorerBreadcrumb.tsx           |  5 ++-
 src/components/explorer/ExplorerPanel.tsx     |  2 +-
 src/components/explorer/explorer-state.ts     |  6 ++--
 src/components/feeds/DraftsList.tsx           | 10 +++---
 src/components/feeds/FeedChipAvatar.tsx       |  2 +-
 src/components/feeds/FeedComposer.tsx         | 22 ++++++------
 src/components/feeds/FeedDrawer.tsx           | 10 +++---
 src/components/feeds/FeedEmpty.tsx            |  4 +--
 src/components/feeds/FeedPane.tsx             |  4 +--
 src/components/feeds/FeedTabs.tsx             |  2 +-
 src/components/feeds/FeedWorkspace.tsx        |  2 +-
 src/components/feeds/ImageGallery.tsx         | 16 ++++-----
 src/components/feeds/MediaNoticeToast.tsx     |  4 +--
 src/components/feeds/PostCard.tsx             |  8 ++---
 src/components/feeds/embeds/VideoEmbed.tsx    | 13 +++----
 src/components/moderation/ModeratedAvatar.tsx |  2 +-
 .../moderation/ModeratedBlurOverlay.tsx       |  2 +-
 .../moderation/ModerationBadgeRow.tsx         |  6 ++--
 .../notifications/NotificationItem.tsx        |  2 +-
 .../notifications/NotificationsPanel.tsx      |  6 ++--
 src/components/posts/PostEngagementPanel.tsx  |  2 +-
 src/components/posts/PostPanel.tsx            |  2 +-
 src/components/posts/ThreadDrawer.tsx         |  4 +--
 .../FollowHygeineConfirmationDialog.tsx       |  6 ++--
 src/components/profile/FollowHygienePanel.tsx | 10 +++---
 .../profile/FollowHygieneToolbar.tsx          |  6 ++--
 src/components/profile/ProfileActorList.tsx   | 20 ++++-------
 src/components/profile/ProfileFeed.tsx        |  9 ++---
 src/components/profile/ProfileHero.tsx        | 10 ++----
 src/components/profile/ProfilePanel.tsx       |  4 +--
 src/components/rail/AppRailButton.tsx         |  2 +-
 src/components/saved/SavedPostsPanel.tsx      | 10 +++---
 src/components/search/HashtagPanel.tsx        |  2 +-
 .../search/LocalPostResultsList.tsx           |  2 +-
 .../search/SearchPreflightPanel.tsx           | 10 +++---
 src/components/search/SearchQueryInput.tsx    | 12 ++-----
 src/components/search/SyncStatusPanel.tsx     | 10 ++----
 .../settings/SettingsInlineFeedback.tsx       |  2 +-
 .../settings/SettingsModeration.tsx           |  2 +-
 src/components/settings/SettingsPanel.tsx     |  2 +-
 src/components/shared/ContextMenu.tsx         |  4 +--
 src/components/shared/ErrorToast.tsx          |  4 +--
 src/components/shared/Icon.tsx                | 36 +++++++++++++++++--
 57 files changed, 194 insertions(+), 206 deletions(-)

diff --git a/src/components/LoginPanel.tsx b/src/components/LoginPanel.tsx
index 29aa646..b42fa0d 100644
--- a/src/components/LoginPanel.tsx
+++ b/src/components/LoginPanel.tsx
@@ -14,11 +14,11 @@ function LoginSubmitButton(props: { pending: boolean }) {
         when={props.pending}
         fallback={
           <>
-            <Icon kind="ext-link" name="ext-link" aria-hidden="true" class="mr-1" />
+            <Icon kind="ext-link" name="ext-link" aria-hidden class="mr-1" />
             <span>Continue</span>
           </>
         }>
-        <Icon kind="loader" name="loader" aria-hidden="true" class="mr-1" />
+        <Icon kind="loader" name="loader" aria-hidden class="mr-1" />
         <span>Opening sign-in...</span>
       </Show>
     </button>
diff --git a/src/components/ProfileSkeleton.tsx b/src/components/ProfileSkeleton.tsx
index 5e3b84a..9c0e20b 100644
--- a/src/components/ProfileSkeleton.tsx
+++ b/src/components/ProfileSkeleton.tsx
@@ -2,7 +2,7 @@ import { For } from "solid-js";
 
 export function ProfileSkeleton() {
   return (
-    <div class="grid gap-[0.85rem]" aria-hidden="true">
+    <div class="grid gap-[0.85rem]" aria-hidden>
       <span class="skeleton-block h-18 w-18 rounded-full" />
       <For each={["w-[min(16rem,80%)]", "w-[min(11rem,64%)]", "w-[min(9rem,48%)]"]}>
         {w => <span class={`skeleton-block h-[0.85rem] ${w} rounded-full`} />}
diff --git a/src/components/ReauthBanner.tsx b/src/components/ReauthBanner.tsx
index b4d0e1e..e8803b1 100644
--- a/src/components/ReauthBanner.tsx
+++ b/src/components/ReauthBanner.tsx
@@ -15,7 +15,7 @@ export function ReauthBanner(props: { onReauth: () => void }) {
         <p class="m-0 text-xs text-on-surface-variant">Sign in again to reconnect your account.</p>
       </div>
       <button class="pill-action border-0 bg-white/8 text-on-surface" type="button" onClick={() => props.onReauth()}>
-        <Icon kind="refresh" name="refresh" aria-hidden="true" class="mr-1" />
+        <Icon kind="refresh" name="refresh" aria-hidden class="mr-1" />
         Sign in again
       </button>
     </Motion.div>
diff --git a/src/components/Wordmark.tsx b/src/components/Wordmark.tsx
index a21c60e..f07a660 100644
--- a/src/components/Wordmark.tsx
+++ b/src/components/Wordmark.tsx
@@ -2,7 +2,7 @@ import { Show } from "solid-js";
 
 export function LazuriteLogo(props: { class?: string }) {
   return (
-    <svg class={props.class} viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+    <svg class={props.class} viewBox="0 0 512 512" fill="currentColor" aria-hidden>
       <path d="M128 16v99.3l119 118.9V120.1zm256 0L265 120.1v114.1l119-119zM16 128l104 119h114.2L115.3 128zm380.8 0l-119 119h114.1l104-119zM120 265L16 384h99.2l119-119zm157.8 0l119 119h99.1l-104-119zM247 277.8l-119 119V496l119-104.1zm18 0v114.1L384 496v-99.2z" />
     </svg>
   );
@@ -17,7 +17,7 @@ export function Wordmark(props: { class?: string; compact?: boolean; iconClass?:
         class="grid shrink-0 place-items-center rounded-xl p-3 text-primary"
         style={{ background: "var(--control-bg)", "box-shadow": "var(--inset-shadow)" }}
         classList={{ [props.iconClass ?? ""]: !!props.iconClass }}
-        aria-hidden="true">
+        aria-hidden>
         <LazuriteLogo class="h-9 w-9" />
       </span>
       <Show when={!props.compact}>
diff --git a/src/components/account/AccountButtons.tsx b/src/components/account/AccountButtons.tsx
index 035f454..6520abe 100644
--- a/src/components/account/AccountButtons.tsx
+++ b/src/components/account/AccountButtons.tsx
@@ -34,8 +34,8 @@ export function AccountSwitchButton(
       type="button"
       disabled={isActive() || switching() || loggingOut()}
       onClick={() => props.onSwitch(props.account.did)}>
-      <Show when={switching()} fallback={<Icon kind="user" name="user" aria-hidden="true" class="mr-1" />}>
-        <Icon kind="loader" name="loader" aria-hidden="true" class="mr-1" />
+      <Show when={switching()} fallback={<Icon kind="user" name="user" aria-hidden class="mr-1" />}>
+        <Icon kind="loader" name="loader" aria-hidden class="mr-1" />
         <span>{content()}</span>
       </Show>
     </button>
@@ -58,12 +58,12 @@ export function LogoutButton(
         when={isLoggingOut()}
         fallback={
           <>
-            <Icon kind="logout" name="logout" aria-hidden="true" />
+            <Icon kind="logout" name="logout" aria-hidden />
             <span>Logout</span>
           </>
         }>
         <>
-          <Icon kind="loader" name="loader" aria-hidden="true" />
+          <Icon kind="loader" name="loader" aria-hidden />
           <span>Removing...</span>
         </>
       </Show>
diff --git a/src/components/account/AccountSwitcher.tsx b/src/components/account/AccountSwitcher.tsx
index 33d666f..aeca846 100644
--- a/src/components/account/AccountSwitcher.tsx
+++ b/src/components/account/AccountSwitcher.tsx
@@ -99,7 +99,7 @@ export function AccountSwitcher() {
             "bottom-0 right-0 h-[1.35rem] w-[1.35rem] translate-x-[20%] translate-y-[20%] rounded-full bg-surface-container-high text-[0.78rem] leading-none shadow-[0_0_0_2px_var(--surface-container-lowest),inset_0_0_0_1px_var(--outline-subtle)]":
               compact(),
           }}
-          aria-hidden="true">
+          aria-hidden>
           <Show when={shell.showSwitcher} fallback={<ArrowIcon direction="down" />}>
             <ArrowIcon direction="up" />
           </Show>
diff --git a/src/components/account/AccountSwitcherRow.tsx b/src/components/account/AccountSwitcherRow.tsx
index 2c18300..50c36ea 100644
--- a/src/components/account/AccountSwitcherRow.tsx
+++ b/src/components/account/AccountSwitcherRow.tsx
@@ -36,7 +36,7 @@ export function AccountSwitcherRow(props: AccountSwitcherRowProps) {
         aria-label={`Logout ${props.account.handle || props.account.did}`}
         disabled={isLocked()}
         onClick={() => props.onLogout(props.account.did)}>
-        <Icon kind="logout" name="logout" aria-hidden="true" />
+        <Icon kind="logout" name="logout" aria-hidden />
       </button>
     </div>
   );
diff --git a/src/components/actors/ActorTypeaheadLoading.tsx b/src/components/actors/ActorTypeaheadLoading.tsx
index 254536d..3c4b45e 100644
--- a/src/components/actors/ActorTypeaheadLoading.tsx
+++ b/src/components/actors/ActorTypeaheadLoading.tsx
@@ -12,7 +12,7 @@ export function ActorTypeaheadLoading(props: ActorTypeaheadLoadingProps) {
   return (
     <Show when={props.visible}>
       <span class={`${defaultClass()} ${props.class ?? ""}`}>
-        <Icon kind="loader" aria-hidden="true" class={props.iconClass} />
+        <Icon kind="loader" aria-hidden class={props.iconClass} />
       </span>
     </Show>
   );
diff --git a/src/components/deck/AddColumnPanel.tsx b/src/components/deck/AddColumnPanel.tsx
index 2f3df51..15a7f32 100644
--- a/src/components/deck/AddColumnPanel.tsx
+++ b/src/components/deck/AddColumnPanel.tsx
@@ -3,7 +3,7 @@ import type { SearchMode } from "$/lib/api/types/search";
 import { createEffect, createSignal, For, Match, onCleanup, Show, splitProps, Switch } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Motion, Presence } from "solid-motionone";
-import { Icon } from "../shared/Icon";
+import { Icon, type IconKind } from "../shared/Icon";
 import { DiagnosticsPicker, ExplorerPicker, FeedPicker, MessagesPicker } from "./ColumnPicker";
 import { ProfilePicker } from "./ColumnPicker/ProfileColumnPicker";
 import { SearchPicker } from "./ColumnPicker/SearchPicker";
@@ -13,6 +13,8 @@ type AddColumnPanelProps = { onAdd: (kind: ColumnKind, config: string) => void;
 
 type PanelTab = ColumnKind;
 
+type TabProps = { icon: IconKind; id: PanelTab; label: string };
+
 type PanelSubmissionHandlers = {
   onDiagnosticsSubmit: (did: string) => void;
   onExplorerSubmit: (uri: string) => void;
@@ -72,11 +74,7 @@ function AddColumnPanelHeader(props: { onClose: () => void }) {
   );
 }
 
-type AddColumnPanelTabsProps = {
-  activeTab: PanelTab;
-  onTabChange: (tab: PanelTab) => void;
-  tabs: Array<{ icon: string; id: PanelTab; label: string }>;
-};
+type AddColumnPanelTabsProps = { activeTab: PanelTab; onTabChange: (tab: PanelTab) => void; tabs: TabProps[] };
 
 function AddColumnPanelTabs(props: AddColumnPanelTabsProps) {
   return (
@@ -92,9 +90,7 @@ function AddColumnPanelTabs(props: AddColumnPanelTabsProps) {
                 props.activeTab !== tab.id,
             }}
             onClick={() => props.onTabChange(tab.id)}>
-            <span class="flex items-center">
-              <i class={tab.icon} />
-            </span>
+            <Icon kind={tab.icon} />
             {tab.label}
           </button>
         )}
@@ -107,7 +103,7 @@ type AddColumnPanelFrame = {
   activeTab: PanelTab;
   onClose: () => void;
   onTabChange: (tab: PanelTab) => void;
-  tabs: Array<{ icon: string; id: PanelTab; label: string }>;
+  tabs: TabProps[];
 };
 
 type AddColumnPanelBodyProps = { frame: AddColumnPanelFrame; handlers: PanelSubmissionHandlers };
@@ -118,7 +114,7 @@ function AddColumnPanelBody(props: AddColumnPanelBodyProps) {
   return (
     <Motion.aside
       role="dialog"
-      aria-modal="true"
+      aria-modal
       aria-labelledby="add-column-panel-title"
       class="ui-overlay-card relative z-10 flex h-full w-full max-w-88 flex-col bg-surface-container-highest backdrop-blur-[20px]"
       initial={{ opacity: 0, x: 32 }}
@@ -170,14 +166,13 @@ export function AddColumnPanel(props: AddColumnPanelProps) {
     panelActions.onAdd("profile", JSON.stringify(selection));
   }
 
-  // TODO: use IconKind for Icon
-  const tabs: Array<{ icon: string; id: PanelTab; label: string }> = [
-    { icon: "i-ri-rss-line", id: "feed", label: "Feed" },
-    { icon: "i-ri-compass-discover-line", id: "explorer", label: "Explorer" },
-    { icon: "i-ri-stethoscope-line", id: "diagnostics", label: "Diagnostics" },
-    { icon: "i-ri-message-3-line", id: "messages", label: "DMs" },
-    { icon: "i-ri-search-line", id: "search", label: "Search" },
-    { icon: "i-ri-user-3-line", id: "profile", label: "Profile" },
+  const tabs: TabProps[] = [
+    { icon: "rss", id: "feed", label: "Feed" },
+    { icon: "compass", id: "explorer", label: "Explorer" },
+    { icon: "stethoscope", id: "diagnostics", label: "Diagnostics" },
+    { icon: "messages", id: "messages", label: "DMs" },
+    { icon: "search", id: "search", label: "Search" },
+    { icon: "user", id: "profile", label: "Profile" },
   ];
 
   function handleKeyDown(event: KeyboardEvent) {
diff --git a/src/components/deck/ColumnPicker.tsx b/src/components/deck/ColumnPicker.tsx
index f827e6b..db07d4e 100644
--- a/src/components/deck/ColumnPicker.tsx
+++ b/src/components/deck/ColumnPicker.tsx
@@ -4,6 +4,7 @@ import type { FeedGeneratorView, SavedFeedItem } from "$/lib/types";
 import * as logger from "@tauri-apps/plugin-log";
 import { createSignal, For, onMount, Show } from "solid-js";
 import { FeedChipAvatar } from "../feeds/FeedChipAvatar";
+import { LoadingIcon } from "../shared/Icon";
 import type { FeedPickerSelection } from "./types";
 
 function feedKindLabel(feed: SavedFeedItem) {
@@ -46,9 +47,7 @@ export function FeedPicker(props: { onSelect: (selection: FeedPickerSelection) =
     <div class="grid gap-2">
       <Show when={loading()}>
         <div class="flex items-center justify-center py-6">
-          <span class="flex items-center text-on-surface-variant">
-            <i class="i-ri-loader-4-line animate-spin" />
-          </span>
+          <LoadingIcon isLoading class="text-on-surface-variant" />
         </div>
       </Show>
 
diff --git a/src/components/deck/DeckColumn.tsx b/src/components/deck/DeckColumn.tsx
index 61b9f2c..6b7ab96 100644
--- a/src/components/deck/DeckColumn.tsx
+++ b/src/components/deck/DeckColumn.tsx
@@ -7,6 +7,7 @@ import { SearchPanel } from "$/components/search/SearchPanel";
 import type { Column, ColumnWidth } from "$/lib/api/types/columns";
 import type { PostView, SavedFeedItem } from "$/lib/types";
 import { createSignal, Match, Show, Switch } from "solid-js";
+import { ArrowIcon, Icon } from "../shared/Icon";
 import { DiagnosticsColumn } from "./DiagnosticsColumn";
 import {
   COLUMN_WIDTH_PX,
@@ -87,9 +88,7 @@ function HeaderControls(
         aria-label="Move column left"
         title="Move column left"
         onClick={() => props.onMoveLeft()}>
-        <span class="flex items-center">
-          <i class="i-ri-arrow-left-s-line" />
-        </span>
+        <ArrowIcon direction="left" />
       </button>
       <button
         type="button"
@@ -97,9 +96,7 @@ function HeaderControls(
         aria-label="Move column right"
         title="Move column right"
         onClick={() => props.onMoveRight()}>
-        <span class="flex items-center">
-          <i class="i-ri-arrow-right-s-line" />
-        </span>
+        <ArrowIcon direction="right" />
       </button>
       <button
         type="button"
@@ -107,9 +104,7 @@ function HeaderControls(
         aria-label="Close column"
         title="Close column"
         onClick={() => props.onClose()}>
-        <span class="flex items-center">
-          <i class="i-ri-close-line" />
-        </span>
+        <Icon kind="close" aria-hidden />
       </button>
     </div>
   );
@@ -120,10 +115,10 @@ function ColumnHeader(props: ColumnHeaderProps) {
     <header class="flex shrink-0 items-center gap-2 rounded-t-2xl bg-surface-container-highest px-3 py-2.5 backdrop-blur-[18px] shadow-(--inset-shadow)">
       <span
         class="flex cursor-grab items-center text-on-surface-variant opacity-40 hover:opacity-80 active:cursor-grabbing"
-        draggable="true"
+        draggable
         onDragStart={(e) => props.onDragStart(e)}
         onDragEnd={() => props.onDragEnd()}
-        aria-hidden="true"
+        aria-hidden
         title="Drag to reorder">
         <i class="i-ri-draggable" />
       </span>
diff --git a/src/components/deck/DeckWorkspace.tsx b/src/components/deck/DeckWorkspace.tsx
index 2e1f29c..61b1fc4 100644
--- a/src/components/deck/DeckWorkspace.tsx
+++ b/src/components/deck/DeckWorkspace.tsx
@@ -9,7 +9,7 @@ import * as logger from "@tauri-apps/plugin-log";
 import { createEffect, For, onCleanup, onMount, Show } from "solid-js";
 import { createStore, produce } from "solid-js/store";
 import { Motion } from "solid-motionone";
-import { ActionIcon, Icon } from "../shared/Icon";
+import { ActionIcon, LoadingIcon } from "../shared/Icon";
 import { AddColumnPanel } from "./AddColumnPanel";
 import { DeckColumn } from "./DeckColumn";
 import { parseFeedConfig, type ResolvedFeedColumn, resolveFeedColumn } from "./types";
@@ -378,7 +378,7 @@ export function DeckWorkspace() {
       <div class="min-h-0 flex-1 overflow-x-auto overflow-y-hidden overscroll-contain">
         <Show when={state.loading}>
           <div class="flex h-full min-h-80 items-center justify-center">
-            <Icon iconClass="i-ri-loader-4-line animate-spin text-2xl text-on-surface-variant" />
+            <LoadingIcon isLoading class="text-2xl text-on-surface-variant" />
           </div>
         </Show>
 
diff --git a/src/components/deck/DiagnosticsPanel.tsx b/src/components/deck/DiagnosticsPanel.tsx
index 37530b6..5fa0a4b 100644
--- a/src/components/deck/DiagnosticsPanel.tsx
+++ b/src/components/deck/DiagnosticsPanel.tsx
@@ -389,7 +389,7 @@ function DiagnosticsHeader(props: { did: string; embedded: boolean; isSelf: bool
             class="inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-surface-container-high text-on-surface-variant transition duration-150 hover:-translate-y-px hover:text-on-surface"
             onClick={() => props.onClose?.()}
             title="Close diagnostics panel">
-            <Icon kind="close" aria-hidden="true" />
+            <Icon kind="close" aria-hidden />
           </button>
         </Show>
       </div>
@@ -624,7 +624,7 @@ function DiagnosticsBlocksTab(
         type="button"
         class="inline-flex w-fit items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 py-2 text-sm font-medium text-on-surface transition duration-150 hover:-translate-y-px"
         onClick={() => props.onToggleExpanded()}>
-        <Icon kind={props.expanded ? "close" : "list"} aria-hidden="true" />
+        <Icon kind={props.expanded ? "close" : "list"} aria-hidden />
         {props.expanded ? "Hide details" : "Show details"}
       </button>
 
@@ -739,7 +739,7 @@ function DiagnosticsError(props: { message: string | null; onRetry?: () => void
           type="button"
           class="inline-flex w-fit items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 py-2 text-sm font-medium text-on-surface transition duration-150 hover:-translate-y-px"
           onClick={() => props.onRetry?.()}>
-          <Icon kind="refresh" aria-hidden="true" />
+          <Icon kind="refresh" aria-hidden />
           Retry
         </button>
       </Show>
@@ -819,7 +819,7 @@ function ListCard(props: { list: DiagnosticList; onOpenExplorerTarget?: (target:
                 class="inline-flex items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 py-2 text-sm text-on-surface transition duration-150 hover:-translate-y-px"
                 disabled={!props.onOpenExplorerTarget}
                 onClick={() => props.onOpenExplorerTarget?.(uri())}>
-                <Icon kind="ext-link" aria-hidden="true" />
+                <Icon kind="ext-link" aria-hidden />
                 Open list
               </button>
             )}
@@ -858,7 +858,7 @@ function StarterPackCard(props: { onOpenExplorerTarget?: (target: string) => voi
                 class="inline-flex items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 py-2 text-sm text-on-surface transition duration-150 hover:-translate-y-px"
                 disabled={!props.onOpenExplorerTarget}
                 onClick={() => props.onOpenExplorerTarget?.(uri())}>
-                <Icon kind="ext-link" aria-hidden="true" />
+                <Icon kind="ext-link" aria-hidden />
                 AT Explorer
               </button>
             )}
@@ -926,7 +926,7 @@ function BlockProfileRow(
         when={props.item.available}
         fallback={
           <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-container-high text-xs font-semibold text-on-surface-variant">
-            <Icon kind="danger" aria-hidden="true" />
+            <Icon kind="danger" aria-hidden />
           </div>
         }>
         <ModeratedAvatar
diff --git a/src/components/diagnostics/RecordBacklinksPanel.tsx b/src/components/diagnostics/RecordBacklinksPanel.tsx
index cb12a62..95fe802 100644
--- a/src/components/diagnostics/RecordBacklinksPanel.tsx
+++ b/src/components/diagnostics/RecordBacklinksPanel.tsx
@@ -134,7 +134,7 @@ export function RecordBacklinksPanel(props: RecordBacklinksPanelProps) {
               type="button"
               class="inline-flex w-fit items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 py-2 text-sm font-medium text-on-surface transition duration-150 hover:-translate-y-px"
               onClick={() => void loadBacklinks(requestId, activeUri())}>
-              <Icon kind="refresh" aria-hidden="true" />
+              <Icon kind="refresh" aria-hidden />
               Retry
             </button>
           </div>
@@ -166,7 +166,7 @@ function BacklinkGroupCard(
         onClick={() => props.onToggle()}>
         <div class="flex min-w-0 items-start gap-3">
           <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-surface-container-high text-primary">
-            <Icon kind={props.icon} aria-hidden="true" />
+            <Icon kind={props.icon} aria-hidden />
           </div>
           <div class="min-w-0">
             <p class="m-0 text-sm font-semibold text-on-surface">{props.label}</p>
diff --git a/src/components/explorer/ExplorerBreadcrumb.tsx b/src/components/explorer/ExplorerBreadcrumb.tsx
index 9d8dbdd..4324e52 100644
--- a/src/components/explorer/ExplorerBreadcrumb.tsx
+++ b/src/components/explorer/ExplorerBreadcrumb.tsx
@@ -2,10 +2,9 @@ import { ArrowIcon, ExplorerLevelIcon } from "$/components/shared/Icon";
 import type { ExplorerTargetKind } from "$/lib/api/types/explorer";
 import { For, Show } from "solid-js";
 import { Motion } from "solid-motionone";
+import type { Crumb } from "./explorer-state";
 
-type BreadcrumbItem = { label: string; level: ExplorerTargetKind; active: boolean };
-
-type ExplorerBreadcrumbProps = { items: BreadcrumbItem[]; onNavigate: (level: ExplorerTargetKind) => void };
+type ExplorerBreadcrumbProps = { items: Crumb[]; onNavigate: (level: ExplorerTargetKind) => void };
 
 export function ExplorerBreadcrumb(props: ExplorerBreadcrumbProps) {
   return (
diff --git a/src/components/explorer/ExplorerPanel.tsx b/src/components/explorer/ExplorerPanel.tsx
index c42a580..ba0a7fa 100644
--- a/src/components/explorer/ExplorerPanel.tsx
+++ b/src/components/explorer/ExplorerPanel.tsx
@@ -642,7 +642,7 @@ function EmptyPanel() {
 
 function ExplorerSkeleton() {
   return (
-    <div class="grid gap-4" aria-hidden="true">
+    <div class="grid gap-4" aria-hidden>
       <div class="skeleton-block h-8 w-1/3 rounded-lg" />
       <div class="skeleton-block h-4 w-1/4 rounded" />
       <div class="grid gap-2 mt-4">
diff --git a/src/components/explorer/explorer-state.ts b/src/components/explorer/explorer-state.ts
index 6dd6c8f..95cef52 100644
--- a/src/components/explorer/explorer-state.ts
+++ b/src/components/explorer/explorer-state.ts
@@ -1,6 +1,8 @@
 import type { ExplorerState, ExplorerTargetKind, ExplorerViewState } from "$/lib/api/types/explorer";
 import { createStore, produce } from "solid-js/store";
 
+export type Crumb = { label: string; level: ExplorerTargetKind; active: boolean };
+
 export function createExplorerState() {
   const [state, setState] = createStore<ExplorerState>({
     inputValue: "",
@@ -76,12 +78,12 @@ export function createExplorerState() {
     setState("lexiconIcons", {});
   }
 
-  function getBreadcrumb(): Array<{ label: string; level: ExplorerTargetKind; active: boolean }> {
+  function getBreadcrumb(): Crumb[] {
     const current = state.current;
     if (!current || !current.resolved) return [];
 
     const resolved = current.resolved;
-    const crumbs: Array<{ label: string; level: ExplorerTargetKind; active: boolean }> = [];
+    const crumbs: Crumb[] = [];
 
     if (resolved.pdsUrl) {
       crumbs.push({ label: "PDS", level: "pds", active: resolved.targetKind === "pds" });
diff --git a/src/components/feeds/DraftsList.tsx b/src/components/feeds/DraftsList.tsx
index c6d1d40..d4dfee5 100644
--- a/src/components/feeds/DraftsList.tsx
+++ b/src/components/feeds/DraftsList.tsx
@@ -155,7 +155,7 @@ function DraftsListHeader(props: { count: number; onClose: () => void }) {
         class="inline-flex h-10 w-10 items-center justify-center rounded-xl border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-white/5 hover:text-on-surface"
         type="button"
         onClick={() => props.onClose()}>
-        <Icon aria-hidden="true" iconClass="i-ri-close-line" />
+        <Icon kind="close" aria-hidden />
       </button>
     </header>
   );
@@ -224,7 +224,7 @@ function LoadConfirmBanner(props: { draft: Draft; onConfirm: () => void; onCance
 function DraftsLoading() {
   return (
     <div class="flex items-center justify-center px-6 py-12">
-      <Icon aria-hidden="true" kind="loader" class="text-on-surface-variant" />
+      <Icon aria-hidden kind="loader" class="text-on-surface-variant" />
     </div>
   );
 }
@@ -232,7 +232,7 @@ function DraftsLoading() {
 function DraftsError(props: { message: string }) {
   return (
     <div class="flex flex-col items-center gap-2 px-6 py-12 text-center">
-      <Icon aria-hidden="true" kind="danger" class="text-error" />
+      <Icon aria-hidden kind="danger" class="text-error" />
       <p class="m-0 text-sm text-on-surface-variant">{props.message}</p>
     </div>
   );
@@ -318,7 +318,7 @@ function DraftContextBadges(props: { draft: Draft }) {
 function DraftContextBadge(props: { icon: string; label: string }) {
   return (
     <span class="inline-flex items-center gap-1 rounded-full bg-white/8 px-2 py-0.5 text-[0.7rem] text-on-surface-variant">
-      <Icon aria-hidden="true" iconClass={props.icon} />
+      <Icon aria-hidden iconClass={props.icon} />
       <span>{props.label}</span>
     </span>
   );
@@ -331,7 +331,7 @@ function DraftDeleteButton(props: { onDelete: () => void }) {
       type="button"
       title="Delete draft"
       onClick={() => props.onDelete()}>
-      <Icon aria-hidden="true" iconClass="i-ri-delete-bin-line" />
+      <Icon aria-hidden iconClass="i-ri-delete-bin-line" />
     </button>
   );
 }
diff --git a/src/components/feeds/FeedChipAvatar.tsx b/src/components/feeds/FeedChipAvatar.tsx
index 3d7ffbb..e42a4a6 100644
--- a/src/components/feeds/FeedChipAvatar.tsx
+++ b/src/components/feeds/FeedChipAvatar.tsx
@@ -22,7 +22,7 @@ export function FeedChipAvatar(props: { feed: SavedFeedItem; generator?: FeedGen
       when={props.generator?.avatar}
       fallback={
         <div class="flex h-8 w-8 items-center justify-center rounded-full bg-white/6 text-primary">
-          <Icon aria-hidden="true" iconClass={icon()} />
+          <Icon aria-hidden iconClass={icon()} />
         </div>
       }>
       {(avatar) => <img class="h-8 w-8 rounded-full object-cover" src={avatar()} alt="" />}
diff --git a/src/components/feeds/FeedComposer.tsx b/src/components/feeds/FeedComposer.tsx
index c9e218f..c1c3155 100644
--- a/src/components/feeds/FeedComposer.tsx
+++ b/src/components/feeds/FeedComposer.tsx
@@ -43,9 +43,9 @@ export function ComposerLauncher(props: { activeAvatar?: string | null; activeHa
         <p class="m-0 wrap-break-word text-[0.9rem] text-on-surface-variant">What's happening?</p>
       </div>
       <div class="flex items-center gap-1 text-on-surface-variant max-[520px]:hidden">
-        <Icon aria-hidden="true" kind="at" />
-        <Icon aria-hidden="true" kind="hashtag" />
-        <Icon aria-hidden="true" kind="quote" />
+        <Icon aria-hidden kind="at" />
+        <Icon aria-hidden kind="hashtag" />
+        <Icon aria-hidden kind="quote" />
       </div>
     </button>
   );
@@ -175,7 +175,7 @@ function ComposerHeader(
           class="inline-flex h-10 w-10 items-center justify-center rounded-xl border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-white/5 hover:text-on-surface"
           type="button"
           onClick={() => props.onClose()}>
-          <Icon aria-hidden="true" iconClass="i-ri-close-line" />
+          <Icon kind="close" aria-hidden />
         </button>
         <ComposerTitle activeHandle={props.activeHandle} />
       </div>
@@ -199,7 +199,7 @@ function ComposerSaveDraftButton(props: { onSaveDraft?: () => void }) {
         type="button"
         title="Save as draft (Ctrl+S)"
         onClick={() => props.onSaveDraft?.()}>
-        <Icon aria-hidden="true" iconClass="i-ri-save-line" />
+        <Icon aria-hidden iconClass="i-ri-save-line" />
         <span class="max-[520px]:hidden">Save</span>
       </button>
     </Show>
@@ -214,7 +214,7 @@ function ComposerDraftsButton(props: { draftCount?: number; onOpenDrafts?: () =>
         type="button"
         title="Drafts (Ctrl+D)"
         onClick={() => props.onOpenDrafts?.()}>
-        <Icon aria-hidden="true" iconClass="i-ri-draft-line" />
+        <Icon aria-hidden iconClass="i-ri-draft-line" />
         <Show when={(props.draftCount ?? 0) > 0}>
           <span class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.6rem] font-semibold leading-none text-on-primary-fixed">
             {props.draftCount}
@@ -243,7 +243,7 @@ function ComposerSubmitButton(props: { disabled: boolean; pending: boolean; onSu
       type="button"
       disabled={props.disabled}
       onClick={() => props.onSubmit()}>
-      <Icon aria-hidden="true" iconClass={props.pending ? "i-ri-loader-4-line" : "i-ri-send-plane-2-line"} />
+      <Icon aria-hidden iconClass={props.pending ? "i-ri-loader-4-line" : "i-ri-send-plane-2-line"} />
       <span>{props.pending ? "Posting..." : "Post"}</span>
     </button>
   );
@@ -390,7 +390,7 @@ function SuggestionChip(props: { suggestion: ComposerSuggestion; onApplySuggesti
       class="inline-flex w-full items-center gap-2 rounded-2xl border-0 bg-white/6 px-3 py-2 text-left text-[0.8rem] text-on-surface transition duration-150 ease-out hover:-translate-y-px hover:bg-white/10"
       type="button"
       onClick={() => props.onApplySuggestion(props.suggestion.label)}>
-      <Icon aria-hidden="true" kind={iconKind()} />
+      <Icon aria-hidden kind={iconKind()} />
       <span class="min-w-0 break-all">{props.suggestion.label}</span>
     </button>
   );
@@ -455,13 +455,13 @@ function ComposerCounter(props: { count: number; progress: number }) {
 function ContextChip(props: { icon: string; label: string; onClear: () => void }) {
   return (
     <div class="mb-3 inline-flex max-w-full items-center gap-2 rounded-full bg-white/6 px-3 py-2 text-[0.8rem] text-on-surface">
-      <Icon aria-hidden="true" iconClass={props.icon} />
+      <Icon aria-hidden iconClass={props.icon} />
       <span class="truncate">{props.label}</span>
       <button
         class="inline-flex h-7 w-7 items-center justify-center rounded-full border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-white/6 hover:text-on-surface"
         type="button"
         onClick={() => props.onClear()}>
-        <Icon aria-hidden="true" kind="close" />
+        <Icon aria-hidden kind="close" />
       </button>
     </div>
   );
@@ -473,7 +473,7 @@ function ToolbarButton(props: { icon: string; label: string }) {
       class="inline-flex h-11 w-11 items-center justify-center rounded-xl border-0 bg-transparent transition duration-150 ease-out hover:bg-white/5 hover:text-primary"
       type="button"
       title={props.label}>
-      <Icon aria-hidden="true" iconClass={props.icon} />
+      <Icon aria-hidden iconClass={props.icon} />
     </button>
   );
 }
diff --git a/src/components/feeds/FeedDrawer.tsx b/src/components/feeds/FeedDrawer.tsx
index 4931325..fdb732e 100644
--- a/src/components/feeds/FeedDrawer.tsx
+++ b/src/components/feeds/FeedDrawer.tsx
@@ -130,7 +130,7 @@ function DrawerHeader(props: { onClose: () => void }) {
         class="inline-flex h-10 w-10 items-center justify-center rounded-xl border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-white/5 hover:text-on-surface"
         type="button"
         onClick={() => props.onClose()}>
-        <Icon aria-hidden="true" iconClass="i-ri-close-line" />
+        <Icon kind="close" aria-hidden />
       </button>
     </div>
   );
@@ -166,7 +166,7 @@ function DrawerPinnedFeedRow(
           disabled={props.isFirst}
           title="Move up"
           onClick={() => props.onMoveUp()}>
-          <ArrowIcon direction="up" aria-hidden="true" />
+          <ArrowIcon direction="up" aria-hidden />
         </button>
         <button
           class="inline-flex h-8 w-8 items-center justify-center rounded-lg border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-white/5 hover:text-on-surface disabled:opacity-30"
@@ -174,14 +174,14 @@ function DrawerPinnedFeedRow(
           disabled={props.isLast}
           title="Move down"
           onClick={() => props.onMoveDown()}>
-          <ArrowIcon direction="down" aria-hidden="true" />
+          <ArrowIcon direction="down" aria-hidden />
         </button>
         <button
           class="inline-flex h-8 w-8 items-center justify-center rounded-lg border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-white/5 hover:text-primary"
           type="button"
           title="Unpin from tabs"
           onClick={() => props.onUnpin()}>
-          <Icon aria-hidden="true" kind="unpin" />
+          <Icon aria-hidden kind="unpin" />
         </button>
       </div>
     </div>
@@ -206,7 +206,7 @@ function DrawerUnpinnedFeedRow(
         type="button"
         title="Pin to tabs"
         onClick={() => props.onPin()}>
-        <Icon aria-hidden="true" iconClass="i-ri-pushpin-line" />
+        <Icon aria-hidden iconClass="i-ri-pushpin-line" />
       </button>
     </div>
   );
diff --git a/src/components/feeds/FeedEmpty.tsx b/src/components/feeds/FeedEmpty.tsx
index 53adb81..dc3b896 100644
--- a/src/components/feeds/FeedEmpty.tsx
+++ b/src/components/feeds/FeedEmpty.tsx
@@ -1,11 +1,11 @@
-import { Icon } from "$/components/shared/Icon";
+import { LoadingIcon } from "$/components/shared/Icon";
 import { For, Show } from "solid-js";
 
 export function LoadingMoreIndicator(props: { loading: boolean }) {
   return (
     <Show when={props.loading}>
       <div class="flex items-center justify-center py-4 text-sm text-on-surface-variant">
-        <Icon aria-hidden="true" class="animate-spin" iconClass="i-ri-loader-4-line" />
+        <LoadingIcon isLoading aria-hidden />
         <span class="ml-2">Loading more</span>
       </div>
     </Show>
diff --git a/src/components/feeds/FeedPane.tsx b/src/components/feeds/FeedPane.tsx
index 6cf979b..b0fbc4e 100644
--- a/src/components/feeds/FeedPane.tsx
+++ b/src/components/feeds/FeedPane.tsx
@@ -14,7 +14,7 @@ function FeedHeaderActions(props: { onCompose: () => void; onRefresh: () => void
         class="ui-control ui-control-hoverable inline-flex h-11 items-center gap-2 rounded-full px-4 text-sm text-on-surface max-[960px]:flex-1 max-[960px]:justify-center max-[520px]:px-3"
         type="button"
         onClick={() => props.onCompose()}>
-        <Icon aria-hidden="true" kind="quill" />
+        <Icon aria-hidden kind="quill" />
         <span>New post</span>
       </button>
       <button
@@ -23,7 +23,7 @@ function FeedHeaderActions(props: { onCompose: () => void; onRefresh: () => void
         aria-label="Refresh active feed"
         title="Refresh active feed"
         onClick={() => props.onRefresh()}>
-        <Icon aria-hidden="true" kind="refresh" />
+        <Icon aria-hidden kind="refresh" />
       </button>
     </div>
   );
diff --git a/src/components/feeds/FeedTabs.tsx b/src/components/feeds/FeedTabs.tsx
index bd32654..e242777 100644
--- a/src/components/feeds/FeedTabs.tsx
+++ b/src/components/feeds/FeedTabs.tsx
@@ -30,7 +30,7 @@ export function FeedTabBar(
         class="inline-flex h-11 shrink-0 items-center gap-2 rounded-full border-0 bg-white/5 px-4 text-sm text-on-surface transition duration-150 ease-out hover:-translate-y-px hover:bg-white/8 max-[1040px]:px-3 max-[1040px]:text-xs max-md:w-11 max-md:justify-center max-md:px-0"
         type="button"
         onClick={() => props.onToggleDrawer()}>
-        <Icon aria-hidden="true" iconClass="i-ri-stack-line" />
+        <Icon aria-hidden iconClass="i-ri-stack-line" />
         <span class="max-md:hidden">Saved feeds</span>
       </button>
     </div>
diff --git a/src/components/feeds/FeedWorkspace.tsx b/src/components/feeds/FeedWorkspace.tsx
index f718f39..7377e79 100644
--- a/src/components/feeds/FeedWorkspace.tsx
+++ b/src/components/feeds/FeedWorkspace.tsx
@@ -106,7 +106,7 @@ function RestoreDraftToast(props: { onRestore: () => void; onDiscard: () => void
       exit={{ opacity: 0, y: 16, scale: 0.94 }}
       transition={{ duration: 0.2 }}>
       <div class="flex items-center gap-3 px-4 py-3">
-        <Icon aria-hidden="true" iconClass="i-ri-draft-line" class="shrink-0 text-primary" />
+        <Icon aria-hidden iconClass="i-ri-draft-line" class="shrink-0 text-primary" />
         <p class="m-0 min-w-0 text-[0.875rem] text-on-surface">You have an unsaved post. Restore?</p>
         <div class="flex shrink-0 items-center gap-2">
           <button
diff --git a/src/components/feeds/ImageGallery.tsx b/src/components/feeds/ImageGallery.tsx
index cd5b717..41a8919 100644
--- a/src/components/feeds/ImageGallery.tsx
+++ b/src/components/feeds/ImageGallery.tsx
@@ -1,5 +1,5 @@
 import { type MediaNotice, MediaNoticeToast } from "$/components/feeds/MediaNoticeToast";
-import { Icon } from "$/components/shared/Icon";
+import { ArrowIcon, Icon, LoadingIcon } from "$/components/shared/Icon";
 import { MediaController } from "$/lib/api/media";
 import { clamp } from "$/lib/utils/text";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
@@ -31,7 +31,7 @@ function GalleryOverlay(props: GalleryOverlayProps) {
   return (
     <Motion.div
       role="dialog"
-      aria-modal="true"
+      aria-modal
       aria-label="Image gallery"
       class="fixed inset-0 z-60 overflow-hidden bg-surface-container-highest/70 p-4 backdrop-blur-[20px] max-[760px]:p-3"
       initial={{ opacity: 0 }}
@@ -104,9 +104,7 @@ function Toolbar(props: ToolbarProps) {
           class="inline-flex items-center gap-1.5 rounded-full border-0 bg-surface-container-high px-3 py-1.5 text-xs text-on-surface transition duration-150 ease-out hover:bg-surface-bright disabled:cursor-wait disabled:opacity-65"
           aria-label="Download image"
           onClick={() => props.onDownload()}>
-          <Icon
-            aria-hidden="true"
-            iconClass={props.pending ? "i-ri-loader-4-line animate-spin" : "i-ri-download-2-line"} />
+          <LoadingIcon isLoading={props.pending} class="text-base" fallback={<i class="i-ri-download-2-line" />} />
           <span>{props.pending ? "Saving..." : "Download"}</span>
         </button>
         <button
@@ -114,7 +112,7 @@ function Toolbar(props: ToolbarProps) {
           class="inline-flex h-9 w-9 items-center justify-center rounded-full border-0 bg-surface-container-high text-on-surface-variant transition hover:bg-surface-bright hover:text-on-surface"
           aria-label="Close gallery"
           onClick={() => props.onClose()}>
-          <Icon aria-hidden="true" iconClass="i-ri-close-line" />
+          <Icon kind="close" aria-hidden />
         </button>
       </div>
     </div>
@@ -129,9 +127,9 @@ function ArrowButton(props: { direction: "left" | "right"; onClick: () => void }
       classList={{ "left-1": props.direction === "left", "right-1": props.direction === "right" }}
       aria-label={props.direction === "left" ? "Previous image" : "Next image"}
       onClick={() => props.onClick()}>
-      <Icon
-        aria-hidden="true"
-        iconClass={props.direction === "left" ? "i-ri-arrow-left-s-line" : "i-ri-arrow-right-s-line"} />
+      <Show when={props.direction === "left"} fallback={<ArrowIcon aria-hidden direction="right" />}>
+        <ArrowIcon direction="left" aria-hidden />
+      </Show>
     </button>
   );
 }
diff --git a/src/components/feeds/MediaNoticeToast.tsx b/src/components/feeds/MediaNoticeToast.tsx
index 80fe4cb..5d4d868 100644
--- a/src/components/feeds/MediaNoticeToast.tsx
+++ b/src/components/feeds/MediaNoticeToast.tsx
@@ -25,7 +25,7 @@ export function MediaNoticeToast(props: MediaNoticeToastProps) {
             transition={{ duration: 0.2 }}>
             <Icon
               kind={current().kind === "error" ? "danger" : "complete"}
-              aria-hidden="true"
+              aria-hidden
               classList={{
                 "text-emerald-300": current().kind === "success",
                 "text-error": current().kind === "error",
@@ -48,7 +48,7 @@ export function MediaNoticeToast(props: MediaNoticeToastProps) {
               type="button"
               class="cursor-pointer rounded-full border-0 bg-transparent p-[0.35rem] text-inherit hover:bg-surface-bright"
               onClick={() => props.onDismiss()}>
-              <Icon kind="close" aria-hidden="true" />
+              <Icon kind="close" aria-hidden />
               <span class="sr-only">Dismiss message</span>
             </button>
           </Motion.div>
diff --git a/src/components/feeds/PostCard.tsx b/src/components/feeds/PostCard.tsx
index 96b46a0..af8f51e 100644
--- a/src/components/feeds/PostCard.tsx
+++ b/src/components/feeds/PostCard.tsx
@@ -136,7 +136,7 @@ function PostActionButton(props: PostActionButtonProps) {
         class="flex items-center"
         animate={{ scale: props.pulse ? [1, 1.3, 1] : 1 }}
         transition={{ duration: 0.28 }}>
-        <Icon aria-hidden="true" iconClass={props.active ? props.iconActive ?? props.icon : props.icon} />
+        <Icon aria-hidden iconClass={props.active ? props.iconActive ?? props.icon : props.icon} />
       </Motion.span>
       <span class="max-w-24 truncate">{props.busy ? "..." : props.label}</span>
     </button>
@@ -240,7 +240,7 @@ function PostActions(props: PostActionsProps) {
           event.stopPropagation();
           menu.menu.onOpen(event.currentTarget);
         }}>
-        <Icon aria-hidden="true" iconClass="i-ri-more-fill" />
+        <Icon aria-hidden iconClass="i-ri-more-fill" />
       </button>
     </footer>
   );
@@ -600,13 +600,13 @@ export function PostCard(props: PostCardProps) {
       }}>
       <Show when={reasonLabel()}>
         <div class="mb-3 flex items-center gap-2 text-xs font-medium tracking-[0.04em] text-primary">
-          <Icon aria-hidden="true" iconClass="i-ri-repeat-2-line" />
+          <Icon aria-hidden iconClass="i-ri-repeat-2-line" />
           <span>{reasonLabel()}</span>
         </div>
       </Show>
       <Show when={replyLabel()}>
         <div class="mb-3 flex items-center gap-2 text-xs font-medium tracking-[0.04em] text-on-surface-variant">
-          <Icon aria-hidden="true" iconClass="i-ri-corner-down-right-line" />
+          <Icon aria-hidden iconClass="i-ri-corner-down-right-line" />
           <span>{replyLabel()}</span>
         </div>
       </Show>
diff --git a/src/components/feeds/embeds/VideoEmbed.tsx b/src/components/feeds/embeds/VideoEmbed.tsx
index 7ef08fe..382ce48 100644
--- a/src/components/feeds/embeds/VideoEmbed.tsx
+++ b/src/components/feeds/embeds/VideoEmbed.tsx
@@ -1,5 +1,5 @@
 import { type MediaNotice, MediaNoticeToast } from "$/components/feeds/MediaNoticeToast";
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { MediaController } from "$/lib/api/media";
 import type { DownloadProgress } from "$/lib/api/types/media";
 import { normalizeError } from "$/lib/utils/text";
@@ -188,9 +188,10 @@ export function VideoEmbed(props: VideoEmbedProps) {
             class="inline-flex items-center gap-1.5 rounded-full border-0 bg-surface-container-high px-3 py-1.5 text-xs text-on-surface transition duration-150 ease-out hover:bg-surface-bright disabled:cursor-wait disabled:opacity-65"
             aria-label="Download video"
             onClick={(event) => void handleDownload(event)}>
-            <Icon
-              aria-hidden="true"
-              iconClass={downloadPending() ? "i-ri-loader-4-line animate-spin" : "i-ri-download-2-line"} />
+            <LoadingIcon
+              isLoading={downloadPending()}
+              class="text-base"
+              fallback={<Icon iconClass="i-ri-download-2-line" class="text-base" />} />
             <span>
               {downloadPending() ? (progressLabel() ? `Saving ${progressLabel()}` : "Saving...") : "Download"}
             </span>
@@ -259,7 +260,7 @@ function PlayOverlay(props: { onPlay: () => void }) {
       class="absolute inset-0 grid place-items-center border-0 bg-surface-container-highest/70 backdrop-blur-[2px] transition hover:bg-surface-container-highest/85"
       onClick={() => props.onPlay()}>
       <span class="grid h-16 w-16 place-items-center rounded-full bg-primary/88 text-on-primary-fixed shadow-[0_16px_30px_rgba(0,0,0,0.32)]">
-        <Icon aria-hidden="true" iconClass="i-ri-play-fill text-3xl" />
+        <Icon aria-hidden iconClass="i-ri-play-fill text-3xl" />
       </span>
     </button>
   );
@@ -268,7 +269,7 @@ function PlayOverlay(props: { onPlay: () => void }) {
 function LoadingBadge() {
   return (
     <div class="absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full bg-surface-container-high/90 px-3 py-1.5 text-xs text-on-surface">
-      <Icon aria-hidden="true" iconClass="i-ri-loader-4-line animate-spin" />
+      <LoadingIcon isLoading />
       <span>Loading stream</span>
     </div>
   );
diff --git a/src/components/moderation/ModeratedAvatar.tsx b/src/components/moderation/ModeratedAvatar.tsx
index 8004720..e8ce327 100644
--- a/src/components/moderation/ModeratedAvatar.tsx
+++ b/src/components/moderation/ModeratedAvatar.tsx
@@ -21,7 +21,7 @@ export function ModeratedAvatar(props: ModeratedAvatarProps) {
             classList={{ [props.fallbackClass ?? "text-sm font-semibold text-on-surface"]: true }}>
             <Show
               when={!props.hidden}
-              fallback={<Icon aria-hidden="true" iconClass="i-ri-shield-line" class="text-lg text-on-surface" />}>
+              fallback={<Icon aria-hidden iconClass="i-ri-shield-line" class="text-lg text-on-surface" />}>
               {props.label}
             </Show>
           </span>
diff --git a/src/components/moderation/ModeratedBlurOverlay.tsx b/src/components/moderation/ModeratedBlurOverlay.tsx
index 6d1d3fb..9f4a415 100644
--- a/src/components/moderation/ModeratedBlurOverlay.tsx
+++ b/src/components/moderation/ModeratedBlurOverlay.tsx
@@ -59,7 +59,7 @@ function OverlayCard(props: { revealLabel: string; revealable: boolean; summaryT
 function OverlayIcon() {
   return (
     <div class="mx-auto flex h-9 w-9 items-center justify-center rounded-full bg-white/8 text-on-surface">
-      <Icon aria-hidden="true" class="text-lg" iconClass="i-ri-eye-off-line" />
+      <Icon aria-hidden class="text-lg" iconClass="i-ri-eye-off-line" />
     </div>
   );
 }
diff --git a/src/components/moderation/ModerationBadgeRow.tsx b/src/components/moderation/ModerationBadgeRow.tsx
index 5c82b7b..4bef900 100644
--- a/src/components/moderation/ModerationBadgeRow.tsx
+++ b/src/components/moderation/ModerationBadgeRow.tsx
@@ -68,13 +68,13 @@ export function ModerationBadgeRow(props: ModerationBadgeRowProps) {
       <div class="mt-2 flex flex-wrap items-center gap-2" classList={{ [props.class ?? ""]: !!props.class }}>
         <Show when={showGenericStatusPill() && props.decision.alert}>
           <span class="inline-flex items-center gap-1 rounded-full bg-red-500/18 px-2.5 py-1 text-[0.68rem] font-medium uppercase tracking-[0.08em] text-red-200">
-            <Icon aria-hidden="true" class="text-xs" iconClass="i-ri-alarm-warning-line" />
+            <Icon aria-hidden class="text-xs" iconClass="i-ri-alarm-warning-line" />
             Alert
           </span>
         </Show>
         <Show when={showGenericStatusPill() && !props.decision.alert && props.decision.inform}>
           <span class="inline-flex items-center gap-1 rounded-full bg-primary/18 px-2.5 py-1 text-[0.68rem] font-medium uppercase tracking-[0.08em] text-primary">
-            <Icon aria-hidden="true" class="text-xs" iconClass="i-ri-information-line" />
+            <Icon aria-hidden class="text-xs" iconClass="i-ri-information-line" />
             Advisory
           </span>
         </Show>
@@ -88,7 +88,7 @@ export function ModerationBadgeRow(props: ModerationBadgeRowProps) {
                 "bg-surface-bright text-on-surface-variant": badge.tone === "label",
               }}
               title={badge.description ? `${badge.description} — ${badge.source}` : badge.source}>
-              <Icon aria-hidden="true" class="text-xs" iconClass={badgeIcon(badge.tone)} />
+              <Icon aria-hidden class="text-xs" iconClass={badgeIcon(badge.tone)} />
               {badge.label}
             </span>
           )}
diff --git a/src/components/notifications/NotificationItem.tsx b/src/components/notifications/NotificationItem.tsx
index c7c07cd..3b3b2b4 100644
--- a/src/components/notifications/NotificationItem.tsx
+++ b/src/components/notifications/NotificationItem.tsx
@@ -21,7 +21,7 @@ function ReasonIcon(props: { reason: NotificationReason }) {
 
   return (
     <div class="flex w-8 shrink-0 justify-center pt-0.5">
-      <Icon kind={icon().kind} class={icon().className} aria-hidden="true" />
+      <Icon kind={icon().kind} class={icon().className} aria-hidden />
     </div>
   );
 }
diff --git a/src/components/notifications/NotificationsPanel.tsx b/src/components/notifications/NotificationsPanel.tsx
index cd0f6f6..83e4f5a 100644
--- a/src/components/notifications/NotificationsPanel.tsx
+++ b/src/components/notifications/NotificationsPanel.tsx
@@ -234,7 +234,7 @@ function NotificationsHeader(
           class="inline-flex h-10 items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 text-sm font-medium text-on-surface-variant transition duration-150 hover:-translate-y-px hover:text-on-surface"
           onClick={() => props.onMarkSeen()}
           title="Mark all as read">
-          <Icon kind="complete" aria-hidden="true" />
+          <Icon kind="complete" aria-hidden />
           Mark all read
         </button>
       </div>
@@ -435,7 +435,7 @@ function GroupedReasonIcon(props: { reason: NotificationReason }) {
 
   return (
     <div class="flex w-8 shrink-0 justify-center pt-0.5">
-      <Icon kind={icon().kind} class={icon().className} aria-hidden="true" />
+      <Icon kind={icon().kind} class={icon().className} aria-hidden />
     </div>
   );
 }
@@ -577,7 +577,7 @@ function EmptyState(props: { label: string }) {
 
 function NotificationSkeleton() {
   return (
-    <div class="flex animate-pulse items-start gap-4 rounded-2xl bg-surface px-4 py-4" aria-hidden="true">
+    <div class="flex animate-pulse items-start gap-4 rounded-2xl bg-surface px-4 py-4" aria-hidden>
       <div class="mt-1 h-5 w-5 shrink-0 rounded-full bg-white/5" />
       <div class="h-8 w-8 shrink-0 rounded-full bg-white/5" />
       <div class="min-w-0 flex-1 space-y-2">
diff --git a/src/components/posts/PostEngagementPanel.tsx b/src/components/posts/PostEngagementPanel.tsx
index 6f6a7a3..b68d62c 100644
--- a/src/components/posts/PostEngagementPanel.tsx
+++ b/src/components/posts/PostEngagementPanel.tsx
@@ -136,7 +136,7 @@ export function PostEngagementPanel(props: { uri: string | null }) {
           type="button"
           class="ui-control ui-control-hoverable inline-flex h-10 items-center gap-2 rounded-full px-4 text-sm text-on-surface"
           onClick={() => void postNavigation.backFromPost()}>
-          <Icon aria-hidden="true" iconClass="i-ri-arrow-left-line" />
+          <Icon aria-hidden iconClass="i-ri-arrow-left-line" />
           Back
         </button>
       </header>
diff --git a/src/components/posts/PostPanel.tsx b/src/components/posts/PostPanel.tsx
index 1c43a68..fa5af3f 100644
--- a/src/components/posts/PostPanel.tsx
+++ b/src/components/posts/PostPanel.tsx
@@ -145,7 +145,7 @@ export function PostPanel(props: { uri: string | null }) {
           type="button"
           class="ui-control ui-control-hoverable inline-flex h-10 items-center gap-2 rounded-full px-4 text-sm text-on-surface"
           onClick={() => void postNavigation.backFromPost()}>
-          <Icon aria-hidden="true" iconClass="i-ri-arrow-left-line" />
+          <Icon aria-hidden iconClass="i-ri-arrow-left-line" />
           Back
         </button>
       </header>
diff --git a/src/components/posts/ThreadDrawer.tsx b/src/components/posts/ThreadDrawer.tsx
index fd7a9c0..dbda3e1 100644
--- a/src/components/posts/ThreadDrawer.tsx
+++ b/src/components/posts/ThreadDrawer.tsx
@@ -158,7 +158,7 @@ function ThreadDrawerHeader(props: ThreadDrawerHeaderProps) {
               class="inline-flex h-10 w-10 items-center justify-center rounded-xl border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-surface-bright hover:text-on-surface"
               type="button"
               onClick={() => local.onMaximize(uri())}>
-              <Icon aria-hidden="true" iconClass="i-ri-external-link-line" />
+              <Icon aria-hidden kind="ext-link" />
             </button>
           )}
         </Show>
@@ -166,7 +166,7 @@ function ThreadDrawerHeader(props: ThreadDrawerHeaderProps) {
           class="inline-flex h-10 w-10 items-center justify-center rounded-xl border-0 bg-transparent text-on-surface-variant transition duration-150 ease-out hover:bg-surface-bright hover:text-on-surface"
           type="button"
           onClick={() => local.onClose()}>
-          <Icon aria-hidden="true" iconClass="i-ri-close-line" />
+          <Icon kind="close" aria-hidden />
         </button>
       </div>
     </header>
diff --git a/src/components/profile/FollowHygeineConfirmationDialog.tsx b/src/components/profile/FollowHygeineConfirmationDialog.tsx
index 60ebd5d..ed2ded9 100644
--- a/src/components/profile/FollowHygeineConfirmationDialog.tsx
+++ b/src/components/profile/FollowHygeineConfirmationDialog.tsx
@@ -1,6 +1,6 @@
 import { Show } from "solid-js";
 import { Motion, Presence } from "solid-motionone";
-import { Icon } from "../shared/Icon";
+import { LoadingIcon } from "../shared/Icon";
 
 function ConfirmationDialogBody(props: { selectedCount: number }) {
   return (
@@ -22,9 +22,7 @@ function ConfirmationDialogActions(props: { pending: boolean; onCancel: () => vo
         disabled={props.pending}
         type="button"
         onClick={() => props.onConfirm()}>
-        <Show when={props.pending}>
-          <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-        </Show>
+        <LoadingIcon isLoading={props.pending} class="text-base" />
         Confirm unfollow
       </button>
     </div>
diff --git a/src/components/profile/FollowHygienePanel.tsx b/src/components/profile/FollowHygienePanel.tsx
index f7fed24..0804fe9 100644
--- a/src/components/profile/FollowHygienePanel.tsx
+++ b/src/components/profile/FollowHygienePanel.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { useAppSession } from "$/contexts/app-session";
 import { ProfileController } from "$/lib/api/profile";
 import { FOLLOW_HYGIENE_PROGRESS_EVENT } from "$/lib/constants/events";
@@ -121,7 +121,7 @@ function FollowHygieneHeader(props: { onClose: () => void }) {
           class="ui-control ui-control-hoverable flex h-9 w-9 items-center justify-center rounded-full"
           type="button"
           onClick={() => props.onClose()}>
-          <Icon iconClass="i-ri-close-line" class="text-base" />
+          <Icon kind="close" class="text-base" />
         </button>
       </div>
     </header>
@@ -176,9 +176,7 @@ function FooterActions(props: FooterActionsProps) {
           disabled={!props.canUnfollow || pending()}
           type="button"
           onClick={() => props.onUnfollow()}>
-          <Show when={pending()} fallback={<Icon iconClass="i-ri-user-unfollow-line" class="text-base" />}>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-          </Show>
+          <LoadingIcon isLoading={pending()} class="text-base" fallback={<Icon kind="unfollow" class="text-base" />} />
           <span>Unfollow selected</span>
         </button>
       </div>
@@ -550,7 +548,7 @@ export function FollowHygienePanel(props: { onClose: () => void }) {
         ref={(element) => {
           panelRef = element;
         }}
-        aria-modal="true"
+        aria-modal
         class="ui-scrim fixed inset-0 z-50 flex items-stretch justify-end p-3 backdrop-blur-xl max-sm:p-0"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
diff --git a/src/components/profile/FollowHygieneToolbar.tsx b/src/components/profile/FollowHygieneToolbar.tsx
index 7fc7708..d91a5ce 100644
--- a/src/components/profile/FollowHygieneToolbar.tsx
+++ b/src/components/profile/FollowHygieneToolbar.tsx
@@ -1,7 +1,7 @@
 import type { FollowHygieneProgress } from "$/lib/types";
 import { Show } from "solid-js";
 import { Motion } from "solid-motionone";
-import { Icon } from "../shared/Icon";
+import { Icon, LoadingIcon } from "../shared/Icon";
 import type { FollowHygienePhase } from "./types";
 
 export type ScanToolbarProps = {
@@ -49,9 +49,7 @@ export function ScanToolbar(props: ScanToolbarProps) {
           disabled={scanning()}
           type="button"
           onClick={() => props.onScan()}>
-          <Show when={scanning()} fallback={<Icon iconClass="i-ri-radar-line" class="text-base" />}>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-          </Show>
+          <LoadingIcon isLoading={scanning()} class="text-base" fallback={<Icon kind="radar" class="text-base" />} />
           <span>{scanning() ? "Scanning follows..." : "Scan follows"}</span>
         </button>
       </div>
diff --git a/src/components/profile/ProfileActorList.tsx b/src/components/profile/ProfileActorList.tsx
index a0e8ab6..e4be932 100644
--- a/src/components/profile/ProfileActorList.tsx
+++ b/src/components/profile/ProfileActorList.tsx
@@ -1,7 +1,7 @@
 import { useModerationDecision } from "$/components/moderation/hooks/useModerationDecision";
 import { ModeratedAvatar } from "$/components/moderation/ModeratedAvatar";
 import { ModerationBadgeRow } from "$/components/moderation/ModerationBadgeRow";
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { getAvatarLabel, getDisplayName } from "$/lib/feeds";
 import { collectModerationLabels } from "$/lib/moderation";
 import type { ModerationLabel, ModerationUiDecision, ProfileViewBasic } from "$/lib/types";
@@ -20,7 +20,7 @@ function ActorListHeader(props: { onClose: () => void; title: string }) {
         class="ui-control ui-control-hoverable flex h-8 w-8 items-center justify-center rounded-full"
         type="button"
         onClick={() => props.onClose()}>
-        <Icon iconClass="i-ri-close-line" class="text-base" />
+        <Icon kind="close" aria-hidden class="text-base" />
       </button>
     </div>
   );
@@ -34,11 +34,9 @@ function ActorListLoadMoreButton(props: { loadingMore: boolean; onLoadMore: () =
         disabled={props.loadingMore}
         type="button"
         onClick={() => props.onLoadMore()}>
+        <LoadingIcon isLoading={props.loadingMore} class="text-base" />
         <Show when={props.loadingMore} fallback={<span>Load more</span>}>
-          <>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-            <span>Loading...</span>
-          </>
+          <span>Loading...</span>
         </Show>
       </button>
     </div>
@@ -168,9 +166,7 @@ function ActorCardFollowButton(
           disabled={props.loading}
           type="button"
           onClick={() => props.onFollow()}>
-          <Show when={props.loading} fallback={<Icon kind="follow" class="text-sm" />}>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-sm" />
-          </Show>
+          <LoadingIcon isLoading={props.loading} class="text-sm" fallback={<Icon kind="follow" class="text-sm" />} />
           Follow
         </button>
       }>
@@ -179,9 +175,7 @@ function ActorCardFollowButton(
         disabled={props.loading}
         type="button"
         onClick={() => props.onUnfollow()}>
-        <Show when={props.loading} fallback={<Icon iconClass="i-ri-check-line" class="text-sm" />}>
-          <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-sm" />
-        </Show>
+        <LoadingIcon isLoading={props.loading} class="text-sm" fallback={<Icon kind="check" class="text-sm" />} />
         <span class="group-hover:hidden">Following</span>
         <span class="hidden group-hover:inline">Unfollow</span>
       </button>
@@ -233,7 +227,7 @@ export function ActorListOverlay(props: ActorListOverlayProps) {
       ref={(element) => {
         overlayRef = element;
       }}
-      aria-modal="true"
+      aria-modal
       class="ui-scrim absolute inset-0 z-50 flex items-end p-3 backdrop-blur-xl"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
diff --git a/src/components/profile/ProfileFeed.tsx b/src/components/profile/ProfileFeed.tsx
index 9eea807..a066fad 100644
--- a/src/components/profile/ProfileFeed.tsx
+++ b/src/components/profile/ProfileFeed.tsx
@@ -3,7 +3,7 @@ import type { ProfileTab } from "$/lib/profile";
 import type { FeedViewPost, PostView } from "$/lib/types";
 import { For, Match, Show, Switch } from "solid-js";
 import { PostCard } from "../feeds/PostCard";
-import { Icon } from "../shared/Icon";
+import { Icon, LoadingIcon } from "../shared/Icon";
 import { tabLabel } from "./profile-state";
 
 function ProfilePostList(
@@ -48,9 +48,10 @@ function ProfileLoadMoreButton(props: { activeTab: ProfileTab; loadingMore: bool
         type="button"
         disabled={props.loadingMore}
         onClick={() => props.onLoadMore()}>
-        <Show when={props.loadingMore} fallback={<Icon iconClass="i-ri-arrow-down-circle-line" class="text-base" />}>
-          <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-        </Show>
+        <LoadingIcon
+          isLoading={props.loadingMore}
+          class="text-base"
+          fallback={<Icon iconClass="i-ri-arrow-down-circle-line" class="text-base" />} />
         <span>{props.loadingMore ? "Loading more..." : `Load more ${tabLabel(props.activeTab).toLowerCase()}`}</span>
       </button>
     </div>
diff --git a/src/components/profile/ProfileHero.tsx b/src/components/profile/ProfileHero.tsx
index 8519d81..573b791 100644
--- a/src/components/profile/ProfileHero.tsx
+++ b/src/components/profile/ProfileHero.tsx
@@ -1,7 +1,7 @@
 import { useModerationDecision } from "$/components/moderation/hooks/useModerationDecision";
 import { ModeratedAvatar } from "$/components/moderation/ModeratedAvatar";
 import { ModerationBadgeRow } from "$/components/moderation/ModerationBadgeRow";
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { PostRichText } from "$/components/shared/PostRichText";
 import { openExternalUrlFromEvent } from "$/lib/external-url";
 import { getAvatarLabel, getDisplayName } from "$/lib/feeds";
@@ -184,9 +184,7 @@ function FollowButton(props: { isFollowing: boolean; loading: boolean; onFollow:
           disabled={props.loading}
           type="button"
           onClick={props.onFollow}>
-          <Show when={props.loading}>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-          </Show>
+          <LoadingIcon isLoading={props.loading} class="text-base" />
           Follow
         </button>
       }>
@@ -195,9 +193,7 @@ function FollowButton(props: { isFollowing: boolean; loading: boolean; onFollow:
         disabled={props.loading}
         type="button"
         onClick={() => props.onUnfollow()}>
-        <Show when={props.loading}>
-          <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base" />
-        </Show>
+        <LoadingIcon isLoading={props.loading} class="text-base" />
         <span class="group-hover:hidden">Following</span>
         <span class="hidden group-hover:inline">Unfollow</span>
       </button>
diff --git a/src/components/profile/ProfilePanel.tsx b/src/components/profile/ProfilePanel.tsx
index 828b1b7..95d4afc 100644
--- a/src/components/profile/ProfilePanel.tsx
+++ b/src/components/profile/ProfilePanel.tsx
@@ -557,7 +557,7 @@ function ProfileUnavailableView(props: { unavailable: ProfileLookupUnavailable }
       <div class="tone-muted grid max-w-lg gap-4 rounded-4xl p-6 text-left shadow-(--inset-shadow)">
         <div class="flex items-center gap-3">
           <span class="ui-input-strong flex h-12 w-12 items-center justify-center rounded-full text-on-surface-variant">
-            <Icon kind="danger" aria-hidden="true" />
+            <Icon kind="danger" aria-hidden />
           </span>
           <div class="min-w-0">
             <p class="m-0 text-sm text-on-surface-variant">Profile unavailable</p>
@@ -580,7 +580,7 @@ function ProfileErrorView(props: { error: string | null; onRetry: () => void })
           type="button"
           class="ui-control ui-control-hoverable inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium text-on-surface"
           onClick={() => props.onRetry()}>
-          <Icon kind="refresh" aria-hidden="true" />
+          <Icon kind="refresh" aria-hidden />
           Retry
         </button>
       </div>
diff --git a/src/components/rail/AppRailButton.tsx b/src/components/rail/AppRailButton.tsx
index a09c357..f706d36 100644
--- a/src/components/rail/AppRailButton.tsx
+++ b/src/components/rail/AppRailButton.tsx
@@ -13,7 +13,7 @@ function RailButtonContent(props: RailButtonVisualProps) {
   return (
     <>
       <div class="relative">
-        <Icon kind={props.icon} name={props.label} aria-hidden="true" class="shrink-0 text-[1.25rem]" />
+        <Icon kind={props.icon} name={props.label} aria-hidden class="shrink-0 text-[1.25rem]" />
         <Presence>
           <Show when={(props.badge ?? 0) > 0}>
             <Motion.span
diff --git a/src/components/saved/SavedPostsPanel.tsx b/src/components/saved/SavedPostsPanel.tsx
index ac790ba..e0deb97 100644
--- a/src/components/saved/SavedPostsPanel.tsx
+++ b/src/components/saved/SavedPostsPanel.tsx
@@ -3,7 +3,7 @@ import { usePostNavigation } from "$/components/posts/hooks/usePostNavigation";
 import { LocalPostResultsSkeletons } from "$/components/search/LocalPostResultsList";
 import { SearchEmptyState } from "$/components/search/SearchEmptyState";
 import { SearchQueryInput } from "$/components/search/SearchQueryInput";
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { PostCount } from "$/components/shared/PostCount";
 import { useAppSession } from "$/contexts/app-session";
 import { SearchController } from "$/lib/api/search";
@@ -89,11 +89,11 @@ function LoadMoreButton(props: { next: number | null; onLoadMore: () => void; lo
             when={props.loadingMore}
             fallback={
               <>
-                <Icon kind="bookmark" aria-hidden="true" />
+                <Icon kind="bookmark" aria-hidden />
                 Load More
               </>
             }>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" aria-hidden="true" />
+            <LoadingIcon isLoading aria-hidden />
             Loading more...
           </Show>
         </button>
@@ -467,9 +467,7 @@ function SavedPostsHeader(
           class="inline-flex h-10 items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 text-sm font-medium text-on-surface-variant transition duration-150 hover:-translate-y-px hover:text-on-surface disabled:cursor-not-allowed disabled:opacity-60"
           disabled={props.loading}
           onClick={() => props.onRefresh()}>
-          <Show when={props.loading} fallback={<Icon kind="refresh" aria-hidden="true" />}>
-            <Icon iconClass="i-ri-loader-4-line animate-spin" aria-hidden="true" />
-          </Show>
+          <LoadingIcon isLoading={props.loading} aria-hidden fallback={<Icon kind="refresh" aria-hidden />} />
           <Show when={props.loading} fallback="Refresh">Refreshing...</Show>
         </button>
       </div>
diff --git a/src/components/search/HashtagPanel.tsx b/src/components/search/HashtagPanel.tsx
index 17102b1..6ae976a 100644
--- a/src/components/search/HashtagPanel.tsx
+++ b/src/components/search/HashtagPanel.tsx
@@ -108,7 +108,7 @@ export function HashtagPanel() {
         <Show when={state.loading} fallback={<HashtagState {...state} onOpenThread={postNavigation.openPost} />}>
           <div class="grid gap-2 py-1">
             <For each={Array.from({ length: 5 })}>
-              {() => <div class="h-40 animate-pulse rounded-3xl bg-white/4" aria-hidden="true" />}
+              {() => <div class="h-40 animate-pulse rounded-3xl bg-white/4" aria-hidden />}
             </For>
           </div>
         </Show>
diff --git a/src/components/search/LocalPostResultsList.tsx b/src/components/search/LocalPostResultsList.tsx
index 5a9f903..4102401 100644
--- a/src/components/search/LocalPostResultsList.tsx
+++ b/src/components/search/LocalPostResultsList.tsx
@@ -5,7 +5,7 @@ import { SearchResultCard } from "./SearchResultCard";
 
 function LocalPostResultsSkeleton() {
   return (
-    <div class="flex animate-pulse items-start gap-4 rounded-2xl bg-surface px-4 py-4" aria-hidden="true">
+    <div class="flex animate-pulse items-start gap-4 rounded-2xl bg-surface px-4 py-4" aria-hidden>
       <div class="h-10 w-10 shrink-0 rounded-full bg-white/5" />
       <div class="min-w-0 flex-1 space-y-2">
         <For each={["w-48", "w-full", "w-2/3"]}>
diff --git a/src/components/search/SearchPreflightPanel.tsx b/src/components/search/SearchPreflightPanel.tsx
index c0b430e..adb2180 100644
--- a/src/components/search/SearchPreflightPanel.tsx
+++ b/src/components/search/SearchPreflightPanel.tsx
@@ -1,5 +1,5 @@
 /* eslint react/jsx-max-depth: ["error", { "max": 5 }] */
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { useAppPreferences } from "$/contexts/app-preferences";
 import { normalizeSearchReturnRoute } from "$/lib/search-routes";
 import { formatBytes, formatEtaSeconds, formatProgress } from "$/lib/utils/text";
@@ -207,10 +207,10 @@ function SearchPreflightFooter(props: { handleDismiss: () => void; enable: () =>
           onClick={() => void props.enable()}
           disabled={props.activating}
           class="inline-flex items-center gap-2 rounded-full border-0 bg-primary px-4 py-2 text-sm font-medium text-on-primary-fixed transition hover:bg-primary-dim disabled:cursor-not-allowed disabled:opacity-50">
-          <Icon
-            kind={props.activating ? "loader" : "download"}
-            iconClass={props.activating ? "i-ri-loader-4-line animate-spin" : undefined}
-            class="text-sm" />
+          <LoadingIcon
+            isLoading={props.activating}
+            class="text-sm"
+            fallback={<Icon kind="download" class="text-sm" />} />
           <Show when={props.activating} fallback={<span>Enable semantic search</span>}>
             <span>Downloading model...</span>
           </Show>
diff --git a/src/components/search/SearchQueryInput.tsx b/src/components/search/SearchQueryInput.tsx
index 8c898a3..aafae75 100644
--- a/src/components/search/SearchQueryInput.tsx
+++ b/src/components/search/SearchQueryInput.tsx
@@ -1,6 +1,6 @@
 import type { JSX, ParentProps } from "solid-js";
 import { Show } from "solid-js";
-import { Icon } from "../shared/Icon";
+import { Icon, LoadingIcon } from "../shared/Icon";
 
 type SearchQueryInputA11y = {
   ariaActivedescendant?: string;
@@ -79,7 +79,7 @@ function SearchInputField(
         onKeyDown={(event) => props.actions.onKeyDown?.(event)} />
 
       <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-2">
-        <LoadingIndicator loading={props.state.loading} />
+        <LoadingIcon isLoading={props.state.loading} class="text-base text-on-surface-variant" />;
         <ClearButton query={props.state.query} loading={props.state.loading} onClear={props.actions.onClear} />
       </div>
 
@@ -88,14 +88,6 @@ function SearchInputField(
   );
 }
 
-function LoadingIndicator(props: { loading: boolean }) {
-  return (
-    <Show when={props.loading}>
-      <Icon iconClass="i-ri-loader-4-line animate-spin" class="text-base  text-on-surface-variant" />
-    </Show>
-  );
-}
-
 function ClearButton(props: { query: string; loading: boolean; onClear: () => void }) {
   return (
     <Show when={props.query && !props.loading}>
diff --git a/src/components/search/SyncStatusPanel.tsx b/src/components/search/SyncStatusPanel.tsx
index ab1d374..707e426 100644
--- a/src/components/search/SyncStatusPanel.tsx
+++ b/src/components/search/SyncStatusPanel.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "$/components/shared/Icon";
+import { Icon, LoadingIcon } from "$/components/shared/Icon";
 import { SearchController } from "$/lib/api/search";
 import type { SyncStatus } from "$/lib/api/types/search";
 import { formatRelativeTime } from "$/lib/utils/text";
@@ -40,9 +40,7 @@ function ReindexButton(props: { isSyncing: boolean; isReindexing: boolean; onRei
       onClick={() => void props.onReindex()}
       disabled={props.isSyncing || props.isReindexing}
       class="inline-flex items-center gap-2 rounded-xl border-0 bg-white/6 px-3 py-2 text-xs font-medium text-on-surface-variant transition hover:bg-white/10 hover:text-on-surface disabled:cursor-not-allowed disabled:opacity-50">
-      <Show when={props.isReindexing} fallback={<Icon kind="refresh" />}>
-        <Icon iconClass="i-ri-loader-4-line animate-spin" />
-      </Show>
+      <LoadingIcon isLoading={props.isReindexing} class="text-base" fallback={<Icon kind="refresh" />} />
       <Show when={props.isReindexing} fallback="Reindex">Reindexing...</Show>
     </button>
   );
@@ -55,9 +53,7 @@ function SyncButton(props: { isSyncing: boolean; isReindexing: boolean; onSync:
       onClick={() => void props.onSync()}
       disabled={props.isSyncing || props.isReindexing}
       class="inline-flex items-center gap-2 rounded-xl border-0 bg-white/6 px-3 py-2 text-xs font-medium text-on-surface-variant transition hover:bg-white/10 hover:text-on-surface disabled:cursor-not-allowed disabled:opacity-50">
-      <Show when={props.isSyncing} fallback={<Icon kind="refresh" />}>
-        <Icon iconClass="i-ri-loader-4-line animate-spin" />
-      </Show>
+      <LoadingIcon isLoading={props.isSyncing} class="text-base" fallback={<Icon kind="refresh" />} />
       <Show when={props.isSyncing} fallback="Sync now">Syncing...</Show>
     </button>
   );
diff --git a/src/components/settings/SettingsInlineFeedback.tsx b/src/components/settings/SettingsInlineFeedback.tsx
index 18a030a..7dd6e58 100644
--- a/src/components/settings/SettingsInlineFeedback.tsx
+++ b/src/components/settings/SettingsInlineFeedback.tsx
@@ -45,7 +45,7 @@ export function SettingsInlineFeedback(props: { feedback: SettingsFeedback | nul
             aria-live={kind === "error" ? "assertive" : "polite"}
             class="inline-flex w-fit items-center gap-2 rounded-full bg-surface-container-high px-3 py-1.5 text-sm"
             classList={{ "text-emerald-300": kind === "success", "text-red-300": kind === "error" }}>
-            <Icon kind={kind === "success" ? "complete" : "danger"} aria-hidden="true" />
+            <Icon kind={kind === "success" ? "complete" : "danger"} aria-hidden />
             <span>{message}</span>
           </div>
         );
diff --git a/src/components/settings/SettingsModeration.tsx b/src/components/settings/SettingsModeration.tsx
index 7003a94..945f9da 100644
--- a/src/components/settings/SettingsModeration.tsx
+++ b/src/components/settings/SettingsModeration.tsx
@@ -308,7 +308,7 @@ export function SettingsModeration() {
                       type="button"
                       class="inline-flex w-fit items-center gap-2 rounded-full border-0 bg-primary/20 px-3 py-1.5 text-xs font-medium text-primary transition hover:bg-primary/30"
                       onClick={() => void openUrl("https://bsky.app/settings/content-moderation")}>
-                      <Icon aria-hidden="true" iconClass="i-ri-external-link-line" />
+                      <Icon aria-hidden kind="ext-link" />
                       Open web settings
                     </button>
                   </div>
diff --git a/src/components/settings/SettingsPanel.tsx b/src/components/settings/SettingsPanel.tsx
index c917a1a..a8f4cf7 100644
--- a/src/components/settings/SettingsPanel.tsx
+++ b/src/components/settings/SettingsPanel.tsx
@@ -267,7 +267,7 @@ export function SettingsPanel() {
             onClick={() => navigate(-1)}
             class="ui-control ui-control-hoverable inline-flex h-10 w-10 items-center justify-center rounded-full"
             title="Close settings">
-            <Icon kind="close" aria-hidden="true" class="text-lg" />
+            <Icon kind="close" aria-hidden class="text-lg" />
           </button>
         </div>
       </header>
diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx
index 50bf9ca..216491a 100644
--- a/src/components/shared/ContextMenu.tsx
+++ b/src/components/shared/ContextMenu.tsx
@@ -191,9 +191,7 @@ export function ContextMenu(props: ContextMenuProps) {
                     item.onSelect();
                     props.onClose();
                   }}>
-                  <Show when={item.icon}>
-                    {(icon) => <Icon aria-hidden="true" iconClass={icon()} class="text-base" />}
-                  </Show>
+                  <Show when={item.icon}>{(icon) => <Icon aria-hidden iconClass={icon()} class="text-base" />}</Show>
                   <span>{item.label}</span>
                 </button>
               )}
diff --git a/src/components/shared/ErrorToast.tsx b/src/components/shared/ErrorToast.tsx
index 5f94a52..bfeb6e4 100644
--- a/src/components/shared/ErrorToast.tsx
+++ b/src/components/shared/ErrorToast.tsx
@@ -17,13 +17,13 @@ export function ErrorToast(props: ErrorToastProps) {
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 16, scale: 0.94 }}
             transition={{ duration: 0.2 }}>
-            <Icon kind="danger" aria-hidden="true" class="text-error" />
+            <Icon kind="danger" aria-hidden class="text-error" />
             <p class="m-0 text-[0.875rem] text-on-surface">{message()}</p>
             <button
               type="button"
               class="cursor-pointer rounded-full border-0 bg-transparent p-[0.35rem] text-inherit hover:bg-surface-bright"
               onClick={props.onDismiss}>
-              <Icon kind="close" aria-hidden="true" />
+              <Icon kind="close" aria-hidden />
               <span class="sr-only">Dismiss error</span>
             </button>
           </Motion.div>
diff --git a/src/components/shared/Icon.tsx b/src/components/shared/Icon.tsx
index 9b33bab..2eb30fc 100644
--- a/src/components/shared/Icon.tsx
+++ b/src/components/shared/Icon.tsx
@@ -1,6 +1,6 @@
 import type { ExplorerTargetKind } from "$/lib/api/types/explorer";
 import type { SearchMode } from "$/lib/api/types/search";
-import { type JSX, Match, splitProps, Switch } from "solid-js";
+import { type JSX, Match, Show, splitProps, Switch } from "solid-js";
 
 type ActionIconKind = "add" | "edit" | "delete" | "save" | "cancel";
 
@@ -60,7 +60,12 @@ export type IconKind =
   | "rss"
   | "messages"
   | "unpin"
-  | "bookmark";
+  | "bookmark"
+  | "diagnostics"
+  | "stethoscope"
+  | "check"
+  | "radar"
+  | "unfollow";
 
 type IconProps = JSX.HTMLAttributes<HTMLSpanElement> & {
   class?: string;
@@ -183,6 +188,18 @@ export function Icon(props: IconProps) {
         <Match when={local.kind === "bookmark"}>
           <i class="i-ri-bookmark-line" />
         </Match>
+        <Match when={local.kind === "diagnostics" || local.kind === "stethoscope"}>
+          <i class="i-ri-stethoscope-line" />
+        </Match>
+        <Match when={local.kind === "radar"}>
+          <i class="i-ri-radar-line" />
+        </Match>
+        <Match when={local.kind === "check"}>
+          <i class="i-ri-check-line" />
+        </Match>
+        <Match when={local.kind === "unfollow"}>
+          <i class="i-ri-user-unfollow-line" />
+        </Match>
       </Switch>
     </span>
   );
@@ -212,7 +229,7 @@ export function SettingsIcon(props: IconProps & { kind: SettingsIconKind }) {
           <i class="i-ri-notification-3-line" />
         </Match>
         <Match when={local.kind === "user"}>
-          <i class="i-ri-user-lin" />
+          <i class="i-ri-user-line" />
         </Match>
         <Match when={local.kind === "services"}>
           <i class="i-ri-global-line" />
@@ -334,3 +351,16 @@ export function ActionIcon(props: Omit<IconProps, "kind"> & { kind: ActionIconKi
     </span>
   );
 }
+
+export function LoadingIcon(
+  props: JSX.HTMLAttributes<HTMLSpanElement> & { isLoading: boolean; class?: string; fallback?: JSX.Element },
+) {
+  const [local, rest] = splitProps(props, ["class", "isLoading"]);
+  return (
+    <Show when={local.isLoading} fallback={props.fallback}>
+      <span {...rest} class="flex items-center justify-center" classList={{ [local.class ?? ""]: !!local.class }}>
+        <i class="i-ri-loader-4-line animate-spin" />
+      </span>
+    </Show>
+  );
+}
-- 
2.51.2