fix(ui): govern leftover icon sizes with ICON_SIZE

.github/workflows/ci.yml

@@ -95,7 +95,6 @@ jobs:
         with:
           node-version: '24'
           cache: npm
-
       - name: Select the release npm toolchain
         if: steps.plan.outputs.cli_package == 'true'
         run: npm install --global --no-audit --no-fund "$(node -p 'require("./package.json").packageManager')"
@@ -151,6 +150,10 @@ jobs:
         if: steps.plan.outputs.code == 'true' || steps.plan.outputs.astryx_surface == 'true'
         run: npm run astryx:surface-inventory
 
+      - name: Check icon sizes
+        if: steps.plan.outputs.code == 'true'
+        run: npm run check:icon-size
+
       - name: Build
         if: steps.plan.outputs.code == 'true' || steps.plan.outputs.cli_package == 'true' || steps.plan.outputs.release_contract == 'true'
         run: npm run build

apps/desktop/src/renderer/features/workbar/tools/inspector/session-inspector-panel.tsx

@@ -639,7 +639,7 @@ function StepRow(props: {
             <Button
               variant="ghost"
               size="sm"
-              icon={<Copy size={14} aria-hidden="true" />}
+              icon={<Copy size={ICON_SIZE.control} aria-hidden="true" />}
               label={`${copy.copyPricingKey}: ${pricingKey}`}
               onClick={() => {
                 void props.onCopyPricingKey(pricingKey);

apps/desktop/src/renderer/remote-project-directory-dialog.tsx

@@ -26,7 +26,7 @@ import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
 import { HStack } from '@astryxdesign/core/Stack';
 import { Text } from '@astryxdesign/core/Text';
 import { useUiLocale } from '@maka/ui';
-import { Check, Eye, EyeOff, FolderOpen } from '@maka/ui/icons';
+import { ICON_SIZE, Check, Eye, EyeOff, FolderOpen } from '@maka/ui/icons';
 import type {
   DesktopProjectDirectoryEntry,
   DesktopProjectDirectoryRoot,
@@ -244,9 +244,9 @@ export function RemoteProjectDirectoryDialog(props: {
                       <DropdownMenuItem
                         key={candidate.id}
                         label={candidate.label}
-                        icon={<FolderOpen size={18} aria-hidden="true" />}
+                        icon={<FolderOpen size={ICON_SIZE.control} aria-hidden="true" />}
                         endContent={candidate.id === root?.id
-                          ? <Check size={18} aria-hidden="true" />
+                          ? <Check size={ICON_SIZE.control} aria-hidden="true" />
                           : undefined}
                         onClick={() => selectRoot(candidate)}
                       />
@@ -293,7 +293,7 @@ export function RemoteProjectDirectoryDialog(props: {
                       key={entry.name}
                       variant="ghost"
                       label={entry.name}
-                      icon={<FolderOpen size={18} aria-hidden="true" />}
+                      icon={<FolderOpen size={ICON_SIZE.control} aria-hidden="true" />}
                       isDisabled={registering}
                       onClick={() => navigate([...segments, entry.name])}
                     />
@@ -314,8 +314,8 @@ export function RemoteProjectDirectoryDialog(props: {
                   ? copy.remoteDirectoryHideHidden
                   : copy.remoteDirectoryShowHidden}
                 icon={showHidden
-                  ? <Eye size={18} aria-hidden="true" />
-                  : <EyeOff size={18} aria-hidden="true" />}
+                  ? <Eye size={ICON_SIZE.chrome} aria-hidden="true" />
+                  : <EyeOff size={ICON_SIZE.chrome} aria-hidden="true" />}
                 aria-pressed={showHidden}
                 isDisabled={registering}
                 onClick={() => setShowHidden((current) => !current)}

apps/desktop/src/renderer/settings/about-settings-page.tsx

@@ -20,7 +20,7 @@
 import { useEffect, useId, useState, type ReactNode } from 'react';
 import { Badge, Link, List, ListItem } from '@astryxdesign/core';
 import { Kbd } from '@astryxdesign/core/Kbd';
-import { Sparkles } from '@maka/ui/icons';
+import { ICON_SIZE, Sparkles } from '@maka/ui/icons';
 import {
   Banner,
   Button,
@@ -167,7 +167,7 @@ export function AboutSettingsPage(props: { onOpenKeyboardHelp?(): void }) {
           as_wrapper="div"
           className="settingsAboutHero"
           as="h2"
-          icon={<Sparkles size={30} /> /* 64% of the 48px plate, matching .providerLogo's fill */}
+          icon={<Sparkles size={ICON_SIZE.plate} /> /* plate glyph inside the About hero mark */}
           iconClassName="settingsAboutLogo"
           headingRowClassName="settingsAboutHeading"
           title="Maka"

apps/desktop/src/renderer/settings/request-customization-editor.tsx

@@ -26,7 +26,7 @@ import {
 } from '@maka/core/runtime-policy';
 import { type RequestHeaderUpdate } from '@maka/core/llm-connections';
 import { Button, IconButton, TextArea, TextInput } from '@maka/ui';
-import { Trash2 } from '@maka/ui/icons';
+import { ICON_SIZE, Trash2 } from '@maka/ui/icons';
 import { PasswordInput } from './password-input';
 
 export interface RequestHeaderDraft {
@@ -167,7 +167,7 @@ export function RequestHeadersEditor(props: {
               variant="ghost"
               size="sm"
               label={props.copy.removeHeader}
-              icon={<Trash2 size={16} aria-hidden="true" />}
+              icon={<Trash2 size={ICON_SIZE.chrome} aria-hidden="true" />}
               isDisabled={props.disabled}
               onClick={() =>
                 props.onHeadersChange(props.headers.filter(({ id }) => id !== header.id))

apps/desktop/src/renderer/work-board-panel.tsx

@@ -28,7 +28,7 @@ import type {
   WorkBoardListQuery,
   WorkBoardScope,
 } from '@maka/core/work-board';
-import { ListTodo } from '@maka/ui/icons';
+import { ICON_SIZE, ListTodo } from '@maka/ui/icons';
 import { useWorkBoard } from './use-work-board.js';
 import { getDesktopConversationCopy } from './locales/conversation-copy.js';
 
@@ -315,7 +315,7 @@ export function WorkBoardPanel(props: {
                 <EmptyState
                   isCompact
                   className="maka-work-board-empty"
-                  icon={<ListTodo size={24} aria-hidden="true" />}
+                  icon={<ListTodo size={ICON_SIZE.empty} aria-hidden="true" />}
                   title={copy.empty}
                 />
               ) : (

apps/desktop/stories/accessibility-runtime-surfaces.stories.tsx

@@ -330,9 +330,13 @@ export const RemoteProjectDirectory: Story = {
     await userEvent.keyboard('{Enter}');
     const dialog = await body.findByRole('dialog', { name: /Build Host/ });
     await userEvent.click(await within(dialog).findByRole('button', { name: 'maka-agent' }));
-    await expect(within(dialog).findByRole('button', { name: 'apps' })).resolves.toBeTruthy();
+    const directoryButton = await within(dialog).findByRole('button', { name: 'apps' });
+    await expect(directoryButton.querySelector('svg')).toHaveAttribute('width', '14');
+    await expect(directoryButton.querySelector('svg')).toHaveAttribute('height', '14');
     await userEvent.click(within(dialog).getByRole('button', { name: /显示隐藏/ }));
-    await expect(within(dialog).getByRole('button', { name: '不显示隐藏目录' })).toBeTruthy();
+    const hiddenButton = within(dialog).getByRole('button', { name: '不显示隐藏目录' });
+    await expect(hiddenButton.querySelector('svg')).toHaveAttribute('width', '16');
+    await expect(hiddenButton.querySelector('svg')).toHaveAttribute('height', '16');
     registerDirectory.mockClear();
     await userEvent.click(within(dialog).getByRole('button', { name: '添加此文件夹' }));
     await waitFor(() =>

apps/desktop/stories/session-workbar.stories.tsx

@@ -937,6 +937,15 @@ export const SideChat: Story = {
 export const Trace: Story = {
   decorators: [bridge({ trace: populatedTrace, context: populatedContext })],
   render: () => <Workbar tab="inspector" />,
+  play: async ({ canvasElement }) => {
+    await waitFor(() => {
+      const pricingKeyCopyIcon = canvasElement.querySelector(
+        '.maka-inspector-pricing-key button svg',
+      );
+      expect(pricingKeyCopyIcon).toHaveAttribute('width', '14');
+      expect(pricingKeyCopyIcon).toHaveAttribute('height', '14');
+    });
+  },
 };
 
 // Real path: resize the right workbar to its 320px floor while a failed turn

package.json

@@ -75,6 +75,7 @@
     "verify:windows-autoupdate": "node scripts/verify-windows-autoupdate.mjs",
     "verify:windows-installer-rollback": "node scripts/verify-windows-installer-rollback.mjs",
     "astryx:theme": "node scripts/build-astryx-theme.mjs",
+    "check:icon-size": "node --test scripts/check-icon-size.test.mjs && node scripts/check-icon-size.mjs",
     "astryx:surface-inventory": "node scripts/check-astryx-surface-inventory.mjs",
     "astryx:surface-inventory:write": "node scripts/generate-astryx-surface-inventory.mjs",
     "sync:model-metadata": "node scripts/sync-model-metadata.mjs",
@@ -92,6 +93,7 @@
     "@electron/asar": "3.4.1",
     "@astryxdesign/cli": "0.4.5",
     "@astryxdesign/core": "0.5.0",
+    "@babel/parser": "^7.29.7",
     "@biomejs/biome": "2.5.9",
     "@types/node": "^26.2.0",
     "esbuild": "^0.28.1",

packages/ui/stories/icons.stories.tsx

@@ -86,7 +86,7 @@ export const LucideIcons: Story = {
               textAlign: 'center',
             }}
           >
-            <Comp size={20} />
+            <Comp size={Icons.ICON_SIZE.empty} />
             <code style={{ color: 'var(--foreground-secondary)', fontSize: 10, wordBreak: 'break-word' }}>{name}</code>
           </div>
         ))}