From 436815d036c2d0d60a049857cd890efdc4651742 Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Sun, 20 Sep 2026 09:21:07 +0800
Subject: [PATCH] fix(web-ui): unify sidebar icon tokens and layout

---
 .../design-tokens/src/system.tokens.json      |  21 +-
 .../design-tokens/tests/contract.test.mjs     |   2 +
 .../packages/ui/src/components/Icon/Icon.tsx  |   4 +-
 .../IconButton/IconButton.module.css          |   6 +-
 .../packages/ui/src/icons/SessionIcon.tsx     |   2 +-
 .../packages/ui/tests/icon-slots.test.mjs     |   2 +-
 design-system/packages/ui/tests/icon.test.mjs |   6 +-
 .../packages/ui/tests/session-icon.test.mjs   |   2 +-
 .../ui/generated/design-system.css            |   2 +
 .../src/app/components/NavBar/NavBar.tsx      |   4 +-
 .../src/app/components/NavPanel/MainNav.tsx   | 171 +++++++------
 .../src/app/components/NavPanel/NavPanel.scss | 229 +++++++++++-------
 .../NavPanel/NavPanelLayout.test.ts           |  33 ++-
 .../components/AssistantSessionCreateMenu.tsx |   2 +-
 .../components/DeviceStatusControl.tsx        |  29 +--
 .../NavPanel/components/MiniAppEntry.test.ts  |   9 +-
 .../NavPanel/components/MiniAppEntry.tsx      | 116 ++++-----
 .../components/WorkspaceSessionFilterMenu.tsx |  16 +-
 .../WorkspaceSessionGroupingToggle.tsx        |   1 +
 .../navigationIconIntegration.test.ts         |  34 ++-
 .../sections/sessions/SessionsSection.scss    |  26 +-
 .../sections/sessions/SessionsSection.tsx     |  31 ++-
 .../sessions/SessionsSectionLayout.test.ts    |   4 +-
 .../workspaces/WorkspaceAcpSessionSubmenu.tsx |   6 +-
 .../sections/workspaces/WorkspaceItem.tsx     |  42 ++--
 .../workspaces/WorkspaceListSection.scss      |   8 +-
 .../WorkspaceListSectionLayout.test.ts        |   8 +-
 .../WorkspaceProjectPermissionsDialog.tsx     |   2 +-
 .../WorkspaceRelatedPathsDialog.tsx           |   2 +-
 .../workspaces/WorkspaceSessionBatchModal.tsx |   4 +-
 .../RemoteConnectDialog/ChatAppBrandIcon.tsx  |  28 ++-
 .../TitleBar/NotificationButton.tsx           |  15 +-
 src/web-ui/src/app/scenes/git/GitNav.tsx      |   8 +-
 .../scenes/miniapps/utils/miniAppIcons.tsx    |  11 +-
 .../src/app/scenes/settings/SettingsNav.scss  |   8 +-
 .../settings/SettingsNavTypography.test.ts    |   5 +-
 .../IconUsageIntegration.test.tsx             |   2 +-
 37 files changed, 522 insertions(+), 379 deletions(-)

diff --git a/design-system/packages/design-tokens/src/system.tokens.json b/design-system/packages/design-tokens/src/system.tokens.json
index d75b439bfb..e9d436646b 100644
--- a/design-system/packages/design-tokens/src/system.tokens.json
+++ b/design-system/packages/design-tokens/src/system.tokens.json
@@ -543,12 +543,21 @@
       "expandedPaddingInline": { "$value": "0.625rem" }
     },
     "icon": {
-      "$type": "dimension",
-      "size2xs": { "$value": "8px" },
-      "sizeXs": { "$value": "12px" },
-      "sizeSm": { "$value": "14px" },
-      "sizeMd": { "$value": "16px" },
-      "sizeLg": { "$value": "24px" }
+      "size2xs": { "$type": "dimension", "$value": "8px" },
+      "sizeXs": { "$type": "dimension", "$value": "12px" },
+      "sizeSm": { "$type": "dimension", "$value": "14px" },
+      "sizeMd": { "$type": "dimension", "$value": "16px" },
+      "sizeLg": { "$type": "dimension", "$value": "24px" },
+      "strokeWidth": {
+        "$description": "Default optical line weight for Lucide-based interface icons.",
+        "$type": "number",
+        "$value": 1.6
+      },
+      "strokeWidthStrong": {
+        "$description": "Stronger optical line weight for compact navigation and other emphasized icon groups.",
+        "$type": "number",
+        "$value": 2
+      }
     },
     "height": {
       "$type": "dimension",
diff --git a/design-system/packages/design-tokens/tests/contract.test.mjs b/design-system/packages/design-tokens/tests/contract.test.mjs
index fe12312f3b..2fd10a15b2 100644
--- a/design-system/packages/design-tokens/tests/contract.test.mjs
+++ b/design-system/packages/design-tokens/tests/contract.test.mjs
@@ -72,6 +72,8 @@ test("Icon geometry exposes every catalog size without product semantics", () =>
   assert.equal(tokens["control.icon.sizeSm"], "14px");
   assert.equal(tokens["control.icon.sizeMd"], "16px");
   assert.equal(tokens["control.icon.sizeLg"], "24px");
+  assert.equal(tokens["control.icon.strokeWidth"], 1.6);
+  assert.equal(tokens["control.icon.strokeWidthStrong"], 2);
 });
 
 test("TabGroup geometry preserves the capsule selected and outline contract", async () => {
diff --git a/design-system/packages/ui/src/components/Icon/Icon.tsx b/design-system/packages/ui/src/components/Icon/Icon.tsx
index e0e95dcd1a..dc295051b8 100644
--- a/design-system/packages/ui/src/components/Icon/Icon.tsx
+++ b/design-system/packages/ui/src/components/Icon/Icon.tsx
@@ -242,8 +242,6 @@ interface IconBaseProps
 
 export type IconProps = IconBaseProps & IconSource;
 
-const LINE_ICON_STROKE_WIDTH = 1.6;
-
 export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
   className,
   glyph: LineGlyph,
@@ -285,7 +283,7 @@ export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
         <Glyph
           aria-hidden="true"
           focusable="false"
-          strokeWidth={LINE_ICON_STROKE_WIDTH}
+          strokeWidth="var(--openbitfun-control-icon-stroke-width)"
         />
       ) : null}
     </span>
diff --git a/design-system/packages/ui/src/components/IconButton/IconButton.module.css b/design-system/packages/ui/src/components/IconButton/IconButton.module.css
index b59cd67b1d..8882bbc0b0 100644
--- a/design-system/packages/ui/src/components/IconButton/IconButton.module.css
+++ b/design-system/packages/ui/src/components/IconButton/IconButton.module.css
@@ -4,7 +4,7 @@
     --_icon-button-background-hover: var(--openbitfun-color-action-neutral-surface-hover);
     --_icon-button-background-active: var(--openbitfun-color-action-neutral-surface-hover);
     --_icon-button-content: var(--openbitfun-color-content-primary);
-    --_icon-button-icon-size: 14px;
+    --_icon-button-icon-size: var(--openbitfun-control-icon-size-sm);
     --_icon-button-size: var(--openbitfun-control-height-sm);
 
     position: relative;
@@ -126,12 +126,12 @@
   }
 
   .button[data-size="md"] {
-    --_icon-button-icon-size: 16px;
+    --_icon-button-icon-size: var(--openbitfun-control-icon-size-md);
     --_icon-button-size: var(--openbitfun-control-height-md);
   }
 
   .button[data-size="lg"] {
-    --_icon-button-icon-size: 20px;
+    --_icon-button-icon-size: var(--openbitfun-control-icon-size-lg);
     --_icon-button-size: var(--openbitfun-control-height-lg);
   }
 
diff --git a/design-system/packages/ui/src/icons/SessionIcon.tsx b/design-system/packages/ui/src/icons/SessionIcon.tsx
index 1500facb4d..223853dcea 100644
--- a/design-system/packages/ui/src/icons/SessionIcon.tsx
+++ b/design-system/packages/ui/src/icons/SessionIcon.tsx
@@ -10,5 +10,5 @@ export const SessionIcon = forwardRef<SVGSVGElement, SessionIconProps>(function
   height, size = 24, width, style, ...props
 }, ref) {
   return <MessageCircle {...props} ref={ref} width={width ?? size} height={height ?? size}
-    strokeWidth={1.6} style={{ opacity: "var(--openbitfun-opacity-icon-artwork)", ...style }} />;
+    strokeWidth="var(--openbitfun-control-icon-stroke-width)" style={{ opacity: "var(--openbitfun-opacity-icon-artwork)", ...style }} />;
 });
diff --git a/design-system/packages/ui/tests/icon-slots.test.mjs b/design-system/packages/ui/tests/icon-slots.test.mjs
index 003944f08d..1612fc8144 100644
--- a/design-system/packages/ui/tests/icon-slots.test.mjs
+++ b/design-system/packages/ui/tests/icon-slots.test.mjs
@@ -90,7 +90,7 @@ test("buttons constrain normalized line fallbacks through the same icon slot", (
     const markup = renderToStaticMarkup(createElement(Component, props));
     assert.match(markup, /data-openbitfun-component="icon"/);
     assert.match(markup, /data-openbitfun-source="line"/);
-    assert.match(markup, /<svg[^>]*stroke-width="1.6"/);
+    assert.match(markup, /<svg[^>]*stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
   }
 });
 
