feat: Update MMDS Extension icons to Phosphor - #1482
Merged
Merged
Conversation
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
amandaye0h
marked this pull request as ready for review
September 4, 2026 10:05
Contributor
There was a problem hiding this comment.
Not sure we want to update the apple logo?
Contributor
Author
There was a problem hiding this comment.
I updated it to preserve the original svg so there should be no visual change
georgewrmarshall
left a comment
georgewrmarshall
left a comment
Contributor
There was a problem hiding this comment.
Looking good! Some of the updates may need review, like the apple logo and candles. Also not sure what the difference is between mobile and extension PRs? The icon component uses the same icons across both react and react native?
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
This was referenced Sep 8, 2026
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
6 tasks
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
❌ 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 b62e0b7. Configure here.
| @@ -1 +1 @@ | |||
| <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.4 21c-1.51667 0-2.79583-.5208-3.8375-1.5625s-1.5625-2.3208-1.5625-3.8375c0-.6333.10833-1.25.325-1.85s.525-1.1417.925-1.625l3.55-4.275-2.425-4.85h13.25l-2.425 4.85 3.55 4.275c.4.4833.7083 1.025.925 1.625s.325 1.2167.325 1.85c0 1.5167-.525 2.7958-1.575 3.8375s-2.325 1.5625-3.825 1.5625zm3.6-5c-.55 0-1.0208-.1958-1.4125-.5875s-.5875-.8625-.5875-1.4125.1958-1.0208.5875-1.4125.8625-.5875 1.4125-.5875 1.0208.1958 1.4125.5875.5875.8625.5875 1.4125-.1958 1.0208-.5875 1.4125-.8625.5875-1.4125.5875zm-2.375-9h4.75l1-2h-6.75zm-1.225 12h7.2c.95 0 1.7542-.3292 2.4125-.9875s.9875-1.4625.9875-2.4125c0-.4-.0708-.7875-.2125-1.1625s-.3375-.7125-.5875-1.0125l-3.675-4.425h-5.025l-3.7 4.4c-.25.3-.44583.6417-.5875 1.025s-.2125.775-.2125 1.175c0 .95.32917 1.7542.9875 2.4125s1.4625.9875 2.4125.9875z"/></svg> No newline at end of file | |||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><g transform="scale(0.09375)"><path d="M128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152ZM240,56H16a8,8,0,0,0-8,8V192a8,8,0,0,0,8,8H240a8,8,0,0,0,8-8V64A8,8,0,0,0,240,56ZM193.65,184H62.35A56.78,56.78,0,0,0,24,145.65v-35.3A56.78,56.78,0,0,0,62.35,72h131.3A56.78,56.78,0,0,0,232,110.35v35.3A56.78,56.78,0,0,0,193.65,184ZM232,93.37A40.81,40.81,0,0,1,210.63,72H232ZM45.37,72A40.81,40.81,0,0,1,24,93.37V72ZM24,162.63A40.81,40.81,0,0,1,45.37,184H24ZM210.63,184A40.81,40.81,0,0,1,232,162.63V184Z"/></g></svg> | |||
Contributor
There was a problem hiding this comment.
Cash and MoneyBag icons identical
Medium Severity
money-bag.svg now uses the same Phosphor money path as cash.svg, so IconName.MoneyBag and IconName.Cash render identically. Cash is documented as mapping to money; MoneyBag was a bag glyph and is not listed as sharing that mapping.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit b62e0b7. Configure here.
Replace 30 icon glyphs with Phosphor equivalents across shared SVGs, React components, and React Native assets. Co-authored-by: Cursor <cursoragent@cursor.com>
The Phosphor icon update replaced candlestick-filled with a presentation-chart glyph by mistake. Use the Phosphor candlestick-fill art instead, and restore the AppleLogo and Bridge glyphs that preceded the Phosphor update. Co-authored-by: Cursor <cursoragent@cursor.com>
Cover nine icons that were in neither the mobile nor the extension Phosphor set: ClockFilled, FullCircle, Home, HomeFilled, MessageQuestion, Messages, MusdFilled, Plug, and Snaps. MessageQuestion has no single Phosphor equivalent, so it composes chat-centered with the question glyph inset. Co-authored-by: Cursor <cursoragent@cursor.com>
amandaye0h
force-pushed
the
phosphor/update-extension
branch
from
September 8, 2026 09:54
b62e0b7 to
87b1759
Compare
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
Keeps the original shield-plus-countdown motif instead of reusing shield-check, which SecurityTick already maps to. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
georgewrmarshall
left a comment
georgewrmarshall
left a comment
Contributor
There was a problem hiding this comment.
Looking good! I think there are a couple we'd need to check with internal teams for Money and Snaps
Contributor
There was a problem hiding this comment.
I think this icon is specific to MUSD so we may want to revert this update? Maybe check with @thatsjustthewayitis
Contributor
There was a problem hiding this comment.
This might be another custom branded icon that we should check with the snaps team
Contributor
There was a problem hiding this comment.
Is this a money team branded icon? cc @thatsjustthewayitis
georgewrmarshall
approved these changes
Sep 8, 2026
georgewrmarshall
left a comment
georgewrmarshall
left a comment
Contributor
There was a problem hiding this comment.
Approving and can be merged once we are happy with testing builds.
georgewrmarshall
approved these changes
Sep 8, 2026
georgewrmarshall
left a comment
georgewrmarshall
left a comment
Contributor
There was a problem hiding this comment.
Approving and can be merged when we are confident with testing changes
amandaye0h
added a commit
that referenced
this pull request
Sep 8, 2026
## **Description** ### What is the goal of this PR? - This PR updates all icons used in the Mobile client as part of the wider Brand Migration. - This isolates all changes to Mobile-used icons so the updates can be decoupled from Extension updates. These icons are the set commonly used in the Mobile codebase, so this PR in theory is not a blocker to shipping Extension-only icon changes. - Together with this [Extension update](#1482), all MMDS icons should be updated. ### What are the key improvements? - **Updated style**: All icons are now mapped to corresponding variations in [the Phosphor library](https://phosphoricons.com/) - **Backwards compatibility**: Keeps the existing `viewBox="0 0 24 24"` spec (Phosphor paths scaled via `transform`) and `currentColor` fills so existing color/size APIs continue to work. - **No consumer API change.** Icon names, `viewBox`, and `currentColor` inheritance are unchanged, so Extension and Mobile can pick up the new art without code changes. ### Details 132 icons were updated: - Activity → `pulse` - Add → `plus` - AddCircle → `plus-circle` - AfterHours → `moon` - Ai → `star-four` - Apps → `dots-nine` - Arrow2Down → `arrow-down` - Arrow2Left → `arrow-left` - Arrow2Right → `arrow-right` - Arrow2Up → `arrow-up` - Arrow2UpRight → `arrow-up-right` - ArrowDown → `arrow-down` - ArrowLeft → `arrow-left` - ArrowRight → `arrow-right` - ArrowUp → `arrow-up` - AttachMoney → `currency-dollar` - Backspace → `backspace` - Bank → `bank` - Book → `book` - Bookmark → `bookmark` - Calendar → `calendar` - Camera → `camera` - Campaign → `megaphone` - Candlestick → `candlestick` - created in the Phosphor style, no Phosphor equivalent - Card → `credit-card` - Category → `squares-four` - Chart → `chart-line` - Check → `check` - CheckBold → `check` (bold) - created in the Phosphor style, no Phosphor equivalent - CircleX → `x-circle` - Clock → `clock` - Close → `x` - Code → `code` - Coin → `coin` - Collapse → `arrows-in-simple` - Confirmation → `check-circle` - Connect → `plugs-connected` - Copy → `copy` - CopySuccess → `copy` + check - created in the Phosphor style, no Phosphor equivalent - Customize → `sliders-horizontal` - Danger → `warning` - Data → `database` - Details → `file-text` - Diagram → `tree-structure` - Download → `download` - Edit → `pencil-simple` - Error → `warning-circle` - Ethereum → `currency-eth` - Exchange → `arrows-left-right` - Expand → `arrows-out` - Explore → `compass` - Export → `export` - Extension → `puzzle-piece` - Eye → `eye` - EyeSlash → `eye-slash` - FaceId → `scan` + face - created in the Phosphor style, no Phosphor equivalent - Filter → `funnel` - Fingerprint → `fingerprint` - Fire → `fire` - Flash → `lightning` - FlashFilled → `lightning` (fill) - Gas → `gas-pump` - Gift → `gift` - Global → `globe` - Hardware → `cpu` - Hierarchy → `tree-structure` - Image → `image` - Info → `info` - Loading → `spinner` - Lock → `lock` - LockSlash → `lock-slash` - created in the Phosphor style, no Phosphor equivalent - Logout → `sign-out` - Mail → `envelope` - Menu → `list` - Merge → `git-merge` - Minus → `minus` - MinusBold → `minus` (bold) - created in the Phosphor style, no Phosphor equivalent - Mobile → `device-mobile` - MoneyBag → `money` - MoreHorizontal → `dots-three` - MoreVertical → `dots-three-vertical` - Musd → `musd` - created in the Phosphor style, no Phosphor equivalent - Notification → `bell` - People → `users` - Plant → `plant` - Predictions → `predictions` - created in the Phosphor style, no Phosphor equivalent - QrCode → `qr-code` - Question → `question` - Received → `check-circle` - Refresh → `arrows-clockwise` - RemoveMinus → `minus-circle` - Rocket → `rocket` - Scan → `scan` - ScanBarcode → `barcode` - Search → `magnifying-glass` - Security → `lock-key` - SecurityKey → `lock-key` - SecurityTick → `shield-check` - SecuritySearch - `shield-search` - created in the Phosphor style, no Phosphor equivalent - Send → `paper-plane-tilt` - Setting → `gear` - Share → `share-network` - ShieldLock → `shield-lock` - created in the Phosphor style, no Phosphor equivalent - Sms → `chat-text` - Sparkle → `sparkle` - Speed → `gauge` - Speedometer → `speedometer` - Stake → `stake` - created in the Phosphor style, no Phosphor equivalent - Star → `star` - StarFilled → `star` (fill) - SwapHorizontal → `swap` - SwapVertical → `arrows-down-up` - Tag → `tag` - Telegram → `telegram-logo` - ThumbDown → `thumbs-down` - ThumbDownFilled → `thumbs-down` (fill) - ThumbUp → `thumbs-up` - ThumbUpFilled → `thumbs-up` (fill) - Tint → `drop` - Trash → `trash` - TrendDown → `trend-down` - TrendUp → `trend-up` - Trophy → `trophy` - Usb → `usb` - UserCheck → `user-check` - UserCircle → `user-circle` - UserCircleAdd → `user-circle-plus` - VerifiedFilled → `seal-check` (fill) - Wallet → `wallet` - Warning → `warning` - WifiOff → `wifi-slash` - X → `x` ## **Related issues** Related: MetaMask/metamask-mobile#35526 Related: #1481 Related: #1482 JIRA: https://consensyssoftware.atlassian.net/browse/DSYS-1084 ## **Manual testing steps** 1. Spot-check updated icons in React Storybook (`yarn storybook`) at multiple sizes and colors 2. Spot-check the same icons in React Native Storybook (`yarn storybook:ios` / `yarn storybook:android`) 3. Confirm icons still inherit `currentColor` / theme color correctly 4. Confirm no layout regressions (especially in ButtonIcon / IconAlert / dense UI) 5. Diff a few icons against Phosphor source to confirm the correct weight/variant was used 6. Pay extra attention to remapped glyphs (Coin, Collapse, Security, Stake, Exchange, Diagram, Download, Merge, ShieldLock, Musd) Test this build: Field | Value -- | -- Source branch | preview/phosphor-icons Build name | main-rc Build commit SHA | 3392c214153905cec5dfd180f197f0a091470047 Build version | 8.11.0 Build number | 6777 TestFlight group | MetaMask BETA & Release Candidates Workflow branch ref | main ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** ### **After** https://github.com/user-attachments/assets/09281a9c-1223-4f98-a631-59170e381060 https://github.com/user-attachments/assets/eaaf4c13-6502-4d7d-bd0b-a0b7638e1b98 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/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](https://jsdoc.app/) format if applicable ## **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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Asset-only updates with preserved viewBox and currentColor; risk is mainly visual regression or mis-mapped glyphs, not runtime or security impact. > > **Overview** > Replaces the **Mobile-focused icon set** in `design-system-react-native` and matching **React icon components** with Phosphor-based artwork for brand migration, without changing icon names or the `Icon` API. > > Each SVG now uses **`viewBox="0 0 24 24"`**, **`fill="currentColor"`**, and Phosphor paths wrapped in **`transform="scale(0.09375)"`** so existing size and color props keep working. Legacy custom path data is swapped for Phosphor equivalents (or custom Phosphor-style glyphs where no library icon exists, e.g. candlestick, musd, stake). > > Reviewers should **spot-check visual parity** in Storybook and dense UI (buttons, alerts)—glyph weight and silhouette change even though wiring is unchanged. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 48f6596. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
amandaye0h
added a commit
that referenced
this pull request
Sep 8, 2026
## **Description** ### What is the goal of this PR? - This PR updates the remaining shared icons that were in neither the Mobile nor Extension Phosphor PRs, as part of the wider Brand Migration. They are needed when call sites in the clients are replaced with MMDS icons. - Together with the [Mobile update](#1475) and [Extension update](#1482), all MMDS icons should be updated except the brand and logo glyphs we are keeping as-is. - `IconName.Accessibility` is also removed. It was unused in MetaMask extension and mobile product UI. ### What are the key improvements? - **Updated style**: All icons are now mapped to corresponding variations in [the Phosphor library](https://phosphoricons.com/) - **Backwards compatibility**: Keeps the existing `viewBox="0 0 24 24"` spec (Phosphor paths scaled via `transform`) and `currentColor` fills so existing color/size APIs continue to work. - **No consumer API change for updated icons.** Icon names, `viewBox`, and `currentColor` inheritance are unchanged, so Extension and Mobile can pick up the new art without code changes. Removing `Accessibility` is a breaking change for any remaining `IconName.Accessibility` usage. ### Details 9 icons were updated: - AddSquare → `plus-square` - ArrowDoubleRight → `caret-double-right` - BuySell → `plus-minus` - Calculator → `calculator` - Forest → `tree-evergreen` - Key → `key` - Location → `map-pin` - Receive → `qr-code` - SnapsMobile → `cube-focus` Removed: - Accessibility — unused; see package `MIGRATION.md` files Excluded from update: `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` have been intentionally excluded to retain their original format. ## **Related issues** Related: #1475 Related: #1482 Related: #1481 JIRA: https://consensyssoftware.atlassian.net/browse/DSYS-1084 ## **Manual testing steps** 1. Spot-check updated icons in React Storybook (`yarn storybook`) at multiple sizes and colors 2. Spot-check the same icons in React Native Storybook (`yarn storybook:ios` / `yarn storybook:android`) 3. Confirm icons still inherit `currentColor` / theme color correctly 4. Confirm no layout regressions (especially in ButtonIcon / IconAlert / dense UI) 5. Diff a few icons against Phosphor source to confirm the correct weight/variant was used 6. Pay extra attention to remapped glyphs (BuySell, Forest, Receive, SnapsMobile) 7. Confirm AppleLogo, Bridge, and MetamaskFoxOutline still match the previous (non-Phosphor) glyphs 8. Confirm Accessibility no longer appears in the Icon gallery ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** ### **After** https://github.com/user-attachments/assets/eaa4f809-0fdf-46ed-8440-40c8371bc5d3 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/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](https://jsdoc.app/) format if applicable ## **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. Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor <cursoragent@cursor.com>
georgewrmarshall
pushed a commit
that referenced
this pull request
Sep 8, 2026
## Release 65.0.0 This release updates the remaining MMDS `Icon` artwork to Phosphor-based glyphs for the brand migration. Icon names, `viewBox`, and `currentColor` are unchanged, so Extension and Mobile can pick up the new art without code changes. Includes [#1475](#1475) (mobile-used icons), [#1482](#1482) (extension-used icons), and [#1493](#1493) (remaining shared icons). `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` are unchanged. ### 📦 Package Versions - `@metamask/design-system-shared`: **0.36.0** - `@metamask/design-system-react`: **0.40.0** - `@metamask/design-system-react-native`: **0.44.0** ### 🔄 Shared Type Updates (0.36.0) #### Changed ([#1475](#1475), [#1482](#1482), [#1493](#1493)) **What Changed:** - Updated shared `Icon` artwork to Phosphor-based glyphs for the brand migration - Existing `IconName` values, `viewBox="0 0 24 24"`, and `currentColor` fills are unchanged - `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` are unchanged - Bumped `@metamask/utils` from `^11.12.0` to `^11.12.1` ([#1492](#1492)) **Impact:** - Consumers will see Phosphor silhouettes and weights in `Icon` without API changes - React and React Native should bump shared in the same upgrade ### 🌐 React Web Updates (0.40.0) #### Changed - Updated `Icon` artwork to Phosphor-based glyphs for the brand migration, keeping existing `IconName` values, `viewBox="0 0 24 24"`, and `currentColor` fills ([#1475](#1475), [#1482](#1482), [#1493](#1493)) - `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` are unchanged - Bumped `@metamask/utils` from `^11.12.0` to `^11.12.1` ([#1492](#1492)) ### 📱 React Native Updates (0.44.0) #### Changed - Updated `Icon` artwork to Phosphor-based glyphs for the brand migration, keeping existing `IconName` values, `viewBox="0 0 24 24"`, and `currentColor` fills ([#1475](#1475), [#1482](#1482), [#1493](#1493)) - `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` are unchanged - Bumped `@metamask/utils` from `^11.12.0` to `^11.12.1` ([#1492](#1492)) ###⚠️ Breaking Changes None. This is a visual update only; `IconName` and the `Icon` API are unchanged. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (`0.35.0 → 0.36.0`) — Phosphor icon artwork (pre-1.0) - [x] design-system-react: minor (`0.39.0 → 0.40.0`) — Phosphor icon artwork (pre-1.0) - [x] design-system-react-native: minor (`0.43.0 → 0.44.0`) — Phosphor icon artwork (pre-1.0) - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've reviewed the [Release Workflow](./.cursor/rules/release-workflow.md) cursor rule - [x] All tests pass (`yarn build && yarn test && yarn lint`) - [x] Changelog validation passes (`yarn changelog:validate`) ## **Pre-merge reviewer checklist** - [ ] I've reviewed the [Reviewing Release PRs](./docs/reviewing-release-prs.md) guide - [ ] Package versions follow semantic versioning - [ ] Changelog entries are consumer-facing (not commit message regurgitation) - [ ] Breaking changes are documented in MIGRATION.md with examples - [ ] All unreleased changes are accounted for in changelogs Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor <cursoragent@cursor.com>
4 of 7 tasks
pull Bot
pushed a commit
to Reality2byte/metamask-extension
that referenced
this pull request
Sep 8, 2026
## **Description** Updates local component-library icon assets (`app/images/icons`) to Phosphor as part of brand migration. Names, `IconName`, and the `Icon` API are unchanged. MMDS `Icon` usage is unaffected until that package is bumped. 85 of 88 icons are remapped. After design review, **Accessibility**, **Send**, and **Bridge** keep the previous art. Updated icons use filled Phosphor paths in `viewBox="0 0 24 24"` (`scale(0.09375)` from 256) and `fill="currentColor"` so size, color, and `mask-image` keep working. Where a matching name exists in MetaMask/metamask-mobile#35526, the asset matches that PR except for the three unchanged icons. **Unchanged** * Accessibility — previous silhouette (not `person-arms-spread`) * Send — previous paper plane (not `paper-plane-tilt`) * Bridge — previous two-node arch (not `bridge`) **Remapped after review** * Book → `book-open` * Coin → `currency-circle-dollar` * Collapse → `arrows-in-simple` * Expand → `arrows-out-simple` * Save → `bookmark-simple` * Security → `shield` (no longer shares `lock-key` with SecurityKey) **Other mappings** * Add → `plus` * AddSquare → `plus-square` * Arrow2Down → `arrow-down` * Arrow2Right → `arrow-right` * Arrow2Up → `arrow-up` * Arrow2UpRight → `arrow-up-right` * ArrowDown / ArrowLeft / ArrowRight / ArrowUp → carets * Ban → `prohibit` * Bank → `bank` * Bookmark → `bookmark` * Calculator → `calculator` * Card → `credit-card` * Check → `check` * CheckBold → `check` (bold) * CircleX → `x-circle` * Clock → `clock` * Close → `x` * Confirmation → `check-circle` * Connect → `wifi-high` * Copy → `copy` * CopySuccess → `check-square-offset` * Customize → `sliders-horizontal` * Danger → `warning` (triangle) * DocumentCode → `file-code` * Dollar → `currency-dollar` * Download → `download` * Edit → `pencil-simple` * Ethereum → `currency-eth` * Explore → `compass` * Export → `export` * Eye → `eye` * EyeSlash → `eye-slash` * Filter → `funnel-simple` * Flash → `lightning` * FullCircle → `circle` * Gas → `gas-pump` * Global → `globe` * GlobalSearch / Search → `magnifying-glass` * Hierarchy → `tree-view` * Home → `house` * Info → `info` * Key → `key` * Link → `link` * Loading → `spinner` * Lock → `lock` * Logout → `sign-out` * Menu → `list` * Messages → `chats` * MinusBold → `minus` (bold) * MoreVertical → `dots-three-vertical` * Notification → `bell` * ProgrammingArrows → `git-diff` * Question → `question` * Received → `arrow-down-left` * Refresh → `arrows-clockwise` * Scan → `scan` * ScanBarcode → `barcode` * SecurityKey → `lock-key` * SecuritySearch → custom filled shield + magnifier (same as MMDS MetaMask#1482 / mobile MetaMask#35526; Phosphor has no equivalent) * SecurityTick → `shield-check` * Setting → `gear` * Snaps → `cube` * Speedometer → `speedometer` * Stake → `plant` * SwapHorizontal → `arrows-left-right` * SwapVertical → `arrows-down-up` * Trash → `trash` * Upload → `upload-simple` * Usb → `usb` * UserCircleAdd → `user-circle-plus` * UserCircleRemove → `user-circle-minus` * VerifiedFilled → `seal-check` (fill) * Wallet → `wallet` * Warning → `warning-circle` * Wifi → `wifi-high` (same as Connect) `Arrow2*` stay full arrows; `ArrowDown`/`Left`/`Right`/`Up` stay carets. ## **Changelog** CHANGELOG entry: Updated icons to the new Phosphor icon set ## **Related issues** Refs: MetaMask/metamask-mobile#35526 Refs: MetaMask/metamask-design-system#1482 Refs: MetaMask/metamask-design-system#1475 Refs: DSYS-1084 ## **Manual testing steps** 1. Run the extension from this branch and unlock the wallet. 2. Check home/header/tab-bar/token-list icons for Phosphor shapes. Confirm Send still uses the previous paper plane. 3. Open the global menu and Settings and scan icons at small sizes. 4. Toggle light/dark theme and confirm icons inherit the correct color. 5. On a confirmation/banner, confirm Danger (triangle) vs Warning (circle) stay distinct. 6. Check dense UI (`ButtonIcon`, `AvatarIcon`, `BannerAlert`, `PickerNetwork`) for layout regressions. 7. Confirm chevrons (`ArrowLeft`/`Right`/`Down`/`Up`) are not confused with `Arrow2*` full arrows. 8. Spot-check remaps (Book open, Coin, Collapse/Expand, Save bookmark, Security shield), unchanged icons (Accessibility, Send, Bridge), and SecuritySearch. 9. Confirm `@metamask/design-system-react` icons are unchanged. ## **Screenshots/Recordings** ### **Before** ### **After** https://github.com/user-attachments/assets/059472be-70e3-40ac-bbed-5bce2c262a8f ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Asset-only SVG swaps with stable icon names and sizing; main risk is visual/regression in dense UI, not logic or security. > > **Overview** > Replaces **85** local component-library SVGs under `app/images/icons` with **Phosphor-based** artwork for the Extension brand migration, without changing `IconName`, paths, or the `Icon` API. > > Each updated file swaps the old single-path glyph for Phosphor geometry scaled with `transform="scale(0.09375)"`, keeps `viewBox="0 0 24 24"`, and adds **`fill="currentColor"`** so theme colors and the existing `mask-image` rendering still work. Several icons **change meaning visually** (e.g. carets vs full arrows, `Save` → bookmark-simple, `Danger`/`Warning` shapes) while names stay the same. > > **Accessibility**, **Send**, and **Bridge** are intentionally **not** in this diff. Surfaces using `@metamask/design-system-react` `Icon` are unchanged until MMDS ships matching assets. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit e930dd1. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
pull Bot
pushed a commit
to Reality2byte/metamask-mobile
that referenced
this pull request
Sep 8, 2026
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.
In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->
<!--
mms-check directive vocabulary — read by
.github/scripts/shared/pr-template-checks.ts
at module load to build the validation plan. Directives are invisible in
rendered
markdown and must NOT be removed or edited without updating the
validator registry.
type=text Section must contain non-placeholder prose.
type=changelog Section must have a valid CHANGELOG entry: line.
type=issue-link Section must have a Fixes:/Closes:/Refs: line with a
value.
type=manual-testing Section must have real testing steps or an explicit
N/A.
type=screenshot Section must have evidence (image/URL) or an explicit
N/A.
type=checklist Section must have all checkboxes consciously checked.
required=true|false Whether a missing/invalid section runs the validator
at all.
blocking=true|false Whether a failure of this check fails the CI
workflow.
Default: false — failures are shown as warnings in the sticky
comment but do not block the PR.
Sections without a directive are checked for structural presence only.
-->
## **Description**
<!-- mms-check: type=text required=true -->
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
### 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](MetaMask/metamask-design-system#1475)
and the [MMDS Extension icon
update](MetaMask/metamask-design-system#1482),
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](https://phosphoricons.com/).
- **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`
([MetaMask#35571](MetaMask#35571)).
## **Changelog**
<!-- mms-check: type=changelog required=true blocking=true -->
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry: Updated component-library icons to Phosphor Regular
glyphs
## **Related issues**
<!-- mms-check: type=issue-link required=true -->
Refs: MetaMask/metamask-design-system#1482
Refs: MetaMask/metamask-design-system#1475
Refs: MetaMask#35571
Refs: DSYS-1084
## **Manual testing steps**
<!-- mms-check: type=manual-testing required=true -->
```gherkin
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**
<!-- mms-check: type=screenshot required=true -->
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
https://github.com/user-attachments/assets/717e4145-3f97-4df4-a4a2-595f30196e6a
### **After**
https://github.com/user-attachments/assets/b29c3ef1-5221-443c-9a5b-340f959f5047
https://github.com/user-attachments/assets/eaaf4c13-6502-4d7d-bd0b-a0b7638e1b98
## **Pre-merge author checklist**
<!-- mms-check: type=checklist required=true -->
<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.
Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
#### Performance checks (if applicable)
- [x] I've tested on Android
- Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example
For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).
## **Pre-merge reviewer checklist**
<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->
- [ ] 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.
<!-- Generated with the help of the pr-description AI skill -->
<!-- CURSOR_SUMMARY -->
---
> [!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.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
45ebd88. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
pull Bot
pushed a commit
to firas9941/metamask-extension
that referenced
this pull request
Sep 9, 2026
## **Description** Upgrades design system packages to align with the [v65.0.0 release](https://github.com/MetaMask/metamask-design-system/releases/tag/v65.0.0). **Packages upgraded:** - `@metamask/design-system-react`: `^0.39.0` → `^0.40.0` - `@metamask/design-system-shared`: `^0.35.0` → `^0.36.0` **Breaking changes addressed:** None — this is a visual-only minor release with no breaking API changes. `IconName` values, `viewBox="0 0 24 24"`, and `currentColor` fills are unchanged. **Change included in this release:** ### Icon: Phosphor artwork for brand migration Upstream updated remaining MMDS `Icon` artwork to Phosphor-based glyphs ([MetaMask#1475](MetaMask/metamask-design-system#1475), [MetaMask#1482](MetaMask/metamask-design-system#1482), [MetaMask#1493](MetaMask/metamask-design-system#1493)). `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` are unchanged. **Migration:** No application code changes required. Consumers using `Icon` from `@metamask/design-system-react` pick up the new artwork via the dependency bump. **Snapshot updates:** - None expected — icon names and layout metrics are unchanged. ### Other breaking changes (no code changes needed) - N/A — no breaking changes in this release for extension packages. **New additions available for future use:** - N/A — no new components or `IconName` values in this release. **Legacy component deprecations:** - No new deprecations added. ## **Changelog** CHANGELOG entry: Updated Icon artwork to the new Phosphor-based glyphs from the design system. ## **Related issues** Fixes: ## **Manual testing steps** Feature: Design system upgrade to v65.0.0 (Phosphor Icon artwork) Scenario: Core app functionality is unaffected Given I am on the main app screen When I navigate through the primary user flows (home, asset list, notifications, bridge) Then the UI renders correctly with no layout regressions Scenario: Icons render with updated Phosphor artwork Given I open views that use MMDS icons (home header, account menu, bottom navigation, Settings) When I inspect icons such as Send, Swap, Bridge, Settings, and notification glyphs Then icons render with Phosphor silhouettes and weights, using the same names and sizes as before Scenario: Unchanged brand icons still look the same Given I view surfaces that show Apple, Bridge, or MetaMask fox outline icons When I compare them to the previous design system version Then `AppleLogo`, `Bridge`, and `MetamaskFoxOutline` look unchanged ## **Screenshots/Recordings** ### **Before** N/A – dependency-only update with no application code changes ### **After** Visual-only Icon artwork update. Capture Storybook or in-app icons during review to confirm Phosphor silhouettes. ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Dependency-only visual icon update with snapshot test updates; no logic, auth, or transaction handling changes. > > **Overview** > Bumps **`@metamask/design-system-react`** to `^0.40.0` and **`@metamask/design-system-shared`** to `^0.36.0` so the extension picks up the design system’s **Phosphor-based `Icon` artwork** (same `IconName` API, sizes, and `viewBox`). > > There are **no application source changes**—only the version pins in `package.json` and **Jest snapshot refreshes** across bridge, onboarding, confirmations, ramps, app header, and related UI tests, where embedded SVG `path` data changed to match the new glyphs. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 850d8bd. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
4 of 6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
What is the goal of this PR?
What are the key improvements?
viewBox="0 0 24 24"spec (Phosphor paths scaled viatransform) andcurrentColorfills so existing color/size APIs continue to work.viewBox, andcurrentColorinheritance are unchanged, so Extension and Mobile can pick up the new art without code changes.Details
37 icons were updated:
prohibitphonecandlestick(fill) - this one was manually generated in the Phosphor style, technically not part of the original Phosphor library.moneyclock(fill)file-codechat-circle-dotsfileflagflaskcirclemagnifying-glasshousehouse(fill)push-pinlinktext-indentchat-centered+question— no single Phosphor equivalent, so the question glyph is inset into the message, in the same style as the other composites.chatsmonitorcurrency-dollar(fill)camera-slashpush-pin-simpleplugpicture-in-picturegit-difffloppy-diskshield-slashshield-checksidebar-simplecubepush-pin-simple-slashupload-simpleuser-circle-minusvideo-cameracursor-clickwifi-highExcluded from update:
AppleandBridgehave been intentionally excluded to retain their original format.Still on their original art after this PR:
Accessibility,AddSquare,ArrowDoubleRight,BuySell,Calculator,Forest,Key,Location,MetamaskFoxOutline,Receive, andSnapsMobile.Related issues
Related: #1475
JIRA: https://consensyssoftware.atlassian.net/browse/DSYS-1084
Manual testing steps
yarn storybook) at multiple sizes and colorsyarn storybook:ios/yarn storybook:android)currentColor/ theme color correctlyScreenshots/Recordings
Before
After
Screen.Recording.2026-09-08.at.6.13.32.PM.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Made with Cursor