Design Consistent Icon Systems

Visual Design · components, design systems, consistency

Updated 2026-07-28

Treat icons as a language with a fixed vocabulary. One meaning gets one icon everywhere, and one icon never carries two meanings in the same product.
Draw them on a shared grid with a shared stroke weight and corner treatment. Mixed weights and mixed styles are visible instantly even to people who cannot say why.
Keep optical sizing in mind. A circle and a square of identical dimensions do not look the same size, so balance them by eye rather than by measurement.
Label anything ambiguous. Very few icons are universally understood, and a label costs less than the support cost of a symbol nobody recognises.
Never rely on an icon alone for a destructive or irreversible action.
Keep the interactive target larger than the drawing. A sixteen pixel glyph needs a target big enough for a finger, with the extra space invisible.
Make them inherit colour from their context so they work in every theme, every state, and on every surface without producing a second set of assets.
Hide decorative icons from assistive technology and give meaningful ones a text alternative that matches their visible label.
Ship them from one source. Copies drifting between apps is how a suite ends up with four versions of the same symbol.

Icons are read faster than words and understood less reliably, which is exactly why the system around them has to be strict.