feat(ui): Implement Phosphor icons for Brand update

[amandaye0h]

Description

What is the goal of this PR?

• This PR updates all component-library Icon assets used in the Mobile app as part of the wider Brand Migration.
• This isolates the change to local app/component-library SVGs so it can be decoupled from the MMDS package bump. Screens that import Icon from @metamask/design-system-react-native are unaffected until MMDS is published.
• Together with the MMDS Mobile icon update and the MMDS Extension icon update, all MetaMask icons should land on Phosphor.

This is an asset-only change: icon names, Icon.types.ts, Icon.assets.ts, and the Icon component API are unchanged.

What are the key improvements?

• Updated style: All in-use component-library icons are now mapped to corresponding variations in the Phosphor library.
• Backwards compatibility: Keeps the existing viewBox="0 0 24 24" spec (Phosphor 256-unit paths scaled via transform="scale(0.09375)") and fill="currentColor" so existing color/size APIs continue to work.
• No consumer API change. Icon names and currentColor inheritance are unchanged, so Mobile screens can pick up the new art without code changes.
• Fill pipeline: Every glyph is a filled path. No asset relies on stroke or on inheriting fill="none", because Icon spreads fill="currentColor" onto the root Svg and SVGO hoists per-element fill onto the parent group.

Details

101 icons were updated:

• Activity → pulse
• AddSquare → plus-square
• Add → plus
• Arrow2Down → arrow-down
• Arrow2Right → arrow-right
• Arrow2UpRight → arrow-up-right
• Arrow2Up → arrow-up
• ArrowDoubleRight → caret-double-right
• ArrowDown → arrow-down
• ArrowLeft → arrow-left
• ArrowRight → arrow-right
• ArrowUp → arrow-up
• AttachMoney → currency-dollar
• Bank → bank
• Bookmark → bookmark
• BuySell → arrows-left-right
• Calendar → calendar
• Camera → camera
• Card → credit-card
• Chart → chart-bar
• Check → check
• CircleX → x-circle
• ClockFilled → clock (fill)
• Clock → clock
• Close → x
• Connect → plugs-connected
• Copy → copy
• Danger → warning
• Data → database
• DragGrid → dots-six (now on the shared 24×24 viewBox)
• Edit → pencil-simple
• Error → warning-circle
• Explore → compass
• Export → export
• EyeSlash → eye-slash
• Eye → eye
• Filter → funnel
• Forest → tree
• FullCircle → circle (fill)
• Gas → gas-pump
• Global → globe
• Hardware → cpu
• Hierarchy → tree-structure
• HomeFilled → house (fill)
• Home → house
• Info → info
• Key → key
• Loading → spinner
• Location → map-pin
• Lock → lock
• Logout → sign-out
• MessageQuestion → chat-circle-dots
• Messages → chat-circle
• MoneyBag → money
• MoreHorizontal → dots-three
• MoreVertical → dots-three-vertical
• Notification → bell
• Plant → plant
• Plug → plug
• QrCode → qr-code
• Question → question
• Received → arrow-down-left (not the previous check-in-circle glyph; MMDS still maps Received → check-circle)
• Refresh → arrows-clockwise
• Scan → scan
• Search → magnifying-glass
• SecurityKey → lock-key
• SecurityTick → shield-check
• Send → paper-plane-tilt
• Setting → gear
• Share → share-network
• Snaps → puzzle-piece
• Sparkle → sparkle
• Speedometer → speedometer
• StarFilled → star (fill)
• SwapHorizontal → swap
• SwapVertical → arrows-down-up
• Telegram → telegram-logo
• ThumbDownFilled → thumbs-down (fill)
• ThumbDown → thumbs-down
• ThumbUpFilled → thumbs-up (fill)
• ThumbUp → thumbs-up
• Trash → trash
• TrendDown → trend-down
• TrendUp → trend-up
• Trophy → trophy
• UserCheck → user-check
• VerifiedFilled → seal-check (fill)
• Wallet → wallet
• Warning → warning

The following were redrawn in the Phosphor style and are not 1:1 originals from the Phosphor library: AfterHours, CheckBold, Confirmation, CopySuccess, Details, FaceId, LockSlash, MinusBold, Musd, MusdFilled, SecuritySearch, SnapsMobile.

SecuritySearch and SnapsMobile are composites, since Phosphor Regular has no shield-search or snaps-mobile equivalent. Both are filled geometry at Phosphor's 16-unit weight:

• SecuritySearch: Phosphor shield with a magnifying glass inside, sized and centred like shield-check's inner glyph, with 8-unit clearance from the shield's inner edge.
• SnapsMobile: Phosphor square frame with the cube outlined as capsules and round joins, preserving its previous shape.

