fix(ui): govern leftover icon sizes with ICON_SIZE

.github/workflows/ci.yml

@@ -100,6 +100,10 @@ jobs:
         if: steps.plan.outputs.code == 'true'
         run: npm run format:check
 
+      - name: Check icon sizes
+        if: steps.plan.outputs.code == 'true'
+        run: npm run check:icon-size
+
       - name: Build
         if: steps.plan.outputs.code == 'true'
         run: npm run build

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

@@ -7,7 +7,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,
@@ -204,9 +204,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)}
                       />
@@ -253,7 +253,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])}
                     />
@@ -274,8 +274,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/session-inspector-panel.tsx

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

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

@@ -1,6 +1,6 @@
 import { useEffect, useId, useState } from 'react';
 import { Badge, Link, List, ListItem } from '@astryxdesign/core';
-import { Sparkles } from '@maka/ui/icons';
+import { ICON_SIZE, Sparkles } from '@maka/ui/icons';
 import {
   Banner,
   Button,
@@ -174,7 +174,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

@@ -7,7 +7,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 {
@@ -148,7 +148,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))

package.json

@@ -59,6 +59,7 @@
     "package:windows-autoupdate-next": "node scripts/package-windows-autoupdate-next.mjs",
     "verify:windows-autoupdate": "node scripts/verify-windows-autoupdate.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",
@@ -75,6 +76,7 @@
     "@ai-sdk/provider-utils": "5.0.27",
     "@astryxdesign/cli": "0.4.0",
     "@astryxdesign/core": "0.4.0",
+    "@babel/parser": "^7.29.7",
     "@biomejs/biome": "2.5.6",
     "@types/node": "^26.1.2",
     "dugite": "3.2.2",

packages/ui/stories/icons.stories.tsx

@@ -67,7 +67,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>
         ))}