apps/mobile/app/index.tsx

@@ -46,7 +46,7 @@ import {
   selectInitialSpace,
   selectSpace,
 } from "../lib/api";
-import { mobileShellIconSizes, mobileTokens, resolveMobileAppearance } from "../lib/appearance";
+import { mobileTokens, resolveMobileAppearance } from "../lib/appearance";
 import { autopilotSummary } from "../lib/autopilot";
 import { allowFocusPrompt, scheduleFocusPrompt } from "../lib/focus-prompt";
 import { t, useI18n } from "../lib/i18n";
@@ -461,7 +461,7 @@ export default function Home() {
             <NativeSymbol
               ios={activityMode ? "bell.fill" : "bell"}
               android={activityMode ? "notifications" : "notifications-outline"}
-              size={mobileShellIconSizes.md}
+              size={17}
               color={activityMode ? tokens.primaryForeground : tokens.foreground}
             />
           </CircleButton>
@@ -475,7 +475,7 @@ export default function Home() {
               })
             }
           >
-            <NativeSymbol ios="magnifyingglass" android="search" size={mobileShellIconSizes.md} />
+            <NativeSymbol ios="magnifyingglass" android="search" size={17} />
           </CircleButton>
           <CircleButton
             accessibilityLabel={t("Create")}
@@ -489,7 +489,7 @@ export default function Home() {
               ]);
             }}
           >
-            <NativeSymbol ios="plus" android="add" size={mobileShellIconSizes.lg} />
+            <NativeSymbol ios="plus" android="add" size={18} />
           </CircleButton>
         </View>
       </View>
@@ -610,11 +610,7 @@ export default function Home() {
                     }}
                     style={({ pressed }) => [styles.spaceActions, pressed && styles.rowPressed]}
                   >
-                    <NativeSymbol
-                      ios="ellipsis"
-                      android="ellipsis-horizontal"
-                      size={mobileShellIconSizes.lg}
-                    />
+                    <NativeSymbol ios="ellipsis" android="ellipsis-horizontal" size={20} />
                   </Pressable>
                 ) : null}
               </View>
@@ -1062,9 +1058,9 @@ function createHomeStyles() {
       gap: 12,
     },
     circleButton: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
+      width: 40,
+      height: 40,
+      borderRadius: 20,
       backgroundColor: native.fillPressed,
       alignItems: "center",
       justifyContent: "center",

apps/mobile/app/thread.tsx

@@ -101,7 +101,7 @@ import {
   shouldApplyMobileThreadRefresh,
   subscribeThread,
 } from "../lib/api";
-import { mobileShellIconSizes, mobileTokens } from "../lib/appearance";
+import { mobileTokens } from "../lib/appearance";
 import { type MobileArtifactTarget, openMobileArtifact } from "../lib/artifact-open";
 import { confirmDeleteBot } from "../lib/bot-lifecycle";
 import { cancelFocusPrompt, focusPromptThreadActive } from "../lib/focus-prompt";
@@ -585,7 +585,7 @@ function Thread() {
             <NativeSymbol
               ios="gearshape"
               android="settings-outline"
-              size={mobileShellIconSizes.lg}
+              size={21}
               color={tokens.foreground}
             />
           </Pressable>
@@ -594,7 +594,7 @@ function Thread() {
             <NativeSymbol
               ios="ellipsis"
               android="ellipsis-horizontal"
-              size={mobileShellIconSizes.lg}
+              size={21}
               color={tokens.foreground}
             />
           </Pressable>

apps/mobile/lib/appearance.ts

@@ -60,12 +60,6 @@ export function mobileTokens(
   return tokensForAppearance(resolveMobileAppearance(preference, scheme));
 }
 
-/** Header and inbox nav glyphs — aligned with web `--icon-*` scale (~25% larger). */
-export const mobileShellIconSizes = {
-  md: 22,
-  lg: 26,
-} as const;
-
 export function subscribeAppearance(listener: () => void): () => void {
   listeners.add(listener);
   return () => {

apps/web/src/pages/SettingsOverlay.tsx

@@ -195,7 +195,7 @@ export function SettingsOverlay({
                       : "text-muted-foreground hover:bg-accent hover:text-foreground"
                   }`}
                 >
-                  <Icon className="size-icon-sm shrink-0" strokeWidth={1.75} />
+                  <Icon className="size-4 shrink-0" strokeWidth={1.75} />
                   <span className="whitespace-nowrap">{item.label}</span>
                 </button>
               );

apps/web/src/pages/Shell.tsx

@@ -3232,7 +3232,7 @@ export function ShellPage() {
                   aria-label={t`Browser`}
                   onClick={() => setPanel(panel === "browser" ? null : "browser")}
                   data-active={panel === "browser" ? "" : undefined}
-                  className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
+                  className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
                 >
                   <Globe strokeWidth={1.7} className="text-foreground/75 size-icon-lg" />
                 </button>
@@ -3251,7 +3251,7 @@ export function ShellPage() {
                       }
                     }}
                     data-active={panel === "computer" ? "" : undefined}
-                    className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
+                    className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
                   >
                     <PanelRight strokeWidth={1.7} className="text-foreground/75 size-icon-lg" />
                   </button>

packages/ui-tokens/src/index.ts

@@ -165,9 +165,9 @@ export const scaleTokens = {
   lineHeightBody: "1.5",
   lineHeightReading: "1.65",
   lineHeightTight: "1.3",
-  iconSm: "1.25rem",
-  iconMd: "1.375rem",
-  iconLg: "1.5rem",
+  iconSm: "1rem",
+  iconMd: "1.125rem",
+  iconLg: "1.25rem",
   controlHeightXs: "1.75rem",
   controlHeightSm: "2.25rem",
   controlHeightMd: "2.5rem",

packages/ui-tokens/src/tokens.css

@@ -46,9 +46,9 @@
   --line-height-body: 1.5;
   --line-height-reading: 1.65;
   --line-height-tight: 1.3;
-  --icon-sm: 1.25rem;
-  --icon-md: 1.375rem;
-  --icon-lg: 1.5rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.125rem;
+  --icon-lg: 1.25rem;
   --control-height-xs: 1.75rem;
   --control-height-sm: 2.25rem;
   --control-height-md: 2.5rem;
@@ -108,9 +108,9 @@
   --line-height-body: 1.5;
   --line-height-reading: 1.65;
   --line-height-tight: 1.3;
-  --icon-sm: 1.25rem;
-  --icon-md: 1.375rem;
-  --icon-lg: 1.5rem;
+  --icon-sm: 1rem;
+  --icon-md: 1.125rem;
+  --icon-lg: 1.25rem;
   --control-height-xs: 1.75rem;
   --control-height-sm: 2.25rem;
   --control-height-md: 2.5rem;