Icon sizing and spacing in interfaces

Concrete pixel guidance for placing icons in nav rails, buttons, cards, hero sections, and editorial illustration.

Three sizes, not twelve

Most product UI works best with a small, fixed set of icon sizes — typically three. A tight 16 px size for inline use inside body text and dense table chrome. A standard 24 px size for navigation, buttons, and tabs. And a larger 48 px or 64 px size for cards, empty states, and feature tiles. Three sizes is enough variety to handle every common case without producing a screen that feels visually noisy. If you find yourself reaching for a fourth size, ask whether the design is really asking for a different visual treatment.

Buttons and tabs

Inside a button, an icon should sit at 16 to 24 px depending on the button height. The rough rule is that the icon should be slightly less than half the button height — for a 40 px tall button, a 20 px icon reads as proportional; a 32 px icon dominates the button and pushes the label out of place. Maintain at least 8 px of padding between the icon and the adjacent label, and at least 12 px between the icon and the button edge.

Navigation rails

In a left-side navigation rail, icons typically sit at 24 px with the label below or beside them. If the rail is collapsed to icons-only, bump the size to 28 or 32 px so the icons are still legible without their labels. Vertical spacing between rail items should be at least 16 px to give each icon enough breathing room to read as a distinct affordance. Less than that and the rail starts to feel like a vertical strip of dots.

Cards and feature tiles

When an icon anchors a card or a feature tile in a marketing page, it should sit at 48 to 64 px. Smaller than that and the icon feels like an afterthought; larger than that and the icon competes with the card's headline for attention. Place the icon at the top-left of the card with at least 24 px of padding on every side, or center it above a stacked headline-and-body layout. Both placements are common; the choice depends on whether the card is meant to be scanned quickly or read carefully.

Empty states and onboarding

In an empty state or onboarding screen, the icon is the hero. Size it at 96 to 160 px and center it above the headline. Pair the icon with a generous amount of whitespace — at least 64 px between the icon and the surrounding text — so it reads as the focal point rather than as an over-large nav icon. Empty states are one of the few places where it is worth choosing a more illustrated, multi-color icon rather than a simple flat glyph.

Editorial illustration

When an icon is functioning as an illustration in editorial content — for example, the lead visual of a blog post — there are no fixed rules. Size and place it the way you would a photograph or illustration, not the way you would a UI affordance. Icons used this way often work best at 240 to 480 px on desktop, scaled down on mobile to maintain breathing room around the body copy.