diff --git a/design-system/packages/ui/tests/icon.test.mjs b/design-system/packages/ui/tests/icon.test.mjs
index 66140ac811..87f8dd16a9 100644
--- a/design-system/packages/ui/tests/icon.test.mjs
+++ b/design-system/packages/ui/tests/icon.test.mjs
@@ -30,7 +30,7 @@ test("Icon is decorative by default and renders the named Lucide glyph", () => {
   assert.match(markup, /data-size="lg"/);
   assert.match(markup, /aria-hidden="true"/);
   assert.match(markup, /lucide-search/);
-  assert.match(markup, /stroke-width="1.6"/);
+  assert.match(markup, /stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
   assert.doesNotMatch(markup, /mask-image/);
 });
 
@@ -63,7 +63,7 @@ test("Icon normalizes Lucide fallbacks without exposing product-owned line weigh
   assert.match(markup, /data-openbitfun-tone="secondary"/);
   assert.match(markup, /role="img"/);
   assert.match(markup, /aria-label="Network"/);
-  assert.match(markup, /<svg[^>]*stroke-width="1.6"/);
+  assert.match(markup, /<svg[^>]*stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
   assert.match(markup, /<svg[^>]*aria-hidden="true"/);
   assert.doesNotMatch(markup, /mask-image/);
 });
@@ -127,7 +127,7 @@ test("every general-purpose named icon renders Lucide and only the reviewed exce
       assert.doesNotMatch(markup, /<svg/, name);
     } else {
       assert.match(markup, /class="lucide lucide-/, name);
-      assert.match(markup, /stroke-width="1.6"/, name);
+      assert.match(markup, /stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/, name);
       assert.doesNotMatch(markup, /mask-image/, name);
     }
   }
diff --git a/design-system/packages/ui/tests/session-icon.test.mjs b/design-system/packages/ui/tests/session-icon.test.mjs
index 723c26b040..f7a0f8f667 100644
--- a/design-system/packages/ui/tests/session-icon.test.mjs
+++ b/design-system/packages/ui/tests/session-icon.test.mjs
@@ -10,7 +10,7 @@ test("SessionIcon renders the Lucide conversation glyph with standalone opacity"
   assert.match(markup, /viewBox="0 0 24 24"/);
   assert.match(markup, /lucide-message-circle/);
   assert.match(markup, /stroke="currentColor"/);
-  assert.match(markup, /stroke-width="1.6"/);
+  assert.match(markup, /stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
   assert.match(markup, /opacity:var\(--openbitfun-opacity-icon-artwork\)/);
 });
 
diff --git a/src/apps/data-migrator/ui/generated/design-system.css b/src/apps/data-migrator/ui/generated/design-system.css
index e187a96755..be23fa928a 100644
--- a/src/apps/data-migrator/ui/generated/design-system.css
+++ b/src/apps/data-migrator/ui/generated/design-system.css
@@ -96,6 +96,8 @@
     --openbitfun-control-icon-size-md: 16px;
     --openbitfun-control-icon-size-sm: 14px;
     --openbitfun-control-icon-size-xs: 12px;
+    --openbitfun-control-icon-stroke-width: 1.6;
+    --openbitfun-control-icon-stroke-width-strong: 2;
     --openbitfun-control-icon-button-standard-icon-size: 16px;
     --openbitfun-control-icon-button-standard-size: 30px;
     --openbitfun-control-icon-button-xs-icon-size: 14px;
diff --git a/src/web-ui/src/app/components/NavBar/NavBar.tsx b/src/web-ui/src/app/components/NavBar/NavBar.tsx
index ed7a377fa6..863b8de671 100644
--- a/src/web-ui/src/app/components/NavBar/NavBar.tsx
+++ b/src/web-ui/src/app/components/NavBar/NavBar.tsx
@@ -96,7 +96,7 @@ const NavBar: React.FC<NavBarProps> = ({
             onClick={onExpandNav}
             aria-label={t('header.expandLeftPanel')}
           >
-            <Icon name="sidebar-left" size="sm" style={{ width: 13, height: 13 }} />
+            <Icon name="sidebar-left" size="sm" />
           </button>
         </Tooltip>
       </div>
@@ -114,7 +114,7 @@ const NavBar: React.FC<NavBarProps> = ({
           onClick={onExpandNav}
           aria-label={t('header.collapseLeftPanel')}
         >
-          <Icon name="sidebar-left" size="sm" style={{ width: 13, height: 13 }} />
+          <Icon name="sidebar-left" size="sm" />
         </button>
       </Tooltip>
 
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index efec16333f..68af881c58 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -10,6 +10,7 @@
 import React, { useCallback, useState, useMemo, useEffect, useRef, useSyncExternalStore } from 'react';
 import { subscribeOverlayInteraction, createOverlayPortal, OverflowText,
   Icon,
+  IconButton,
   KeyHint,
   Menu,
   MenuItem,
@@ -20,6 +21,7 @@ import { subscribeOverlayInteraction, createOverlayPortal, OverflowText,
   NavigationPanelBody,
   NavigationPanelContent,
   NavigationPanelHeader,
+  NavigationPanelItem,
   ScrollArea,
   Tooltip,
 } from '@openbitfun/ui';
@@ -262,26 +264,26 @@ const MainNav: React.FC = () => {
       style={{ top: workspaceMenuPos.top, left: workspaceMenuPos.left }}
     >
       <MenuItem
-        leading={<Icon glyph={FolderOpen} />}
+        leading={<Icon glyph={FolderOpen} size="sm" />}
         onClick={() => { closeWorkspaceMenu(); void handleOpenProject(); }}
       >
         {t('header.openProject')}
       </MenuItem>
       <MenuItem
-        leading={<Icon glyph={FolderPlus} />}
+        leading={<Icon glyph={FolderPlus} size="sm" />}
         onClick={() => { closeWorkspaceMenu(); handleNewProject(); }}
       >
         {t('header.newProject')}
       </MenuItem>
       <MenuItem
-        leading={<Icon name="user" size="xs" />}
+        leading={<Icon name="user" size="sm" />}
         onClick={handleOpenAssistantManager}
         data-testid="nav-session-group-add-assistant"
       >
         {t('nav.workspaces.actions.newAssistant')}
       </MenuItem>
       <MenuItem
-        leading={<Icon glyph={Server} />}
+        leading={<Icon glyph={Server} size="sm" />}
         onClick={handleOpenRemoteSSH}
       >
         {t('ssh.remote.connect')}
@@ -303,7 +305,7 @@ const MainNav: React.FC = () => {
                 return (
                   <MenuItem data-overflow-trigger
                     key={workspace.id}
-                    leading={<Icon glyph={FolderOpen} />}
+                    leading={<Icon glyph={FolderOpen} size="sm" />}
                     role="menuitemradio"
                     checked={isCurrent}
                     metadata={isCurrent ? <Icon name="check-line" size="xs" /> : undefined}
@@ -328,7 +330,7 @@ const MainNav: React.FC = () => {
               })
             )}
           </MenuList>
-        </ScrollArea>
+          </ScrollArea>
       </MenuSection>
     </Menu>,
     getAppearanceOverlayHost()
@@ -390,9 +392,9 @@ const MainNav: React.FC = () => {
         <div data-testid="nav-sections" className="openbitfun-nav-panel__sections-slot">
         <div data-openbitfun-component="nav-panel" data-openbitfun-part="topActions" className="openbitfun-nav-panel__top-actions">
           <Tooltip content={assistantManagerLabel} placement="right" followCursor>
-            <button data-overflow-trigger
-              type="button"
-              className={[
+            <NavigationPanelItem
+              className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--root"
+              triggerClassName={[
                 'openbitfun-nav-panel__top-action-btn',
                 isAssistantManagerActive ? 'is-active' : '',
               ].filter(Boolean).join(' ')}
@@ -403,18 +405,21 @@ const MainNav: React.FC = () => {
               onClick={handleOpenAssistantManager}
               aria-label={assistantManagerLabel}
               data-testid="nav-assistant-manager"
+              leading={(
+                <span className="openbitfun-nav-panel__top-action-icon-slot">
+                  <Icon name="user" size="sm" />
+                </span>
+              )}
+              selected={isAssistantManagerActive}
             >
-              <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                <Icon name="user" size="sm" />
-              </span>
-              <OverflowText>{assistantManagerLabel}</OverflowText>
-            </button>
+              {assistantManagerLabel}
+            </NavigationPanelItem>
           </Tooltip>
 
           <Tooltip content={t('nav.tooltips.todos')} placement="right" followCursor>
-            <button data-overflow-trigger
-              type="button"
-              className={[
+            <NavigationPanelItem
+              className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--root"
+              triggerClassName={[
                 'openbitfun-nav-panel__top-action-btn',
                 isTaskBoardActive ? 'is-active' : '',
               ].filter(Boolean).join(' ')}
@@ -424,14 +429,16 @@ const MainNav: React.FC = () => {
               data-openbitfun-state={isTaskBoardActive ? 'active' : ''}
               onClick={handleOpenTodos}
               aria-label={taskBoardLabel}
-              aria-pressed={isTaskBoardActive}
               data-testid="nav-todos-btn"
+              leading={(
+                <span className="openbitfun-nav-panel__top-action-icon-slot">
+                  <Icon name="clock" size="sm" />
+                </span>
+              )}
+              selected={isTaskBoardActive}
             >
-              <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                <Icon name="clock" size="sm" />
-              </span>
-              <OverflowText>{taskBoardLabel}</OverflowText>
-            </button>
+              {taskBoardLabel}
+            </NavigationPanelItem>
           </Tooltip>
 
           <div className="openbitfun-nav-panel__miniapp-navigation" data-openbitfun-component="nav-panel" data-openbitfun-part="miniAppFooter">
@@ -445,9 +452,9 @@ const MainNav: React.FC = () => {
 
           <div className="openbitfun-nav-panel__top-action-expand" data-openbitfun-component="nav-panel" data-openbitfun-part="extensionGroup" data-openbitfun-state={isExtensionsOpen ? 'open' : ''} data-testid="agent-skill-panel">
             <Tooltip content={extensionsLabel} placement="right" followCursor>
-              <button data-overflow-trigger
-                type="button"
-                className={[
+              <NavigationPanelItem
+                className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--root"
+                triggerClassName={[
                   'openbitfun-nav-panel__top-action-btn',
                   'openbitfun-nav-panel__top-action-btn--expand',
                   isExtensionsOpen ? 'is-open' : '',
@@ -460,27 +467,28 @@ const MainNav: React.FC = () => {
                 aria-expanded={isExtensionsOpen}
                 aria-label={extensionsLabel}
                 data-testid="agent-skill-entry"
+                leading={(
+                  <span
+                    className="openbitfun-nav-panel__top-action-icon-slot openbitfun-nav-panel__top-action-expand-icons"
+                  >
+                    <Icon
+                      name="extension"
+                      size="sm"
+                      className="openbitfun-nav-panel__top-action-expand-icon-default"
+                    />
+                    <Icon
+                      name="chevron-down"
+                      size="sm"
+                      className={[
+                        'openbitfun-nav-panel__top-action-expand-icon-chevron',
+                        isExtensionsOpen ? 'is-open' : '',
+                      ].filter(Boolean).join(' ')}
+                    />
+                  </span>
+                )}
               >
-                <span
-                  className="openbitfun-nav-panel__top-action-icon-slot openbitfun-nav-panel__top-action-expand-icons"
-                  aria-hidden="true"
-                >
-                  <Icon
-                    name="extension"
-                    size="sm"
-                    className="openbitfun-nav-panel__top-action-expand-icon-default"
-                  />
-                  <Icon
-                    name="chevron-down"
-                    size="sm"
-                    className={[
-                      'openbitfun-nav-panel__top-action-expand-icon-chevron',
-                      isExtensionsOpen ? 'is-open' : '',
-                    ].filter(Boolean).join(' ')}
-                  />
-                </span>
-                <OverflowText>{extensionsLabel}</OverflowText>
-              </button>
+                {extensionsLabel}
+              </NavigationPanelItem>
             </Tooltip>
 
             <div
@@ -491,9 +499,9 @@ const MainNav: React.FC = () => {
             >
               <div className="openbitfun-nav-panel__top-action-sublist-inner">
                 <Tooltip content={agentsTooltip} placement="right" followCursor>
-                  <button data-overflow-trigger
-                    type="button"
-                    className={[
+                  <NavigationPanelItem
+                    className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--sub"
+                    triggerClassName={[
                       'openbitfun-nav-panel__top-action-btn',
                       'openbitfun-nav-panel__top-action-btn--sub',
                       isAgentsActive ? 'is-active' : '',
@@ -505,18 +513,21 @@ const MainNav: React.FC = () => {
                     onClick={handleOpenAgents}
                     aria-label={agentsTooltip}
                     data-testid="agent-tab"
+                    leading={(
+                      <span className="openbitfun-nav-panel__top-action-icon-slot">
+                        <Icon glyph={Users} size="sm" />
+                      </span>
+                    )}
+                    selected={isAgentsActive}
                   >
-                    <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                      <Icon glyph={Users} size="sm" />
-                    </span>
-                    <OverflowText>{t('nav.items.agents')}</OverflowText>
-                  </button>
+                    {t('nav.items.agents')}
+                  </NavigationPanelItem>
                 </Tooltip>
 
                 <Tooltip content={skillsTooltip} placement="right" followCursor>
-                  <button data-overflow-trigger
-                    type="button"
-                    className={[
+                  <NavigationPanelItem
+                    className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--sub"
+                    triggerClassName={[
                       'openbitfun-nav-panel__top-action-btn',
                       'openbitfun-nav-panel__top-action-btn--sub',
                       isSkillsActive ? 'is-active' : '',
@@ -528,18 +539,21 @@ const MainNav: React.FC = () => {
                     onClick={handleOpenSkills}
                     aria-label={skillsTooltip}
                     data-testid="skill-tab"
+                    leading={(
+                      <span className="openbitfun-nav-panel__top-action-icon-slot">
+                        <Icon name="extension" size="sm" />
+                      </span>
+                    )}
+                    selected={isSkillsActive}
                   >
-                    <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                      <Icon name="extension" size="sm" />
-                    </span>
-                    <OverflowText>{t('nav.items.skills')}</OverflowText>
-                  </button>
+                    {t('nav.items.skills')}
+                  </NavigationPanelItem>
                 </Tooltip>
 
                 <Tooltip content={ecosystemCompatibilityTooltip} placement="right" followCursor>
-                  <button data-overflow-trigger
-                    type="button"
-                    className={[
+                  <NavigationPanelItem
+                    className="openbitfun-nav-panel__top-action-item openbitfun-nav-panel__top-action-item--sub"
+                    triggerClassName={[
                       'openbitfun-nav-panel__top-action-btn',
                       'openbitfun-nav-panel__top-action-btn--sub',
                       isEcosystemCompatibilityActive ? 'is-active' : '',
@@ -551,12 +565,7 @@ const MainNav: React.FC = () => {
                     onClick={handleOpenEcosystemCompatibility}
                     aria-label={ecosystemCompatibilityTooltip}
                     data-testid="ecosystem-compatibility-tab"
-                  >
-                    <span className="openbitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
-                      <Icon glyph={Network} size="sm" />
-                    </span>
-                    <OverflowText>{t('nav.items.ecosystemCompatibility')}</OverflowText>
-                    {hasUnseenEcosystemCompatibility ? (
+                    actionContent={hasUnseenEcosystemCompatibility ? (
                       <span
                         className="openbitfun-nav-panel__top-action-unseen"
                         data-openbitfun-component="nav-panel"
@@ -564,7 +573,15 @@ const MainNav: React.FC = () => {
                         aria-hidden="true"
                       />
                     ) : null}
-                  </button>
+                    leading={(
+                      <span className="openbitfun-nav-panel__top-action-icon-slot">
+                        <Icon glyph={Network} size="sm" />
+                      </span>
+                    )}
+                    selected={isEcosystemCompatibilityActive}
+                  >
+                    {t('nav.items.ecosystemCompatibility')}
+                  </NavigationPanelItem>
                 </Tooltip>
               </div>
             </div>
@@ -582,18 +599,18 @@ const MainNav: React.FC = () => {
                   <WorkspaceSessionFilterMenu />
                   <div className="openbitfun-nav-panel__workspace-action-wrap">
                     <Tooltip content={addSessionGroupTooltip} placement="right" followCursor disabled={workspaceMenuOpen}>
-                      <button
+                      <IconButton
                         ref={workspaceMenuButtonRef}
-                        type="button"
                         className={`openbitfun-nav-panel__section-action${workspaceMenuOpen ? ' is-active' : ''}`}
                         aria-label={addSessionGroupTooltip}
                         aria-haspopup="menu"
                         aria-expanded={workspaceMenuOpen}
                         onClick={toggleWorkspaceMenu}
                         data-testid="nav-workspace-add-btn"
-                      >
-                        <Icon glyph={FolderPlus} size="sm" />
-                      </button>
+                        icon={<Icon glyph={FolderPlus} size="sm" />}
+                        size="xs"
+                        variant="quiet"
+                      />
                     </Tooltip>
                   </div>
                 </>
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 6b00a2aaea..e7750d1bf5 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -19,6 +19,13 @@ $_section-header-height: 22px;
 .openbitfun-nav-panel {
   @include shell-surfaces.sidebar-background;
 
+  --_nav-icon-color: var(--openbitfun-color-content-secondary);
+  --_nav-icon-slot-size: var(--openbitfun-control-icon-button-xs-size);
+  --_nav-icon-size: var(--openbitfun-control-icon-size-sm);
+  --_nav-icon-size-prominent: var(--openbitfun-control-icon-size-md);
+  --openbitfun-control-icon-stroke-width: var(--openbitfun-control-icon-stroke-width-strong);
+  --openbitfun-opacity-icon-artwork: 1;
+
   width: 100%;
   flex: 1;
   min-height: 0;
@@ -287,13 +294,13 @@ $_section-header-height: 22px;
     }
 
     &--pro .openbitfun-nav-panel__mode-pill-segment-icon {
-      width: 22px;
-      height: 22px;
+      width: var(--_nav-icon-slot-size);
+      height: var(--_nav-icon-slot-size);
     }
 
     &--assistant .openbitfun-nav-panel__mode-pill-segment-icon {
-      width: 24px;
-      height: 24px;
+      width: var(--openbitfun-control-icon-size-lg);
+      height: var(--openbitfun-control-icon-size-lg);
     }
   }
 
@@ -654,6 +661,18 @@ $_section-header-height: 22px;
     margin: 0;
   }
 
+  &__miniapp-item {
+    display: flex;
+    width: 100%;
+    min-height: var(--openbitfun-layout-navigation-panel-item-height);
+    padding: 0;
+    background: transparent;
+  }
+
+  &__miniapp-item > [data-openbitfun-part='actions'] {
+    margin-inline-end: var(--openbitfun-space-2);
+  }
+
   &__miniapp-entry {
     position: relative;
     width: 100%;
@@ -696,6 +715,14 @@ $_section-header-height: 22px;
       box-shadow: 0 2px 8px color-mix(in srgb, var(--openbitfun-color-content-on-light) 8%, transparent);
     }
 
+    &:hover,
+    &:focus-visible,
+    &.is-active {
+      .openbitfun-nav-panel__miniapp-entry-icon {
+        color: var(--openbitfun-color-content-primary);
+      }
+    }
+
     &.has-customizing-apps {
       color: var(--openbitfun-color-content-primary);
 
@@ -729,24 +756,11 @@ $_section-header-height: 22px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    flex: 0 0 22px;
-    width: 22px;
-    height: 22px;
-    color: inherit;
-  }
-
-  &__miniapp-entry-copy {
-    min-width: 0;
-    display: inline;
-  }
-
-  &__miniapp-entry-title {
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    font-size: var(--openbitfun-type-label-md-font-size);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
-    line-height: var(--openbitfun-type-display-sm-line-height);
+    flex: 0 0 var(--_nav-icon-slot-size);
+    width: var(--_nav-icon-slot-size);
+    height: var(--_nav-icon-slot-size);
+    color: var(--_nav-icon-color);
+    transition: color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
   }
 
   &__miniapp-entry-apps {
@@ -772,6 +786,9 @@ $_section-header-height: 22px;
     border: none;
     box-shadow: none;
     overflow: hidden;
+    --_icon-button-background: transparent;
+    --_icon-button-background-hover: transparent;
+    --_icon-button-background-active: transparent;
     transition: transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
                 box-shadow var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
                 filter var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
@@ -797,23 +814,25 @@ $_section-header-height: 22px;
     &.is-customizing {
       box-shadow: 0 0 0 2px color-mix(in srgb, var(--openbitfun-color-accent-default) 42%, transparent),
                   0 8px 18px color-mix(in srgb, var(--openbitfun-color-content-on-light) 20%, transparent);
+
+      &::after {
+        position: absolute;
+        right: 2px;
+        bottom: 2px;
+        width: 6px;
+        height: 6px;
+        border-radius: var(--openbitfun-radius-pill);
+        background: var(--openbitfun-color-accent-default);
+        box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbitfun-color-content-on-light) 28%, transparent), 0 0 7px color-mix(in srgb, var(--openbitfun-color-accent-default) 72%, transparent);
+        content: '';
+        pointer-events: none;
+      }
     }
 
     &.is-active.is-customizing {
       box-shadow: 0 0 0 2px color-mix(in srgb, var(--openbitfun-color-accent-default) 42%, transparent);
     }
 
-    &-customize-dot {
-      position: absolute;
-      right: 2px;
-      bottom: 2px;
-      width: 6px;
-      height: 6px;
-      border-radius: 999px;
-      background: var(--openbitfun-color-accent-default);
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--openbitfun-color-content-on-light) 28%, transparent), 0 0 7px color-mix(in srgb, var(--openbitfun-color-accent-default) 72%, transparent);
-    }
-
     &--more {
       background: color-mix(in srgb, var(--openbitfun-color-action-neutral-surface-hover) 92%, transparent);
       color: var(--openbitfun-color-content-secondary);
@@ -917,42 +936,27 @@ $_section-header-height: 22px;
   }
 
   &__section-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--openbitfun-color-content-primary);
-    cursor: pointer;
-    transition: color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
-                background var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+    flex: 0 0 var(--_nav-icon-slot-size);
+    inline-size: var(--_nav-icon-slot-size);
+    block-size: var(--_nav-icon-slot-size);
+    color: var(--_nav-icon-color);
 
     &:hover {
       color: var(--openbitfun-color-content-primary);
-      background: var(--openbitfun-color-action-quiet-hover);
     }
 
     &.is-active {
       color: var(--openbitfun-color-content-primary);
       background: var(--openbitfun-color-action-quiet-hover);
     }
-
-    &:active {
-      background: var(--openbitfun-color-action-neutral-surface-hover);
-    }
-
-    &:focus-visible {
-      outline: 1px solid var(--openbitfun-color-accent-default);
-      outline-offset: 1px;
-    }
   }
 
   &__workspace-action-wrap {
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    inline-size: var(--_nav-icon-slot-size);
+    block-size: var(--_nav-icon-slot-size);
   }
 
   /* Positioning-only overrides; the design-system Menu owns the surface look. */
@@ -1107,7 +1111,7 @@ $_section-header-height: 22px;
       color: var(--openbitfun-color-content-primary);
 
       .openbitfun-nav-panel__item-icon {
-        opacity: 0.8;
+        color: var(--_nav-icon-color);
       }
     }
 
@@ -1121,7 +1125,9 @@ $_section-header-height: 22px;
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    opacity: 0.78;
+    inline-size: var(--_nav-icon-size);
+    block-size: var(--_nav-icon-size);
+    color: var(--_nav-icon-color);
     transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
                 color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
@@ -1408,8 +1414,8 @@ $_section-header-height: 22px;
 }
 
 .openbitfun-nav-panel__footer-device-status-attached-group {
-  width: 20px;
-  height: 20px;
+  width: var(--_nav-icon-slot-size);
+  height: var(--_nav-icon-slot-size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1481,14 +1487,14 @@ $_section-header-height: 22px;
 // Footer icon buttons: default icon fades to alternate on hover / focus-visible
 .openbitfun-nav-panel__footer-btn-icon-swap {
   position: relative;
-  width: 15px;
-  height: 15px;
+  width: var(--_nav-icon-size);
+  height: var(--_nav-icon-size);
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  > svg {
+  > [data-openbitfun-component='icon'] {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -2226,17 +2232,29 @@ $_section-header-height: 22px;
 }
 
 // Align with section headers: __section-header margin-x 8 + padding-x 8 → label starts 16px from panel; __top-actions pad-x 8 + button pl 8 → icon column starts at 16px.
+.openbitfun-nav-panel__top-action-item {
+  display: flex;
+  width: 100%;
+  min-height: var(--openbitfun-layout-navigation-panel-item-height);
+  padding: 0;
+  background: transparent;
+}
+
+.openbitfun-nav-panel__top-action-item--sub {
+  min-height: var(--openbitfun-layout-navigation-panel-item-height);
+}
+
 .openbitfun-nav-panel__top-action-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--openbitfun-space-2);
   width: 100%;
   padding: 0 var(--openbitfun-space-2) 0 var(--openbitfun-space-2);
-  height: 32px;
+  height: var(--openbitfun-layout-navigation-panel-item-height);
   border: none;
   border-radius: var(--openbitfun-radius-base);
   background: transparent;
-  color: var(--openbitfun-color-content-secondary);
+  color: var(--_nav-icon-color);
   font-size: var(--openbitfun-type-label-md-font-size);
   font-weight: var(--openbitfun-type-label-sm-font-weight);
   cursor: pointer;
@@ -2244,8 +2262,9 @@ $_section-header-height: 22px;
   transition: background var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
               color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
 
-  // Only the label span:not([data-overflow-content]) should grow; icon / chevron wrappers must NOT get flex: 1
-  > span:not([data-overflow-content]):not(.openbitfun-nav-panel__top-action-icon-circle):not(.openbitfun-nav-panel__top-action-icon-slot):not(.openbitfun-nav-panel__top-action-expand-icons):not(.openbitfun-nav-panel__count-badge):not(.openbitfun-nav-panel__top-action-unseen) {
+  // Follow the ActionItem anatomy explicitly so component-library slots are not
+  // mistaken for labels when new spans are added to the component.
+  > [data-openbitfun-part='label'] {
     flex: 1;
     min-width: 0;
     overflow: hidden;
@@ -2255,18 +2274,23 @@ $_section-header-height: 22px;
   svg { flex-shrink: 0; }
 
   .openbitfun-nav-panel__top-action-icon-slot {
-    width: 22px;
-    min-width: 22px;
-    height: 22px;
-    flex: 0 0 22px;
+    width: var(--_nav-icon-slot-size);
+    min-width: var(--_nav-icon-slot-size);
+    height: var(--_nav-icon-slot-size);
+    flex: 0 0 var(--_nav-icon-slot-size);
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    color: var(--_nav-icon-color);
   }
 
   &:hover {
     background: var(--openbitfun-color-action-quiet-hover);
     color: var(--openbitfun-color-content-primary);
+
+    .openbitfun-nav-panel__top-action-icon-slot {
+      color: var(--openbitfun-color-content-primary);
+    }
   }
 
   &:focus-visible {
@@ -2277,22 +2301,44 @@ $_section-header-height: 22px;
   &.is-active {
     background: var(--openbitfun-color-action-quiet-hover);
     color: var(--openbitfun-color-content-primary);
+
+    .openbitfun-nav-panel__top-action-icon-slot {
+      color: var(--openbitfun-color-content-primary);
+    }
   }
 
   &--sub {
-    // Start the visible 15px child icon on the parent label column:
-    // parent inline padding (8px) + parent icon slot (22px) + gap (8px).
-    padding-left: calc(var(--openbitfun-space-2) + 30px);
+    // Start the child icon on the parent label column.
+    padding-left: calc(var(--openbitfun-space-2) + var(--_nav-icon-slot-size) + var(--openbitfun-space-2));
 
     .openbitfun-nav-panel__top-action-icon-slot {
-      width: 15px;
-      min-width: 15px;
-      flex-basis: 15px;
+      width: var(--_nav-icon-size);
+      min-width: var(--_nav-icon-size);
+      height: var(--_nav-icon-size);
+      flex-basis: var(--_nav-icon-size);
       justify-content: flex-start;
     }
   }
 }
 
+// Keep every primary navigation entry on the same token-owned icon column.
+// ActionItem's leading slot is a direct child of the trigger; the icon wrappers
+// inside it inherit this fixed geometry instead of participating in label growth.
+.openbitfun-nav-panel__top-action-btn,
+.openbitfun-nav-panel__miniapp-entry {
+  > [data-openbitfun-part='leading'] {
+    flex: 0 0 var(--_nav-icon-slot-size);
+    inline-size: var(--_nav-icon-slot-size);
+    block-size: var(--_nav-icon-slot-size);
+  }
+}
+
+.openbitfun-nav-panel__top-action-btn--sub > [data-openbitfun-part='leading'] {
+  flex-basis: var(--_nav-icon-size);
+  inline-size: var(--_nav-icon-size);
+  block-size: var(--_nav-icon-size);
+}
+
 .openbitfun-nav-panel__top-action-unseen {
   width: 6px;
   height: 6px;
@@ -2301,7 +2347,7 @@ $_section-header-height: 22px;
   background: var(--openbitfun-color-accent-default);
 }
 
-// 扩展：默认 Blocks，悬停时图标位切换为 Chevron；展开时箭头朝上
+// 扩展：默认 Puzzle，悬停时图标位切换为 Chevron；展开时箭头朝上
 .openbitfun-nav-panel__top-action-expand-icons {
   position: relative;
 
@@ -2317,9 +2363,7 @@ $_section-header-height: 22px;
 
   .openbitfun-nav-panel__top-action-expand-icon-default {
     opacity: 1;
-    // The puzzle glyph's filled mass sits left of its viewBox center. At the
-    // 14px navigation size, a 1px optical correction aligns it with the row.
-    transform: translate(calc(-50% + 1px), -50%);
+    transform: translate(-50%, -50%);
   }
 
   .openbitfun-nav-panel__top-action-expand-icon-chevron {
@@ -2342,10 +2386,10 @@ $_section-header-height: 22px;
 }
 
 .openbitfun-nav-panel__top-action-icon-circle {
-  width: 22px;
-  min-width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
+  width: var(--_nav-icon-slot-size);
+  min-width: var(--_nav-icon-slot-size);
+  height: var(--_nav-icon-slot-size);
+  flex: 0 0 var(--_nav-icon-slot-size);
   align-self: center;
   display: inline-flex;
   align-items: center;
@@ -2369,6 +2413,14 @@ $_section-header-height: 22px;
   }
 }
 
+.openbitfun-nav-panel__menu-loading-icon {
+  inline-size: var(--openbitfun-control-icon-size-sm);
+  block-size: var(--openbitfun-control-icon-size-sm);
+  color: var(--openbitfun-color-content-secondary);
+  opacity: var(--openbitfun-opacity-muted);
+  animation: openbitfun-nav-session-spin 1s linear infinite;
+}
+
 // ──────────────────────────────────────────────
 // Desktop navigation refinement
 // ──────────────────────────────────────────────
@@ -2465,7 +2517,7 @@ $_section-header-height: 22px;
     }
 
     &--sub {
-      padding-left: calc(var(--openbitfun-space-2) + 30px);
+      padding-left: calc(var(--openbitfun-space-2) + var(--_nav-icon-slot-size) + var(--openbitfun-space-2));
       color: var(--openbitfun-color-content-muted);
     }
   }
@@ -2808,8 +2860,7 @@ $_section-header-height: 22px;
     @include shell-surfaces.navigation-hover-feedback;
   }
 
-  &__assistant-entry-label,
-  &__miniapp-entry-title {
+  &__assistant-entry-label {
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanelLayout.test.ts b/src/web-ui/src/app/components/NavPanel/NavPanelLayout.test.ts
index 702b9605fc..4d15e08d6b 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanelLayout.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/NavPanelLayout.test.ts
@@ -67,15 +67,15 @@ describe('NavPanel layout styles', () => {
     expect(stylesheet).not.toContain('&__collapsible');
   });
 
-  it('keeps root action buttons at the compact row size', () => {
+  it('keeps section actions on the shared compact icon-button token', () => {
     const stylesheet = readNavPanelStylesheet();
     const sectionActionBlock = extractBlock(stylesheet, '&__section-action');
     const itemActionBlock = extractBlock(stylesheet, '&__item-action');
 
-    for (const block of [sectionActionBlock, itemActionBlock]) {
-      expect(block).toContain('width: 20px;');
-      expect(block).toContain('height: 20px;');
-    }
+    expect(sectionActionBlock).toContain('inline-size: var(--_nav-icon-slot-size);');
+    expect(sectionActionBlock).toContain('block-size: var(--_nav-icon-slot-size);');
+    expect(itemActionBlock).toContain('width: 20px;');
+    expect(itemActionBlock).toContain('height: 20px;');
   });
 
   it('uses the selected label weight for active navigation rows', () => {
@@ -135,11 +135,32 @@ describe('NavPanel layout styles', () => {
     );
     expect(stylesheet).toContain('inset-block-start: 50%;');
     expect(stylesheet).toContain('inset-inline-start: 50%;');
-    expect(stylesheet).toContain('transform: translate(calc(-50% + 1px), -50%);');
+    expect(stylesheet).toContain('transform: translate(-50%, -50%);');
+    expect(stylesheet).not.toContain('translate(calc(-50% + 1px), -50%)');
     expect(stylesheet).not.toContain(
       '.openbitfun-nav-panel__top-action-expand-icons {\n' +
       '  position: relative;\n' +
       '  width: 22px;',
     );
   });
+
+  it('keeps component-library leading slots out of the flexible label column', () => {
+    const stylesheet = readNavPanelStylesheet();
+
+    expect(stylesheet).toContain(
+      ".openbitfun-nav-panel__top-action-btn,\n" +
+      ".openbitfun-nav-panel__miniapp-entry {\n" +
+      "  > [data-openbitfun-part='leading'] {\n" +
+      '    flex: 0 0 var(--_nav-icon-slot-size);\n' +
+      '    inline-size: var(--_nav-icon-slot-size);\n' +
+      '    block-size: var(--_nav-icon-slot-size);',
+    );
+    expect(stylesheet).toContain(
+      "> [data-openbitfun-part='label'] {\n" +
+      '    flex: 1;',
+    );
+    expect(stylesheet).not.toContain(
+      '> span:not([data-overflow-content]):not(.openbitfun-nav-panel__top-action-icon-circle)',
+    );
+  });
 });
diff --git a/src/web-ui/src/app/components/NavPanel/components/AssistantSessionCreateMenu.tsx b/src/web-ui/src/app/components/NavPanel/components/AssistantSessionCreateMenu.tsx
index 208e22789e..be3dadc59e 100644
--- a/src/web-ui/src/app/components/NavPanel/components/AssistantSessionCreateMenu.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/AssistantSessionCreateMenu.tsx
@@ -138,7 +138,7 @@ const AssistantSessionCreateMenu: React.FC<AssistantSessionCreateMenuProps> = ({
             return (
               <MenuItem data-overflow-trigger
                 key={workspace.id}
-                leading={<Icon name="plus" size="xs" aria-hidden="true" />}
+                leading={<Icon name="plus" size="sm" aria-hidden="true" />}
                 aria-label={t('nav.sessions.newAssistantSessionFor', { assistantName })}
                 onClick={() => {
                   closeMenu();
diff --git a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
index 6e6626d3ff..42b7e5dde4 100644
--- a/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/DeviceStatusControl.tsx
@@ -1,6 +1,6 @@
 import { useDeviceDirectory, resolveDeviceName, isDeviceControllable, deviceClientVersion } from '@/infrastructure/account/deviceDirectory';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { subscribeOverlayInteraction, createOverlayPortal, OverflowText, Button, Card, CardBody, CardFooter, CardHeader, Icon, IconButton, ScrollArea } from '@openbitfun/ui';
+import { subscribeOverlayInteraction, createOverlayPortal, OverflowText, Button, Card, CardBody, CardFooter, CardHeader, Icon, IconButton, ScrollArea, type IconSize } from '@openbitfun/ui';
 import { ChevronLeft, ChevronRight, MessageCircle, Monitor, Server, Smartphone, Undo2 } from 'lucide-react';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
@@ -43,25 +43,26 @@ function chatAppBrandFromIdentity(identity: string | null | undefined): ChatAppB
 function DeviceIcon({
   identity,
   kind,
-  size = 17,
+  size = 'sm',
 }: {
   identity?: string | null;
   kind: DeviceOverviewDeviceKind;
-  size?: number;
+  size?: IconSize;
 }) {
-  const iconStyle = { width: size, height: size };
   switch (kind) {
     case 'mobile':
-      return <Icon glyph={Smartphone} size="lg" style={iconStyle} />;
+      return <Icon glyph={Smartphone} size={size} />;
     case 'execution-host':
-      return <Icon glyph={Server} size="lg" style={iconStyle} />;
+      return <Icon glyph={Server} size={size} />;
     case 'message-app': {
       const chatApp = chatAppBrandFromIdentity(identity);
-      if (chatApp) return <ChatAppBrandIcon app={chatApp} size={size} />;
-      return <Icon glyph={MessageCircle} size="lg" style={iconStyle} />;
+      if (chatApp) {
+        return <ChatAppBrandIcon app={chatApp} size={size} />;
+      }
+      return <Icon glyph={MessageCircle} size={size} />;
     }
     default:
-      return <Icon glyph={Monitor} size="lg" style={iconStyle} />;
+      return <Icon glyph={Monitor} size={size} />;
   }
 }
 
@@ -277,7 +278,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
         data-openbitfun-part="deviceStatus"
         data-openbitfun-state={overview.mode}
       >
-        <DeviceIcon kind={overview.primaryDevice.kind} size={15} />
+        <DeviceIcon kind={overview.primaryDevice.kind} size="sm" />
         <OverflowText className="openbitfun-nav-panel__footer-device-status-label">
           {overview.currentWorkDeviceName}
         </OverflowText>
@@ -295,7 +296,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                 <DeviceIcon
                   identity={group.kind === 'message-app' ? attachedMessageAppIdentity : null}
                   kind={group.kind}
-                  size={13}
+                  size="xs"
                 />
                 {group.count > 1 && (
                   <span className="openbitfun-nav-panel__footer-device-status-attached-count">
@@ -360,7 +361,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                             <DeviceIcon
                               identity={`${device.id} ${device.name}`}
                               kind={device.kind}
-                              size={16}
+                              size="md"
                             />
                           </span>
                           <strong><OverflowText>{deviceDisplayName(device)}</OverflowText></strong>
@@ -447,7 +448,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                 <Button
                   variant="outline"
                   size="sm"
-                  leadingIcon={<Icon name="refresh" size="lg" />}
+                  leadingIcon={<Icon name="refresh" size="sm" />}
                   className="openbitfun-device-overview__notice"
                   onClick={() => { void refresh(); }}
                 >
@@ -473,7 +474,7 @@ const DeviceStatusControl: React.FC<DeviceStatusControlProps> = ({
                   className="openbitfun-device-overview__action"
                   variant="outline"
                   size="sm"
-                  leadingIcon={<Icon glyph={Undo2} />}
+                  leadingIcon={<Icon glyph={Undo2} size="sm" />}
                   onClick={() => { void handleReturnLocal(); }}
                   disabled={returningLocal || switchingDevice}
                   data-testid="nav-device-status-return-local"
diff --git a/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.test.ts b/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.test.ts
index 43dfa46134..9e2fb6dd5b 100644
--- a/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.test.ts
@@ -28,12 +28,13 @@ describe('MiniAppEntry navigation presentation', () => {
       'utf8',
     );
 
-    expect(source).toContain('<Icon name="mini-app" size="md" />');
-    expect(source.indexOf('openbitfun-nav-panel__miniapp-entry-icon'))
-      .toBeLessThan(source.indexOf('openbitfun-nav-panel__miniapp-entry-title'));
+    expect(source).toContain('<Icon name="mini-app" size="sm" />');
+    expect(source).toContain('<NavigationPanelItem');
+    expect(source).not.toContain('role="button"');
+    expect(source).toContain('leading={(');
     expect(stylesheet).toContain('&__miniapp-entry-icon');
     expect(stylesheet).toContain('padding: 8px 10px 8px var(--openbitfun-space-2);');
     expect(stylesheet).toContain('gap: var(--openbitfun-space-2);');
-    expect(stylesheet).toContain('flex: 0 0 22px;');
+    expect(stylesheet).toContain('flex: 0 0 var(--_nav-icon-slot-size);');
   });
 });
diff --git a/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx b/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx
index 023d787322..03125ca2f7 100644
--- a/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/MiniAppEntry.tsx
@@ -3,7 +3,7 @@ import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useMiniAppStore } from '@/app/scenes/miniapps/miniAppStore';
 import { useMiniAppActivity } from '@/app/scenes/miniapps/hooks/useMiniAppActivity';
 import { renderMiniAppIcon, getMiniAppIconGradient } from '@/app/scenes/miniapps/utils/miniAppIcons';
-import { OverflowText, Icon, Tooltip } from '@openbitfun/ui';
+import { Icon, IconButton, NavigationPanelItem, Tooltip } from '@openbitfun/ui';
 
 const MAX_VISIBLE_ACTIVE_APPS = 3;
 
@@ -45,84 +45,62 @@ const MiniAppEntry: React.FC<MiniAppEntryProps> = ({
 
   return (
     <div className="openbitfun-nav-panel__miniapp-entry-wrap">
-      <div data-overflow-trigger
-        className={[
+      <NavigationPanelItem
+        className="openbitfun-nav-panel__miniapp-item"
+        triggerClassName={[
           'openbitfun-nav-panel__miniapp-entry',
           isActive && 'is-active',
           activeApps.length > 0 && 'has-running-apps',
           hasCustomizingApps && 'has-customizing-apps',
         ].filter(Boolean).join(' ')}
         onClick={onOpenMiniApps}
-        onKeyDown={(event) => {
-          if (event.currentTarget !== event.target) return;
-          if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            onOpenMiniApps();
-          }
-        }}
-        role="button"
-        tabIndex={0}
         aria-label={t('scenes.miniApps')}
         data-testid="nav-miniapps-entry"
-      >
-        <span className="openbitfun-nav-panel__miniapp-entry-main">
-          <span className="openbitfun-nav-panel__miniapp-entry-icon" aria-hidden="true">
-            <Icon name="mini-app" size="md" />
+        selected={isActive}
+        leading={(
+          <span className="openbitfun-nav-panel__miniapp-entry-icon">
+            <Icon name="mini-app" size="sm" />
           </span>
-          <span className="openbitfun-nav-panel__miniapp-entry-copy">
-            <OverflowText className="openbitfun-nav-panel__miniapp-entry-title">{t('scenes.miniApps')}</OverflowText>
+        )}
+        actionContent={(
+          <span className="openbitfun-nav-panel__miniapp-entry-apps">
+            {visibleApps.length > 0 ? (
+              <>
+                {visibleApps.map((app) => {
+                  const isAppActive = app.id === activeMiniAppId;
+                  return (
+                    <Tooltip key={app.id} content={app.name} placement="right">
+                      <IconButton
+                        className={[
+                          'openbitfun-nav-panel__miniapp-bubble',
+                          isAppActive && 'is-active',
+                          customizingIdSet.has(app.id) && 'is-customizing',
+                        ].filter(Boolean).join(' ')}
+                        style={{ background: getMiniAppIconGradient(app.icon || 'box') }}
+                        onClick={() => onOpenMiniApp(app.id)}
+                        aria-label={app.name}
+                        data-testid="nav-miniapp-activity-item"
+                        data-miniapp-id={app.id}
+                        icon={renderMiniAppIcon(app.icon || 'box', 'sm')}
+                        shape="circle"
+                        size="xs"
+                        variant="quiet"
+                      />
+                    </Tooltip>
+                  );
+                })}
+                {overflowCount > 0 ? (
+                  <span className="openbitfun-nav-panel__miniapp-bubble openbitfun-nav-panel__miniapp-bubble--more">
+                    +{overflowCount}
+                  </span>
+                ) : null}
+              </>
+            ) : null}
           </span>
-        </span>
-
-        <span className="openbitfun-nav-panel__miniapp-entry-apps">
-          {visibleApps.length > 0 ? (
-            <>
-              {visibleApps.map((app) => {
-                const isAppActive = app.id === activeMiniAppId;
-                return (
-                  <Tooltip key={app.id} content={app.name} placement="right">
-                    <span
-                      className={[
-                        'openbitfun-nav-panel__miniapp-bubble',
-                        isAppActive && 'is-active',
-                        customizingIdSet.has(app.id) && 'is-customizing',
-                      ].filter(Boolean).join(' ')}
-                      style={{ background: getMiniAppIconGradient(app.icon || 'box') }}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        onOpenMiniApp(app.id);
-                      }}
-                      onMouseDown={(event) => event.stopPropagation()}
-                      role="button"
-                      tabIndex={0}
-                      aria-label={app.name}
-                      data-testid="nav-miniapp-activity-item"
-                      data-miniapp-id={app.id}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          onOpenMiniApp(app.id);
-                        }
-                      }}
-                    >
-                      {renderMiniAppIcon(app.icon || 'box', 14)}
-                      {customizingIdSet.has(app.id) && (
-                        <span className="openbitfun-nav-panel__miniapp-bubble-customize-dot" aria-hidden="true" />
-                      )}
-                    </span>
-                  </Tooltip>
-                );
-              })}
-              {overflowCount > 0 ? (
-                <span className="openbitfun-nav-panel__miniapp-bubble openbitfun-nav-panel__miniapp-bubble--more">
-                  +{overflowCount}
-                </span>
-              ) : null}
-            </>
-          ) : null}
-        </span>
-      </div>
+        )}
+      >
+        {t('scenes.miniApps')}
+      </NavigationPanelItem>
     </div>
   );
 };
diff --git a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx
index 8d9da33197..e3ef6e69bc 100644
--- a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionFilterMenu.tsx
@@ -5,7 +5,7 @@ import { useI18n } from '@/infrastructure/i18n';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { flowChatStore } from '@/flow_chat/store/FlowChatStore';
 import { useSubmenuIntent } from '@/shared/utils/useSubmenuIntent';
-import { subscribeOverlayInteraction, createOverlayPortal, Icon, Menu, MenuItem, MenuSection, MenuSeparator, Tooltip } from '@openbitfun/ui';
+import { subscribeOverlayInteraction, createOverlayPortal, Icon, IconButton, Menu, MenuItem, MenuSection, MenuSeparator, Tooltip } from '@openbitfun/ui';
 import {
   DEFAULT_WORKSPACE_SESSION_VIEW,
   hasWorkspaceSessionFilters,
@@ -213,7 +213,7 @@ const WorkspaceSessionFilterMenu: React.FC = () => {
         <span className="openbitfun-nav-panel__session-filter-menu-value">
           {active ? <span className="openbitfun-nav-panel__session-filter-active-dot" aria-hidden="true" /> : null}
           {value ? t(`nav.sessions.viewMenu.${submenu}.${value}`) : null}
-          <Icon name="chevron-right" size="md" aria-hidden="true" />
+          <Icon name="chevron-right" size="sm" aria-hidden="true" />
         </span>
       )}
       onClick={() => {
@@ -250,7 +250,7 @@ const WorkspaceSessionFilterMenu: React.FC = () => {
           actions={[{
             id: 'reset',
             label: t('nav.sessions.viewMenu.filters.reset'),
-            icon: <Icon glyph={RotateCcw} />,
+            icon: <Icon glyph={RotateCcw} size="sm" />,
             onClick: () => {
               setActiveSubmenu(null);
               view.resetFilters();
@@ -334,9 +334,8 @@ const WorkspaceSessionFilterMenu: React.FC = () => {
   return (
     <>
       <Tooltip content={t('nav.sessions.viewMenu.tooltip')} placement="right" followCursor disabled={open}>
-        <button
+        <IconButton
           ref={buttonRef}
-          type="button"
           className={`openbitfun-nav-panel__section-action${open || isCustomized ? ' is-active' : ''}`}
           data-openbitfun-action="session-filter"
           data-openbitfun-state={[open && 'open', isCustomized && 'filtered'].filter(Boolean).join(' ') || undefined}
@@ -345,9 +344,10 @@ const WorkspaceSessionFilterMenu: React.FC = () => {
           aria-expanded={open}
           onClick={() => setOpen(current => !current)}
           data-testid="nav-session-filter-btn"
-        >
-          <Icon name="filter" size="lg" style={{ width: 13, height: 13 }} />
-        </button>
+          icon={<Icon name="filter" size="sm" />}
+          size="xs"
+          variant="quiet"
+        />
       </Tooltip>
       {menu}
     </>
diff --git a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
index 4153d3ca1a..bc516d9bf7 100644
--- a/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/WorkspaceSessionGroupingToggle.tsx
@@ -28,6 +28,7 @@ const WorkspaceSessionGroupingToggle: React.FC = () => {
         icon={(
           <Icon
             glyph={ViewIcon}
+            size="sm"
             data-session-view-icon={grouping}
           />
         )}
diff --git a/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts b/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
index bcf92bfad3..609e82f028 100644
--- a/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/navigationIconIntegration.test.ts
@@ -9,7 +9,7 @@ describe('navigation icon integration', () => {
       'utf8',
     );
     const entryStart = source.indexOf('data-testid="agent-skill-entry"');
-    const entryEnd = source.indexOf('</button>', entryStart);
+    const entryEnd = source.indexOf('</NavigationPanelItem>', entryStart);
     const entryMarkup = source.slice(entryStart, entryEnd);
 
     expect(entryStart).toBeGreaterThanOrEqual(0);
@@ -44,7 +44,7 @@ describe('navigation icon integration', () => {
       'utf8',
     );
     const entryStart = source.indexOf('data-testid="nav-todos-btn"');
-    const entryEnd = source.indexOf('</button>', entryStart);
+    const entryEnd = source.indexOf('</NavigationPanelItem>', entryStart);
     const entryMarkup = source.slice(entryStart, entryEnd);
 
     expect(entryStart).toBeGreaterThanOrEqual(0);
@@ -62,6 +62,7 @@ describe('navigation icon integration', () => {
     expect(source).toContain("import { List, ListTree } from 'lucide-react'");
     expect(source).toContain('const ViewIcon = isAll ? List : ListTree');
     expect(source).toContain('glyph={ViewIcon}');
+    expect(source).toContain('size="sm"');
     expect(source).toContain('data-session-view-icon={grouping}');
     expect(source).toContain('data-testid="nav-workspace-session-view-toggle"');
     expect(source).not.toContain('strokeWidth');
@@ -74,12 +75,37 @@ describe('navigation icon integration', () => {
       'utf8',
     );
     const actionStart = source.indexOf('data-testid="nav-workspace-add-btn"');
-    const actionEnd = source.indexOf('</button>', actionStart);
-    const actionMarkup = source.slice(actionStart, actionEnd);
+    const componentStart = source.lastIndexOf('<IconButton', actionStart);
+    const actionEnd = source.indexOf('\n                      />', actionStart);
+    const actionMarkup = source.slice(componentStart, actionEnd);
 
     expect(actionStart).toBeGreaterThanOrEqual(0);
+    expect(componentStart).toBeGreaterThanOrEqual(0);
     expect(actionEnd).toBeGreaterThan(actionStart);
     expect(actionMarkup).toContain('<Icon glyph={FolderPlus} size="sm"');
+    expect(actionMarkup).toContain('size="xs"');
+    expect(actionMarkup).toContain('variant="quiet"');
+  });
+
+  it('uses one IconButton contract for all session header actions', () => {
+    const groupingSource = readFileSync(
+      fileURLToPath(new URL('./components/WorkspaceSessionGroupingToggle.tsx', import.meta.url)),
+      'utf8',
+    );
+    const filterSource = readFileSync(
+      fileURLToPath(new URL('./components/WorkspaceSessionFilterMenu.tsx', import.meta.url)),
+      'utf8',
+    );
+    const mainNavSource = readFileSync(
+      fileURLToPath(new URL('./MainNav.tsx', import.meta.url)),
+      'utf8',
+    );
+
+    for (const source of [groupingSource, filterSource, mainNavSource]) {
+      expect(source).toContain('<IconButton');
+      expect(source).toContain('size="xs"');
+      expect(source).toContain('variant="quiet"');
+    }
   });
 
   it('uses stable standard icons for every session-group type', () => {
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index 65a6c67a3c..7e13a7a9f4 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -80,7 +80,11 @@
     color: var(--openbitfun-color-content-muted);
     font-size: var(--openbitfun-type-meta-font-size);
 
-    svg {
+    .openbitfun-nav-panel__inline-loading-icon {
+      inline-size: var(--openbitfun-control-icon-size-xs);
+      block-size: var(--openbitfun-control-icon-size-xs);
+      color: var(--openbitfun-color-content-secondary);
+      opacity: var(--openbitfun-opacity-muted);
       flex: 0 0 auto;
       animation: openbitfun-nav-session-spin 1s linear infinite;
     }
@@ -348,7 +352,11 @@
     letter-spacing: var(--openbitfun-type-modifier-tracking-wide-letter-spacing);
     white-space: nowrap;
 
-    svg {
+    .openbitfun-nav-panel__inline-item-review-icon {
+      inline-size: var(--openbitfun-control-icon-size2xs);
+      block-size: var(--openbitfun-control-icon-size2xs);
+      color: var(--openbitfun-color-content-secondary);
+      opacity: var(--openbitfun-opacity-muted);
       animation: openbitfun-nav-session-spin 1s linear infinite;
     }
   }
@@ -360,8 +368,8 @@
     place-items: center;
     justify-items: center;
     align-items: center;
-    width: 16px;
-    height: 16px;
+    width: var(--openbitfun-control-icon-size-md);
+    height: var(--openbitfun-control-icon-size-md);
     padding: 0;
     border: 1px solid var(--openbitfun-color-status-success-border);
     border-radius: 999px;
@@ -377,8 +385,10 @@
     grid-area: 1 / 1;
     place-self: center;
     display: block;
-    width: 10px;
-    height: 10px;
+    inline-size: var(--openbitfun-control-icon-size-xs);
+    block-size: var(--openbitfun-control-icon-size-xs);
+    color: var(--openbitfun-color-content-secondary);
+    opacity: var(--openbitfun-opacity-muted);
     flex-shrink: 0;
     transform-origin: center center;
     transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard), transform var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
@@ -532,6 +542,10 @@
 
   &__inline-toggle-spinner {
     flex: 0 0 auto;
+    inline-size: var(--openbitfun-control-icon-size-xs);
+    block-size: var(--openbitfun-control-icon-size-xs);
+    color: var(--openbitfun-color-content-secondary);
+    opacity: var(--openbitfun-opacity-muted);
     animation: openbitfun-nav-session-spin 1s linear infinite;
   }
 
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
index 08081790e7..605661dfbb 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx
@@ -1373,7 +1373,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
             role="status"
             aria-live="polite"
           >
-            <Loader2 size={12} />
+            <Loader2 className="openbitfun-nav-panel__inline-loading-icon" aria-hidden="true" />
             <OverflowText>{t('nav.sessions.loading')}</OverflowText>
           </div>
         )
@@ -1405,7 +1405,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
       return (
         <div data-openbitfun-component="sessions-section" data-openbitfun-part="root" className={sessionListClassName}>
           <div className="openbitfun-nav-panel__inline-loading" data-openbitfun-component="sessions-section" data-openbitfun-part="loading" data-openbitfun-state="loading">
-            <Loader2 size={12} />
+            <Loader2 className="openbitfun-nav-panel__inline-loading-icon" aria-hidden="true" />
             <OverflowText>{t('nav.sessions.loading')}</OverflowText>
           </div>
         </div>
@@ -1714,7 +1714,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                     ) : null}
                     {reviewActivityKind ? (
                       <span className="openbitfun-nav-panel__inline-item-review-badge">
-                        <Loader2 size={9} aria-hidden />
+                        <Loader2 className="openbitfun-nav-panel__inline-item-review-icon" aria-hidden />
                         {getReviewActivityBadge(reviewActivityKind)}
                       </span>
                     ) : null}
@@ -1733,7 +1733,6 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                         />
                         <Loader2
                           className="openbitfun-nav-panel__inline-item-background-subagent-icon is-loader"
-                          size={10}
                           aria-hidden
                         />
                       </span>
@@ -1791,7 +1790,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                         <>
                           <MenuItem
                             type="button"
-                            leading={<Icon name="chevron-left" />}
+                            leading={<Icon name="chevron-left" size="sm" />}
                             onClick={e => {
                               e.stopPropagation();
                               setIsExportScopeMenu(false);
@@ -1803,7 +1802,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Icon name="arrow-down" size="lg" style={{ width: 13, height: 13 }} />}
+                            leading={<Icon name="arrow-down" size="sm" />}
                             onClick={e => { void handleExportMarkdown(e, session, 'full'); }}
                             data-testid="nav-session-menu-export-full"
                             data-session-id={session.sessionId}
@@ -1812,7 +1811,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Icon name="arrow-down" size="lg" style={{ width: 13, height: 13 }} />}
+                            leading={<Icon name="arrow-down" size="sm" />}
                             onClick={e => { void handleExportMarkdown(e, session, 'result'); }}
                             data-testid="nav-session-menu-export-result"
                             data-session-id={session.sessionId}
@@ -1824,7 +1823,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                         <>
                           <MenuItem
                             type="button"
-                            leading={<Icon name="edit" size="xs" />}
+                            leading={<Icon name="edit" size="sm" />}
                             onClick={e => { closeSessionMenu(); handleStartEdit(e, session); }}
                             data-testid="nav-session-menu-rename"
                             data-session-id={session.sessionId}
@@ -1833,7 +1832,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Icon name="duplicate" size="xs" />}
+                            leading={<Icon name="duplicate" size="sm" />}
                             onClick={e => { closeSessionMenu(); void handleCopySessionId(e, session.sessionId); }}
                             data-testid="nav-session-menu-copy-id"
                             data-session-id={session.sessionId}
@@ -1850,14 +1849,14 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                             data-testid="nav-session-menu-export-markdown"
                             data-session-id={session.sessionId}
                             leading={exportingSessionId === session.sessionId
-                              ? <Loader2 size={13} className="openbitfun-nav-panel__inline-toggle-spinner" />
-                              : <Icon name="arrow-down" size="lg" style={{ width: 13, height: 13 }} />}
+                              ? <Loader2 className="openbitfun-nav-panel__inline-toggle-spinner" aria-hidden />
+                              : <Icon name="arrow-down" size="sm" />}
                           >
                             <span>{t('nav.sessions.exportMarkdown')}</span>
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Icon name="clock" size="xs" />}
+                            leading={<Icon name="clock" size="sm" />}
                             onClick={e => {
                               e.stopPropagation();
                               closeSessionMenu();
@@ -1871,7 +1870,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Icon glyph={Archive} />}
+                            leading={<Icon glyph={Archive} size="sm" />}
                             onClick={e => { closeSessionMenu(); void handleArchive(e, session.sessionId); }}
                             data-testid="nav-session-menu-archive"
                             data-session-id={session.sessionId}
@@ -1880,7 +1879,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           </MenuItem>
                           <MenuItem
                             type="button"
-                            leading={<Icon glyph={ListChecks} />}
+                            leading={<Icon glyph={ListChecks} size="sm" />}
                             disabled={!workspaceId && !session.projectWorkspaceId && !session.workspaceId}
                             onClick={e => {
                               e.stopPropagation();
@@ -1903,7 +1902,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
                           <MenuItem
                             type="button"
                             tone="danger"
-                            leading={<Icon name="delete" size="lg" style={{ width: 13, height: 13 }} />}
+                            leading={<Icon name="delete" size="sm" />}
                             onClick={e => { closeSessionMenu(); void handleDelete(e, session.sessionId); }}
                             data-testid="nav-session-menu-delete"
                             data-session-id={session.sessionId}
@@ -1978,7 +1977,7 @@ const SessionsSection: React.FC<SessionsSectionProps> = ({
             </span>
           )}
           {metadataPageState.isLoading ? (
-            <Loader2 size={12} className="openbitfun-nav-panel__inline-toggle-spinner" aria-hidden />
+            <Loader2 className="openbitfun-nav-panel__inline-toggle-spinner" aria-hidden />
           ) : expandToggleLabels.remainingCount === null ? (
             <Icon name="chevron-up" size="xs" className="openbitfun-nav-panel__inline-toggle-chevron" aria-hidden />
           ) : (
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts
index 600b423c4a..cd41f64d1c 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSectionLayout.test.ts
@@ -187,8 +187,8 @@ describe('SessionsSection layout styles', () => {
     expect(backgroundSubagentBadgeBlock).toContain('display: inline-grid;');
     expect(backgroundSubagentBadgeBlock).toContain('place-items: center;');
     expect(backgroundSubagentBadgeBlock).toContain('line-height: 0;');
-    expect(backgroundSubagentBadgeBlock).toContain('width: 16px;');
-    expect(backgroundSubagentBadgeBlock).toContain('height: 16px;');
+    expect(backgroundSubagentBadgeBlock).toContain('width: var(--openbitfun-control-icon-size-md);');
+    expect(backgroundSubagentBadgeBlock).toContain('height: var(--openbitfun-control-icon-size-md);');
 
     const backgroundSubagentIconBlock = extractInlineItemBlock(stylesheet, 'background-subagent-icon');
     expect(backgroundSubagentIconBlock).toContain('place-self: center;');
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
index 3d456e2e54..71d3208027 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
@@ -171,7 +171,7 @@ const WorkspaceAcpSessionSubmenu = forwardRef<HTMLDivElement, WorkspaceAcpSessio
         <MenuItem
           ref={triggerRef}
           className={`openbitfun-nav-panel__workspace-acp-menu-trigger${open ? ' is-open' : ''}`}
-          leading={<Icon name="user" />}
+          leading={<Icon name="user" size="sm" />}
           shortcut={<Icon name="chevron-right" size="sm" aria-hidden="true" />}
           aria-haspopup="menu"
           aria-expanded={open}
@@ -197,7 +197,7 @@ const WorkspaceAcpSessionSubmenu = forwardRef<HTMLDivElement, WorkspaceAcpSessio
             }}
           >
             {loading ? (
-              <MenuItem leading={<Loader2 size={13} aria-hidden="true" />} disabled>
+              <MenuItem leading={<Loader2 className="openbitfun-nav-panel__menu-loading-icon" aria-hidden="true" />} disabled>
                 {t('app.loading')}
               </MenuItem>
             ) : clients.map(client => {
@@ -205,7 +205,7 @@ const WorkspaceAcpSessionSubmenu = forwardRef<HTMLDivElement, WorkspaceAcpSessio
               return (
                 <MenuItem
                   key={client.id}
-                  leading={<Icon name="user" />}
+                  leading={<Icon name="user" size="sm" />}
                   onClick={() => onSelect(client)}
                   data-testid="nav-workspace-menu-create-acp-session"
                   data-acp-client-id={client.id}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index 8a88ce90b7..c76f4e955d 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -918,17 +918,17 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 data-workspace-id={workspace.id}
               >
                 <MenuItem
-                  leading={<Icon name="plus" size="xs" />}
+                  leading={<Icon name="plus" size="sm" />}
                   onClick={() => { void handleCreateSession(); }}
                   data-testid="nav-workspace-menu-create-session"
                 >
                   {t('nav.workspaces.actions.newSession')}
                 </MenuItem>
-                <MenuItem leading={<Icon name="clock" size="xs" />} onClick={handleOpenScheduledJobs}>
+                <MenuItem leading={<Icon name="clock" size="sm" />} onClick={handleOpenScheduledJobs}>
                   {t('nav.scheduledJobs.open')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon glyph={ShieldCheck} />}
+                  leading={<Icon glyph={ShieldCheck} size="sm" />}
                   onClick={handleOpenProjectPermissions}
                   data-testid="nav-workspace-menu-project-permissions"
                 >
@@ -936,7 +936,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 </MenuItem>
                 {portForwardConnectionId ? (
                   <MenuItem
-                    leading={<Icon glyph={Network} />}
+                    leading={<Icon glyph={Network} size="sm" />}
                     onClick={handleOpenPortForward}
                     data-testid="nav-workspace-menu-port-forward"
                   >
@@ -945,7 +945,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 ) : null}
                 <MenuSeparator />
                 <MenuItem
-                  leading={<Icon name="duplicate" size="xs" />}
+                  leading={<Icon name="duplicate" size="sm" />}
                   onClick={() => { void handleCopyWorkspacePath(); }}
                   disabled={!workspace.rootPath}
                   data-testid="nav-workspace-menu-copy-path"
@@ -953,7 +953,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.copyPath')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon glyph={FolderSearch} />}
+                  leading={<Icon glyph={FolderSearch} size="sm" />}
                   onClick={() => { void handleReveal(); }}
                   disabled={isRemoteWorkspace(workspace)}
                   data-testid="nav-workspace-menu-reveal"
@@ -962,7 +962,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 </MenuItem>
                 <MenuSeparator />
                 <MenuItem
-                  leading={<Icon glyph={ListChecks} />}
+                  leading={<Icon glyph={ListChecks} size="sm" />}
                   onClick={handleOpenSessionBatchModal}
                   data-testid="nav-workspace-menu-manage-sessions"
                 >
@@ -972,7 +972,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   <>
                     {isDefaultAssistantWorkspace ? (
                       <MenuItem
-                        leading={<Icon glyph={RotateCcw} />}
+                        leading={<Icon glyph={RotateCcw} size="sm" />}
                         tone="danger"
                         onClick={handleRequestResetWorkspace}
                         disabled={isResettingWorkspace}
@@ -983,7 +983,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                     ) : null}
                     {isDeletableAssistantWorkspace ? (
                       <MenuItem
-                        leading={<Icon name="delete" size="lg" style={{ width: 13, height: 13 }} />}
+                        leading={<Icon name="delete" size="sm" />}
                         tone="danger"
                         onClick={handleRequestDeleteAssistant}
                         disabled={isDeletingAssistant}
@@ -1402,7 +1402,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 data-workspace-id={workspace.id}
               >
                 <MenuItem
-                  leading={<Icon name="plus" size="xs" />}
+                  leading={<Icon name="plus" size="sm" />}
                   onClick={handleCreateProjectSession}
                   data-testid="nav-workspace-menu-create-session"
                 >
@@ -1415,7 +1415,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   onSelect={client => { void handleCreateAcpSession(client); }}
                 />
                 <MenuItem
-                  leading={<Icon name="terminal" size="xs" />}
+                  leading={<Icon name="terminal" size="sm" />}
                   onClick={handleCreateTerminal}
                   disabled={!workspace.rootPath}
                   data-testid="nav-workspace-menu-create-terminal"
@@ -1423,14 +1423,14 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.shell.actions.newTerminal')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon glyph={FileText} />}
+                  leading={<Icon glyph={FileText} size="sm" />}
                   onClick={() => { void handleCreateInitSession(); }}
                   data-testid="nav-workspace-menu-create-init-session"
                 >
                   {t('nav.workspaces.actions.initAgents')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon name="link" size="xs" />}
+                  leading={<Icon name="link" size="sm" />}
                   onClick={() => {
                     setMenuOpen(false);
                     setRelatedPathsDialogOpen(true);
@@ -1440,18 +1440,18 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.manageRelatedPaths')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon glyph={ShieldCheck} />}
+                  leading={<Icon glyph={ShieldCheck} size="sm" />}
                   onClick={handleOpenProjectPermissions}
                   data-testid="nav-workspace-menu-project-permissions"
                 >
                   {t('nav.workspaces.actions.manageProjectPermissions')}
                 </MenuItem>
-                <MenuItem leading={<Icon name="clock" size="xs" />} onClick={handleOpenScheduledJobs}>
+                <MenuItem leading={<Icon name="clock" size="sm" />} onClick={handleOpenScheduledJobs}>
                   {t('nav.scheduledJobs.open')}
                 </MenuItem>
                 {portForwardConnectionId ? (
                   <MenuItem
-                    leading={<Icon glyph={Network} />}
+                    leading={<Icon glyph={Network} size="sm" />}
                     onClick={handleOpenPortForward}
                     data-testid="nav-workspace-menu-port-forward"
                   >
@@ -1460,14 +1460,14 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 ) : null}
                 <MenuSeparator />
                 <MenuItem
-                  leading={<Icon name="edit" size="xs" />}
+                  leading={<Icon name="edit" size="sm" />}
                   onClick={handleRequestRename}
                   data-testid="nav-workspace-menu-rename"
                 >
                   {t('nav.workspaces.actions.rename')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon name="duplicate" size="xs" />}
+                  leading={<Icon name="duplicate" size="sm" />}
                   onClick={() => { void handleCopyWorkspacePath(); }}
                   disabled={!workspace.rootPath}
                   data-testid="nav-workspace-menu-copy-path"
@@ -1475,7 +1475,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                   {t('nav.workspaces.actions.copyPath')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon glyph={FolderSearch} />}
+                  leading={<Icon glyph={FolderSearch} size="sm" />}
                   onClick={() => { void handleReveal(); }}
                   disabled={isRemoteWorkspace(workspace)}
                   data-testid="nav-workspace-menu-reveal"
@@ -1484,14 +1484,14 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 </MenuItem>
                 <MenuSeparator />
                 <MenuItem
-                  leading={<Icon glyph={ListChecks} />}
+                  leading={<Icon glyph={ListChecks} size="sm" />}
                   onClick={handleOpenSessionBatchModal}
                   data-testid="nav-workspace-menu-manage-sessions"
                 >
                   {t('nav.sessions.manage')}
                 </MenuItem>
                 <MenuItem
-                  leading={<Icon glyph={FolderOpen} />}
+                  leading={<Icon glyph={FolderOpen} size="sm" />}
                   tone="danger"
                   onClick={() => { void handleCloseWorkspace(); }}
                   data-testid="nav-workspace-menu-close"
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index bf14531f5a..3be4a2cd3b 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -377,8 +377,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 16px;
-    height: 16px;
+    width: var(--_nav-icon-size-prominent);
+    height: var(--_nav-icon-size-prominent);
     flex-shrink: 0;
     color: inherit;
     /* The row color already communicates inactive, hover, and active states.
@@ -1137,8 +1137,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 16px;
-    height: 16px;
+    width: var(--_nav-icon-size-prominent);
+    height: var(--_nav-icon-size-prominent);
     flex-shrink: 0;
     border-radius: 0;
     background: transparent;
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
index eccf295da6..dc0ad7efd3 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
@@ -68,8 +68,8 @@ describe('WorkspaceListSection layout styles', () => {
     expect(workspaceItem).toContain('gap: calc(var(--openbitfun-space-1) / 2);');
     expect(workspaceCard).toContain('max-width: 100%;');
     expect(workspaceCard).toContain('overflow: hidden;');
-    expect(workspaceIcon).toContain('width: 16px;');
-    expect(workspaceIcon).toContain('height: 16px;');
+    expect(workspaceIcon).toContain('width: var(--_nav-icon-size-prominent);');
+    expect(workspaceIcon).toContain('height: var(--_nav-icon-size-prominent);');
     expect(workspaceNameButton).toContain('flex: 0 1 auto;');
     expect(workspaceNameButton).toContain('overflow: hidden;');
     expect(workspaceNameButton).not.toContain('58px');
@@ -100,8 +100,8 @@ describe('WorkspaceListSection layout styles', () => {
     expect(assistantCollapseButton).toContain('width: 26px;');
     expect(assistantCollapseButton).toContain('min-height: 30px;');
     expect(assistantCollapseButton).toContain('padding: 0 0 0 4px;');
-    expect(assistantIcon).toContain('width: 16px;');
-    expect(assistantIcon).toContain('height: 16px;');
+    expect(assistantIcon).toContain('width: var(--_nav-icon-size-prominent);');
+    expect(assistantIcon).toContain('height: var(--_nav-icon-size-prominent);');
     expect(assistantIcon).toContain('color: inherit;');
     expect(assistantIcon).toContain('opacity: 1;');
     expect(assistantNameButton).toContain('flex: 1 1 0;');
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx
index 4cbbc26501..a7cf4a5325 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceProjectPermissionsDialog.tsx
@@ -422,7 +422,7 @@ export const WorkspaceProjectPermissionsDialog: React.FC<WorkspaceProjectPermiss
             loading={rulesSaving}
             disabled={!rulesValid || rulesRevision === null || isBusy}
             onClick={() => void handleSaveRules()}
-            leadingIcon={<Icon glyph={Save} />}
+            leadingIcon={<Icon glyph={Save} size="sm" />}
           >
             {t('projectPermissions.saveRules')}
           </Button>
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
index 3d1ca17100..cf0dc141ea 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceRelatedPathsDialog.tsx
@@ -319,7 +319,7 @@ export const WorkspaceRelatedPathsDialog: React.FC<WorkspaceRelatedPathsDialogPr
                       className="workspace-related-paths-dialog__select"
                       variant="outline"
                       size="sm"
-                      leadingIcon={<Icon glyph={FolderOpen} />}
+                      leadingIcon={<Icon glyph={FolderOpen} size="sm" />}
                       onClick={() =>
                         remoteWorkspace
                           ? setBrowsingIndex(index)
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
index f3bdc686f8..a41aeda104 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.tsx
@@ -458,7 +458,7 @@ const WorkspaceSessionBatchModal: React.FC<WorkspaceSessionBatchModalProps> = ({
           onClick={() => { void handleDeleteSelected(); }}
           disabled={!canSelectSessions || selectedCount === 0}
           loading={actionKind === 'delete'}
-          leadingIcon={<Icon name="delete" />}
+          leadingIcon={<Icon name="delete" size="sm" />}
         >
           {t('nav.sessions.deleteSelected')}
         </Button>
@@ -472,7 +472,7 @@ const WorkspaceSessionBatchModal: React.FC<WorkspaceSessionBatchModalProps> = ({
             onClick={() => { void handleArchiveSelected(); }}
             disabled={!canSelectSessions || selectedCount === 0}
             loading={actionKind === 'archive'}
-            leadingIcon={<Icon glyph={Archive} />}
+            leadingIcon={<Icon glyph={Archive} size="sm" />}
           >
             {t('nav.sessions.archiveSelected')}
           </Button>
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx
index aaebdb373e..e6db0e3984 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx
@@ -1,10 +1,20 @@
+import type { IconSize } from '@openbitfun/ui';
+
 export type ChatAppBrand = 'telegram' | 'feishu' | 'weixin';
 
 interface ChatAppBrandIconProps {
   app: ChatAppBrand;
-  size?: number;
+  size?: number | IconSize;
 }
 
+const ICON_TOKEN_SIZE: Record<IconSize, string> = {
+  '2xs': 'var(--openbitfun-control-icon-size2xs)',
+  xs: 'var(--openbitfun-control-icon-size-xs)',
+  sm: 'var(--openbitfun-control-icon-size-sm)',
+  md: 'var(--openbitfun-control-icon-size-md)',
+  lg: 'var(--openbitfun-control-icon-size-lg)',
+};
+
 /**
  * Monochrome contours of the actual chat-app marks. The SVGs intentionally
  * inherit color from the surrounding UI so they work in every
@@ -12,15 +22,17 @@ interface ChatAppBrandIconProps {
  * References: telegram.org/tour/screenshots, feishu.cn, and the CC0
  * simple-icons WeChat/Telegram vectors.
  */
-export const ChatAppBrandIcon = ({ app, size = 24 }: ChatAppBrandIconProps) => {
+export const ChatAppBrandIcon = ({ app, size = 'lg' }: ChatAppBrandIconProps) => {
+  const resolvedSize = typeof size === 'number' ? size : ICON_TOKEN_SIZE[size];
+
   if (app === 'telegram') {
     return (
       <svg
         aria-hidden="true"
         focusable="false"
-        height={size}
+        height={resolvedSize}
         viewBox="0 0 24 24"
-        width={size}
+        width={resolvedSize}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -36,9 +48,9 @@ export const ChatAppBrandIcon = ({ app, size = 24 }: ChatAppBrandIconProps) => {
       <svg
         aria-hidden="true"
         focusable="false"
-        height={size}
+        height={resolvedSize}
         viewBox="0 0 24 24"
-        width={size}
+        width={resolvedSize}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -61,9 +73,9 @@ export const ChatAppBrandIcon = ({ app, size = 24 }: ChatAppBrandIconProps) => {
     <svg
       aria-hidden="true"
       focusable="false"
-      height={size}
+      height={resolvedSize}
       viewBox="0 0 24 24"
-      width={size}
+      width={resolvedSize}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
diff --git a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
index 5c0e5b83b3..cbfe72cdfc 100644
--- a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
+++ b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
@@ -69,9 +69,9 @@ const NotificationButton: React.FC<NotificationButtonProps> = ({
       <MenuItem
         className={className || undefined}
         leading={activeNotification?.variant === 'loading' ? (
-          <LucideLoaderCircle width="14" height="14" stroke="currentColor" className="openbitfun-notification-btn__spinner" aria-hidden="true" />
+          <Icon glyph={LucideLoaderCircle} size="sm" className="openbitfun-notification-btn__spinner" aria-hidden="true" />
         ) : unreadCount > 0 ? (
-          <BellDot size={14} className="openbitfun-notification-btn__icon--has-message" aria-hidden="true" />
+          <Icon glyph={BellDot} size="sm" className="openbitfun-notification-btn__icon--has-message" aria-hidden="true" />
         ) : (
           <Icon name="bell" size="sm" aria-hidden="true" />
         )}
@@ -161,21 +161,22 @@ const NotificationButton: React.FC<NotificationButtonProps> = ({
       ) : navFooterHoverIconSwap ? (
         unreadCount > 0 ? (
           <span className="openbitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
-            <BellDot
-              size={15}
+            <Icon
+              glyph={BellDot}
+              size="sm"
               className="openbitfun-notification-btn__icon--has-message openbitfun-nav-panel__footer-btn-icon-swap-default"
             />
-            <BellRing size={15} className="openbitfun-nav-panel__footer-btn-icon-swap-hover" />
+            <Icon glyph={BellRing} size="sm" className="openbitfun-nav-panel__footer-btn-icon-swap-hover" />
           </span>
         ) : (
           <span className="openbitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
             <Icon name="bell" size="sm" className="openbitfun-nav-panel__footer-btn-icon-swap-default" />
-            <BellRing size={15} className="openbitfun-nav-panel__footer-btn-icon-swap-hover" />
+            <Icon glyph={BellRing} size="sm" className="openbitfun-nav-panel__footer-btn-icon-swap-hover" />
           </span>
         )
       ) : (
         unreadCount > 0
-          ? <BellDot size={14} className="openbitfun-notification-btn__icon--has-message" />
+          ? <Icon glyph={BellDot} size="sm" className="openbitfun-notification-btn__icon--has-message" />
           : <Icon name="bell" size="sm" />
       )}
     </button>
diff --git a/src/web-ui/src/app/scenes/git/GitNav.tsx b/src/web-ui/src/app/scenes/git/GitNav.tsx
index fb9672d874..746db6e811 100644
--- a/src/web-ui/src/app/scenes/git/GitNav.tsx
+++ b/src/web-ui/src/app/scenes/git/GitNav.tsx
@@ -16,14 +16,14 @@ import { OverflowText,
   Tooltip,
 } from '@openbitfun/ui';
 import { useTranslation } from 'react-i18next';
-import { Layers2 } from 'lucide-react';
+import { Layers2, type LucideIcon } from 'lucide-react';
 import { useGitSceneStore, type GitSceneView } from './gitSceneStore';
 import { useGitState } from '../../../tools/git/hooks';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 
 import './GitNav.scss';
 
-const NAV_ITEMS: { id: GitSceneView; icon?: React.ElementType; labelKey: string }[] = [
+const NAV_ITEMS: { id: GitSceneView; icon?: LucideIcon; labelKey: string }[] = [
   { id: 'working-copy', labelKey: 'tabs.changes' },
   { id: 'branches', icon: Layers2, labelKey: 'tabs.branches' },
   { id: 'graph', icon: Layers2, labelKey: 'tabs.branchGraph' },
@@ -92,7 +92,7 @@ const GitNav: React.FC = () => {
               )}
               {behind > 0 && (
                 <span title={t('status.behind')}>
-                  <Icon name="arrow-down" size="lg" style={{ width: 10, height: 10 }} /> {behind}
+                  <Icon name="arrow-down" size="2xs" /> {behind}
                 </span>
               )}
             </div>
@@ -117,7 +117,7 @@ const GitNav: React.FC = () => {
           selected={activeView === id}
           leading={id === 'working-copy'
             ? <Icon name="git" size="sm" />
-            : ItemIcon ? <ItemIcon size={14} aria-hidden /> : undefined}
+            : ItemIcon ? <Icon glyph={ItemIcon} size="sm" /> : undefined}
           metadata={
             id === 'working-copy' && changeCount > 0 ? (
               <span className="openbitfun-git-scene-nav__item-badge">({changeCount})</span>
diff --git a/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
index d6c499e7a6..b72d5aa93b 100644
--- a/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
+++ b/src/web-ui/src/app/scenes/miniapps/utils/miniAppIcons.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, type IconName, type IconSource } from '@openbitfun/ui';
+import { Icon, type IconName, type IconSize, type IconSource } from '@openbitfun/ui';
 import codingFootprintShowcase from '@/assets/miniapps/showcases/coding-footprint.webp';
 import dailyDivinationShowcase from '@/assets/miniapps/showcases/daily-divination.webp';
 import gomokuShowcase from '@/assets/miniapps/showcases/gomoku.webp';
@@ -70,7 +70,7 @@ export function getMiniAppShowcaseAsset(id: string): string | undefined {
   return BUILTIN_MINI_APP_SHOWCASE_ASSETS[id];
 }
 
-export function renderMiniAppIcon(name: string, size = 28): React.ReactNode {
+export function renderMiniAppIcon(name: string, size: number | IconSize = 28): React.ReactNode {
   const key = name
     .split('-')
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
@@ -81,11 +81,14 @@ export function renderMiniAppIcon(name: string, size = 28): React.ReactNode {
     ? { name: catalogName }
     : { glyph: LucideGlyph ?? Box };
 
+  const style = typeof size === 'number' ? { width: size, height: size } : undefined;
+  const iconSize: IconSize = typeof size === 'number' ? 'lg' : size;
+
   return (
     <Icon
       {...iconSource}
-      size="lg"
-      style={{ width: size, height: size }}
+      size={iconSize}
+      style={style}
     />
   );
 }
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
index 2410be823d..9ad981a365 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
@@ -119,8 +119,12 @@
   }
 
   &__item {
-    // Match MainNav child rows: parent icon slot (22px) + row gap (8px).
-    padding-inline-start: calc(var(--openbitfun-layout-navigation-panel-item-padding-inline) + 30px);
+    // Match MainNav child rows: parent icon-button slot + row gap.
+    padding-inline-start: calc(
+      var(--openbitfun-layout-navigation-panel-item-padding-inline)
+      + var(--openbitfun-control-icon-button-xs-size)
+      + var(--openbitfun-space-2)
+    );
   }
 
   &__item-label {
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts b/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
index 0466ca7d8f..9d2b62c4ca 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
+++ b/src/web-ui/src/app/scenes/settings/SettingsNavTypography.test.ts
@@ -73,7 +73,10 @@ describe('SettingsNav typography and layout ownership', () => {
     expect(content.getPropertyValue('padding-inline-end')).toBe('var(--openbitfun-space-2)');
     expect(content.getPropertyValue('gap')).toBe('');
     expect(item.getPropertyValue('padding-inline-start')).toBe(
-      'calc(var(--openbitfun-layout-navigation-panel-item-padding-inline) + 30px)',
+      'calc(var(--openbitfun-layout-navigation-panel-item-padding-inline) + var(--openbitfun-control-icon-button-xs-size) + var(--openbitfun-space-2))',
+    );
+    expect(readSettingsNavStylesheet()).not.toContain(
+      'padding-inline-start: calc(var(--openbitfun-layout-navigation-panel-item-padding-inline) + 30px)',
     );
     expect(rules.some((rule) => rule.selectorText.includes('.openbitfun-settings-nav__category'))).toBe(false);
     expect(readSettingsNavStylesheet()).not.toContain('element-bg-soft');
diff --git a/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx b/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
index 67a565eed7..483c2a2aba 100644
--- a/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
+++ b/src/web-ui/src/infrastructure/design-system/IconUsageIntegration.test.tsx
@@ -38,7 +38,7 @@ describe('catalog icon consumer integration', () => {
   });
 
   it('uses catalog marks in navigation, the creative entry and string-based menus', () => {
-    expect(source('app/components/NavPanel/components/MiniAppEntry.tsx')).toContain('<Icon name="mini-app" size="md"');
+    expect(source('app/components/NavPanel/components/MiniAppEntry.tsx')).toContain('<Icon name="mini-app" size="sm"');
     expect(source('app/components/NavBar/NavBar.tsx')).toContain('<Icon name="sidebar-left"');
     const harnessSource = source('app/scenes/agents/components/AgentHarnessOverview.tsx');
     expect(harnessSource).toContain('HARNESS_PRESENTATION[id]');