Excluded from update: Apple retains the original filled Apple logo (not the Phosphor outline). MetamaskFoxFilled and MetamaskFoxOutline retain the original MetaMask fox brand art.

Unused / MMDS-only component-library assets were already removed on main (#35571).

Changelog

CHANGELOG entry: Updated component-library icons to Phosphor Regular glyphs

Related issues

Refs: MetaMask/metamask-design-system#1482
Refs: MetaMask/metamask-design-system#1475
Refs: #35571
Refs: DSYS-1084

Manual testing steps

Feature: Phosphor icons in component-library

  Background:
    Given the app is running on this branch
    And the user is signed in

  Scenario: screens that use component-library Icon show Phosphor glyphs
    When the user opens flows that import Icon from component-library
    Then icons such as Home, Wallet, Copy, Send, Received, Search, and Settings show the new Phosphor shapes
    And icons inherit the correct theme color via currentColor
    And there are no layout regressions in ButtonIcon, IconAlert, or dense UI

  Scenario: remapped and composite glyphs
    When the user opens screens that use Received, Chart, SecuritySearch, and SnapsMobile
    Then Received is an arrow-down-left, not a check-in-circle
    And SecuritySearch and SnapsMobile keep open interiors (no filled blobs)
    And Apple still matches the previous filled Apple logo
    And MetamaskFoxFilled and MetamaskFoxOutline still match the previous fox glyphs

  Scenario: screens that use MMDS Icon are unchanged by this PR
    When the user opens flows that import Icon from @metamask/design-system-react-native
    Then those icons still come from the installed design-system package
    And they are not expected to change until MMDS is bumped

Spot-check notes (same as the MMDS PRs):

1. Confirm icons inherit currentColor / theme color at multiple sizes
2. Diff a few icons against Phosphor source to confirm Regular vs fill weight
3. Pay extra attention to approximate mappings: Received, Chart, SecuritySearch, SnapsMobile, DragGrid
4. Confirm Apple still matches the previous (non-Phosphor) filled glyph

Screenshots/Recordings

Before

ScreenRecording_09-08-2026.18-15-37_1.MP4

After

Screen.Recording.2026-09-08.at.5.29.19.PM.mov

ScreenRecording_09-08-2026.18-04-40_1.MP4

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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

Low Risk
Asset-only visual refresh with no API or logic changes; main risk is subtle UI/layout or glyph-recognition differences across many screens.

Overview
Replaces ~101 component-library Icon SVG assets with Phosphor Regular–style glyphs as part of the brand migration, without changing icon names, Icon APIs, or TypeScript wiring.

Each file now uses a consistent pattern: viewBox="0 0 24 24", root fill="currentColor", and Phosphor 256-unit paths scaled via transform="scale(0.09375)" so existing size and theme coloring keep working. Most icons are direct Phosphor mappings; a smaller set (e.g. Received, SecuritySearch, SnapsMobile, Musd) are custom or composite redraws. DragGrid moves from a narrow 10×24 viewBox to the shared 24×24 canvas.

Apple, MetamaskFoxFilled, and MetamaskFoxOutline are untouched. Screens that import Icon from @metamask/design-system-react-native are out of scope until MMDS is bumped.

^{Reviewed by Cursor Bugbot for commit 45ebd88. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.68%. Comparing base (177fd14) to head (32ed97e).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #35526    +/-   ##
========================================
  Coverage   85.67%   85.68%            
========================================
  Files        6732     6746    +14     
  Lines      186225   186352   +127     
  Branches    46167    46191    +24     
========================================
+ Hits       159557   159680   +123     
- Misses      16221    16222     +1     
- Partials    10447    10450     +3     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[georgewrmarshall]

As a precursor to this PR, maybe we could check whether any of these icons are no longer in use. We could then create a separate PR to remove all unused legacy icons, which should reduce the size of this PR and provide some bundle size benefits.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a78893d. Configure here.}

[amandaye0h]

@georgewrmarshall Removed mobile icons here: #35571. Will rebase this branch once #35571 is merged.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[georgewrmarshall]

LGTM! Left some non-blocking comments regarding alignment on MUSD icon and some of the more severe changes

[georgewrmarshall]

non-blocking: May need to check this one there could be a regression here depending on how it's used

[georgewrmarshall]

non-blocking: is this a standard iOS icon? If so we may want to keep it as is.

[georgewrmarshall]

non-blocking: Hmm this seems like the incorrect icon originally by the name it should have a slash through the lock 🤔 regardless swap looks good

[georgewrmarshall]

non-blocking: just calling out the differences between icons is quite severe and doesn't align with the name of the icon

[georgewrmarshall]

non-blocking: I would ask the @MetaMask/money-movement team about this change as it likely requires branding update on all assets including the MUSD token?

[georgewrmarshall]

non-blocking: See comment above regarding MUSD alignment