Stop 02 · Design Principles & Visual DesignTopics · 7/11

Iconography Basics

In short

A good icon saves words. A bad or mismatched one makes people stop and guess. Learn a few simple rules and your icons will help instead of confuse.

Using icons consistently in style (stroke weight, corner radius, fill) and only when they genuinely aid comprehension — an inconsistent or unclear icon set actively hurts usability.

The jaadu happily sets a table with a matching set of plates, bowls and cups.

Think of it like this

A matching dinner set

Put a steel plate, a glass bowl and a plastic cup on one table and it looks like leftovers. A matching dinner set looks planned, even if each piece is simple. Icons need the same family look.

Watch it happen

Rules for a consistent icon set

24px grid

Same stroke

Same corners

One style

Add labels

1/5Draw every icon on the same grid, often 24×24px, so they look the same size side by side.

The big ideas

What you need to know

Few icons are universal

Search, home, close and play are widely understood. Most others need a label to be clear.

Use one icon library

Free sets like Lucide, Material Symbols or Phosphor keep style consistent. Avoid mixing sets.

Tap area is bigger

The icon may be 24px, but its tap target should be around 44 to 48px so fingers can hit it.

Save yourself the pain

Common mistakes

Oops

Using a clever custom icon for 'Export' without a label.

Do this instead

If people might wonder what it does, add a label. Clarity beats cleverness.

Oops

Grabbing icons from three different free sets.

Do this instead

Pick one library. Stroke, size and corner style will match automatically.

Your mission

Audit an app's icons

~20 min

Quick check

Which icon is most likely safe to use without a text label?

Go deeper

1Audit an app's icon set for stylistic consistency (stroke width, size, corner radius).
2Practice pairing an icon with a text label where the icon alone would be ambiguous.
3Learn to source or build from a consistent icon family rather than mixing styles.