What size should UI icons be? A practical guide

Use 24 px for most UI icons. Drop to 16 px for dense rows and inline text, and go up to 32 px for feature blocks and empty states. UI icon size is one decision. The size of the tap area around the icon is a second, separate one.

What are the standard UI icon sizes?

Four sizes cover almost every interface.

• 16 px: inline with body text, table rows, form field adornments, badges.
• 20 px: compact toolbars and buttons with small labels.
• 24 px: the default for navigation, toolbars, tab bars and buttons.
• 32 px: cards, feature lists and empty states, where the icon acts as a small picture.

Past 48 px an icon is really an illustration, and you should treat it like one. The sizes are not magic. They are steps people have settled on because each is clearly different from the next one.

How do you match UI icon size to text size?

Make the icon about as tall as the line of text it sits beside. As a rule of thumb, not a study: 14 px text with a 20 px line height takes a 16 or 20 px icon, and 16 px text with a 24 px line height takes a 20 or 24 px icon.

A button with a 14 px label and a 16 px icon, separated by an 8 px gap, looks balanced. The same button with a 24 px icon looks like the icon is shouting.

Do not size icons by eye one at a time. Pick the size for the text style, then apply it everywhere that style appears.

Is icon size the same as touch target size?

No, and mixing them up is the most common sizing mistake. A 24 px icon does not need a 24 px button.

Apple asks for a 44 pt minimum target and Material Design asks for 48 dp. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels for pointer targets (success criterion 2.5.8, level AA) and a 44 by 44 target at level AAA (WCAG 2.2). So keep the drawing small and make the hit area large.

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.icon-button svg {
  width: 24px;
  height: 24px;
}

The button is 44 px, the icon inside is 24 px, and the page stays easy to hit with a thumb.

Which sizes keep strokes crisp?

Sizes that divide the 24 px grid neatly. Every UIX icon is drawn once on a 24 px grid, and a stroke scales with the icon. The Regular weight is 1.5 on the grid, so it becomes 1 px at 16 px, 1.5 px at 24 px and 2 px at 32 px. Those land on clean widths.

At 20 px the same stroke is 1.25 px. That still works, but it renders a little softer on low-density screens. If an interface looks slightly blurry at 20 px, this is the usual cause.

Every UIX icon is checked at 16 px before it ships, so the small end of the scale holds up. You can see the same icon at 16, 24, 32 and 48 px side by side in Studio, which is free and runs in the browser.

How many icon sizes should a product use?

Two or three. A typical set is 16 px for inline, 24 px for controls and 32 px for feature areas. Write them down as tokens so nobody invents a 22 px icon on a Friday afternoon.

Mixed sizes in a single row read as a mistake. If one icon in a toolbar is 20 px and its neighbours are 24 px, people notice even if they cannot say why.

Size also interacts with weight. A thin stroke that looks refined at 32 px can disappear at 16 px. How to choose an icon style covers that pairing, and the icon browser lets you search and copy a real icon to try at each size.

Questions

What is the most common icon size in UI design?

24 px. It is the default for toolbars, navigation and buttons because it is large enough to read at a glance and small enough to sit beside body text.

Is 16 px too small for an icon?

Not if the icon was drawn for it. Simple shapes with open counters stay legible at 16 px. Keep the tap area larger than the icon when the icon is interactive.

What icon size works best in a mobile app?

A 24 px icon inside a 44 to 48 px tap target. The icon stays calm and the target stays easy to hit.

Can I scale a 24 px SVG icon to 100 px?

Yes, SVG scales without losing sharpness. The stroke scales with it, so the line gets heavy. For large icons, use a lighter weight or treat the icon as an illustration.