MetaMask / MetaMask/metamask-mobile
Token icons misaligned and inconsistent sizes in Send flow token selector
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
### What is this about?
When selecting a token in the Send flow, token icons are not aligned consistently. The Ethereum (ETH) icon renders larger than other tokens (e.g., LINK, MUSD), creating visual imbalance and a poor UX.
This inconsistent sizing makes the list look unpolished and may cause users to perceive that some tokens are more “important” than others purely due to icon size.
### Scenario
Open metamask-main-exp-2296.apk.
Go to Send.
Select a token, then switch to another token.
Observe the token selector list.
Expected Result:
All token icons should render at a consistent size.
Icons should be vertically centered with the token symbol and balance text.
Actual Result:
ETH icon appears larger than LINK and MUSD icons (see attached screenshot).
Icons look misaligned, breaking visual consistency.
### Design
_No response_
### Technical Details
_No response_
### Threat Modeling Framework
_No response_
### Acceptance Criteria
Recommendations:
Standardize token icon container size (e.g., 32x32dp) across all tokens.
Apply consistent padding/margins to align icons with text.
Scale all token icons uniformly (no larger than container).
Consider enforcing a mask/shape (circle or rounded square) so icons with different aspect ratios still appear aligned.
QA should test with both default (ETH, popular tokens) and long-tail/custom tokens to ensure consistency.
### Stakeholder review needed before the work gets merged
- [ ] Engineering (needed in most cases)
- [x] Design
- [x] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)
### References


Contributor guide
Research direction
Open metamask-main-exp-2296.apk and reproduce the issue through Send > token selector, comparing ETH, LINK, MUSD, and custom or long-tail tokens. Locate the token selector and its icon rendering entry point by tracing the Send flow, then verify that icons share a consistent container, scale, padding, and vertical alignment. Done means the default and long-tail cases render consistently without visual imbalance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100