Designing a Consistent Icon System

Icons are small, but they are everywhere: in navigation, buttons, forms and empty states. When they come from five different sets, users notice – even if they cannot say why. A consistent icon system makes an interface feel calm and trustworthy.

Choose one grid

Most interface icons are drawn on a 24×24px grid with about 2px of padding, which leaves a 20×20px live area. Pick one size as your base and design every icon on it. Smaller sizes like 16px usually need their own simplified versions, because scaled-down details turn to mush.

Use keyline shapes

Keylines are guide shapes – a circle, a square and portrait and landscape rectangles – that balance the visual weight of different icons. A circle drawn edge to edge looks bigger than a square of the same size, so it is drawn slightly smaller. Following the keylines makes a search icon and a calendar icon feel the same size.

Lock the stroke and the corners

Decide on one stroke weight, one cap and join style and one corner radius, and apply them everywhere. A 1.5px or 2px stroke with rounded caps feels friendly; a 1px stroke with square caps feels precise and technical. Mixing them is what makes sets look patched together.

Draw new icons next to three existing ones from your set. If the new icon looks heavier, lighter or bigger at a glance, adjust it before you compare any numbers.

Keep metaphors familiar

An icon only works if people recognize it. Stick to established metaphors – a magnifying glass for search, a heart for favorites, a bag or cart for shopping – and add a text label wherever space allows. Labels are not a sign of weak icons; they make interfaces faster for everyone.

Name icons by what they show

Name icons after their shape, not their meaning in one screen: heart, not save-product. The same heart might mean “like” in one place and “favorite” in another. Shape-based names keep the set reusable, and a short list of aliases helps people find what they need.

Export clean SVG

For the web, export icons as SVG without fixed colors: replace fills and strokes with currentColor, so an icon takes the color of the text around it and adapts to hover states and dark mode. Remove hidden layers and clip paths, and keep the viewBox at the grid size.

Make them accessible

Decorative icons next to a text label should be hidden from screen readers with aria-hidden="true". Icon-only buttons need an accessible name, usually through aria-label, and a touch target of at least 24×24px – better 44×44px on mobile.

Or start with a good set

You do not have to draw everything yourself. A well-made icon set that follows these rules gives you hundreds of consistent icons on day one; you then only draw the few that are specific to your product, on the same grid and with the same stroke.