Icon Size Guidelines for Web and Mobile UI
Use the right icon sizes for web and mobile interfaces with practical size tokens, spacing rules, and an interactive size advisor.
If icon sizes are inconsistent, the interface feels unpolished even when every icon is high quality.
Default size tokens
- Web app UI:
16,20,24,32 - Mobile app UI:
20,24,28,32 - Use fewer tokens, not more
Interactive advisor
Use this to pick a stable token set for your surface and density.
Icon Size Advisor
Pick your UI context and get a practical icon size recommendation.
Spacing rules
- Keep icon container and text baseline aligned.
- For icon + label buttons, use 6px to 10px gap.
- Increase touch target before increasing icon size.
- Do not scale the same icon to too many intermediate sizes.
For most product UIs, start with 20px for dense rows and 24px for primary actions.
Quick QA
- Check icons at 100% and 125% zoom.
- Check light and dark themes.
- Check hover/focus states for legibility.
- Check 1x and 2x displays.
Preview sample size
tabler:layout-dashboard•24pxRelated guides
Why token discipline matters
Uncontrolled icon sizes create subtle visual noise: buttons misalign, rows look uneven, and component spacing becomes harder to scale.
A small token set solves this:
- predictable vertical rhythm
- simpler component APIs
- easier QA for responsive states
Team rollout plan
- publish approved size tokens
- map tokens to component types
- audit existing screens for one-off sizes
- refactor outliers incrementally
Once tokens are stable, visual consistency improves quickly.
Extended implementation notes
When you apply icon size tokens, also standardize line-height and button padding. Otherwise, even correct icon sizes can still look misaligned. A reliable pattern is to pair each icon token with a matching container token (for example, icon-20 with control-32).
In design reviews, evaluate icons in full components, not isolated canvases. Spacing, label weight, and hit target all affect perceived icon size.
Pre-release checklist
- no custom one-off icon sizes in core components
- touch targets remain accessible on mobile
- icon and text baselines align in all button variants
- small-size icons remain readable at 125% zoom
Final note
Once size tokens are defined, lock them into shared components and avoid page-level overrides. Consistency at component level is what makes the system reliable.
Keep design and engineering token names identical so documentation and implementation stay aligned.
If you enforce token usage in code review, this consistency benefit compounds quickly across new screens.
Keep this documented as a hard standard in your design system notes.
Additional source references: 1 2 3.