MetaMask / MetaMask/metamask-mobile

Token icons misaligned and inconsistent sizes in Send flow token selector

Open
#18,750 0 comments 0 reactions 0 assignees View on GitHub
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

![Image](https://github.com/user-attachments/assets/8df4fe25-4fac-4d3f-b386-42bd7400433a)

![Image](https://github.com/user-attachments/assets/dc0b182f-30f1-4e15-b3da-5116149dc86a)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.