Working at tiny sizes.
WHAT ICONS MUST DO
Communicate at a glance, at small size.
WHAT MAKES THEM WORK
A strong outline Minimal internal detail Consistent weight across a set Consistent visual size
WHY CONSISTENT VISUAL SIZE
Icons drawn to the same box can still appear different sizes, and that unevenness is visible.
WHAT TO ALIGN TO
A pixel grid, for icons displayed small.
WHY
Shapes falling between pixels blur.
WHAT TO ESTABLISH FOR A SET
Line weight Corner treatment Whether shapes are filled or outlined The grid
WHY CONSISTENCY MATTERS MOST
A set with mixed treatment looks assembled rather than designed.
WHAT TO AVOID
Detail invisible at the display size Text inside icons Metaphors that do not translate across cultures Colour carrying the meaning
WHAT TO TEST
The icon at its actual size, in its actual context.
WHY IN CONTEXT
Icons that read alone can become ambiguous beside others.
WHAT FORMAT TO USE
Vector, for scaling and for recolouring.
WHAT TO PROVIDE ALONGSIDE
A text label, wherever the meaning is not universal.
WHY
Few icons are understood without one.
