fix: align ButtonIcon icon sizes and border radius with Figma design #873

georgewrmarshall · 2026-01-30T20:28:54Z

Description

This PR aligns the ButtonIcon component implementations in both React and React Native with the Figma design specifications. The icon sizes were misaligned across all three size variants, and the React Native implementation had an incorrect border radius for non-floating states.

What is the reason for the change?
The ButtonIcon component was using incorrect icon sizes that didn't match the Figma design. For example, ButtonIcon.Md was using Icon.Md (20px) when it should have been using Icon.Lg (24px) according to the Figma layers.

What is the improvement/solution?

Updated icon size mapping to match Figma specifications for all three size variants
Fixed React Native border radius to match the 4px specified in Figma (was 2px)
Updated tests to reflect the border radius change

Changes:

ButtonIcon.Sm now uses Icon.Md (20px instead of 16px)
ButtonIcon.Md now uses Icon.Lg (24px instead of 20px)
ButtonIcon.Lg now uses Icon.Xl (32px instead of 24px)
React Native non-floating border radius: 2px → 4px

Related issues

Fixes: N/A (design alignment with Figma)

Manual testing steps

View ButtonIcon components in Storybook for both React and React Native
Compare icon sizes in all three size variants (Sm, Md, Lg) with Figma design
Verify border radius matches Figma (4px for non-floating, fully rounded for floating)
Test all states: default, hover, pressed, disabled, floating, inverse

Screenshots/Recordings

Before

Icon sizes were smaller than designed:

Sm: 16px icon (should be 20px)
Md: 20px icon (should be 24px)
Lg: 24px icon (should be 32px)

React Native had 2px border radius (should be 4px)

beforemobile720.mov

before720.mov

After

Icon sizes match Figma:

Sm: 20px icon ✓
Md: 24px icon ✓
Lg: 32px icon ✓
border radius: 8px ✓

mobileafter720.mov

after720.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Medium Risk
Changes shared ButtonIcon visuals (icon size mapping and non-floating corner radius) in both React and React Native, which can cause widespread UI/layout diffs in consuming apps. No security or data-handling logic is affected.

Overview
Updates ButtonIcon in both design-system-react and design-system-react-native to better match design specs by increasing the rendered Icon size for each ButtonIconSize (Sm→Md, Md→Lg, Lg→Xl).

Also adjusts non-floating ButtonIcon styling to use larger rounding (rounded-lg instead of the previous smaller radius), and updates corresponding unit tests to assert the new Tailwind classes.

^{Written by Cursor Bugbot for commit 518c34d. This will update automatically on new commits. Configure here.}

github-actions · 2026-01-30T20:30:05Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-01-30T21:07:37Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.tsx

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.tsx

github-actions · 2026-01-30T21:20:31Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-01-30T21:53:44Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-01-30T22:20:18Z

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.constants.ts

-  [ButtonIconSize.Lg]: IconSize.Lg,
+  [ButtonIconSize.Sm]: IconSize.Md,
+  [ButtonIconSize.Md]: IconSize.Lg,
+  [ButtonIconSize.Lg]: IconSize.Xl,


Icon size mapping updated to align with Figma design. ButtonIcon.Sm now uses Icon.Md (20px), ButtonIcon.Md uses Icon.Lg (24px), and ButtonIcon.Lg uses Icon.Xl (32px). Previously icons were one size smaller than intended.

georgewrmarshall · 2026-01-30T22:20:32Z

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.tsx

      // Non-floating styles
      !isFloating && [
-        'rounded bg-transparent',
+        'rounded-lg bg-transparent',


Border radius updated from 4px to 8px for non-floating ButtonIcon variants. Floating variants remain fully rounded. This matches the updated Figma design specifications.

georgewrmarshall · 2026-01-30T22:20:44Z

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.constants.ts

-  [ButtonIconSize.Lg]: IconSize.Lg,
+  [ButtonIconSize.Sm]: IconSize.Md,
+  [ButtonIconSize.Md]: IconSize.Lg,
+  [ButtonIconSize.Lg]: IconSize.Xl,


Same icon size mapping update for React Native to maintain consistency across platforms. Verified against Figma design using Figma MCP.

georgewrmarshall · 2026-01-30T22:20:53Z

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.tsx

    items-center justify-center
    ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size]}
-    ${isFloating ? 'rounded-full' : 'rounded-sm'}
+    ${isFloating ? 'rounded-full' : 'rounded-lg'}


Border radius updated to 8px for React Native non-floating variants. This aligns with the React implementation and Figma design.

georgewrmarshall · 2026-01-30T22:21:05Z

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.test.tsx

      'h-8',
      'w-8',
-      'rounded',
+      'rounded-lg',


Test updated to expect rounded-lg instead of rounded to match the new 8px border radius for non-floating ButtonIcon.

georgewrmarshall · 2026-01-30T22:21:14Z

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.test.tsx

    const { result } = renderHook(() => useTailwind());
    const tw = result.current;
-    const expected = tw`items-center justify-center ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[ButtonIconSize.Md]} rounded-sm bg-transparent opacity-100`;
+    const expected = tw`items-center justify-center ${TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[ButtonIconSize.Md]} rounded-lg bg-transparent opacity-100`;


Test expectations updated throughout to reflect the new rounded-lg class for 8px border radius. All non-floating ButtonIcon tests now expect rounded-lg instead of rounded.

cursor bot reviewed Jan 30, 2026

View reviewed changes

packages/design-system-react-native/src/components/ButtonIcon/ButtonIcon.tsx Show resolved Hide resolved

packages/design-system-react/src/components/ButtonIcon/ButtonIcon.tsx Show resolved Hide resolved

fix: align button icon sizes and border radius

518c34d

georgewrmarshall marked this pull request as ready for review January 30, 2026 21:52

georgewrmarshall requested a review from a team as a code owner January 30, 2026 21:52

georgewrmarshall force-pushed the fix/icon-button-size branch from 63ad74e to 518c34d Compare January 30, 2026 21:52

georgewrmarshall self-assigned this Jan 30, 2026

georgewrmarshall commented Jan 30, 2026

View reviewed changes

brianacnguyen approved these changes Jan 30, 2026

View reviewed changes

georgewrmarshall merged commit 1dcb7c4 into main Jan 30, 2026
42 checks passed

georgewrmarshall deleted the fix/icon-button-size branch January 30, 2026 23:48

Uh oh!

fix: align ButtonIcon icon sizes and border radius with Figma design #873

fix: align ButtonIcon icon sizes and border radius with Figma design #873

Uh oh!

Conversation

georgewrmarshall commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes:

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 30, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Jan 30, 2026

📖 Storybook Preview

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 30, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Jan 30, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

georgewrmarshall commented Jan 30, 2026 •

edited

Loading