Choosing icon sizes in UI design
Interface icons cluster around a few sizes for good reason: 16, 20 and 24px pair cleanly with common text sizes and align to standard grids. Here's how to choose.
The common sizes
| Size | Typical use |
|---|---|
| 16px | Dense UIs, inline-with-text, small buttons, tables |
| 20px | Comfortable default for many web apps |
| 24px | Toolbars, mobile nav, primary actions (Material default) |
| 32–48px | Feature tiles, empty states, marketing |
Pair with text
Match icon size to the adjacent text's cap height or line-height so they sit on the same optical baseline. A 16px icon suits 14–16px body text; 20–24px pairs with headings and buttons.
Stay on the grid
Use sizes that are multiples of your spacing unit (often 4px) so icons align to the layout grid. Avoid oddball sizes like 17 or 23px.
Frequently asked questions
What is the standard UI icon size?
24px is the most common baseline (Material Design's default); 16 and 20px are widely used for denser contexts.
How do I align an icon with text?
Match its size to the text's cap height and use the same vertical center — often with flexbox align-items:center.