The grid & keylines

Start from a grid

A consistent icon family lives on a shared artboard — commonly 24×24 units. Within it, designers reserve a small padding so nothing touches the edge, leaving a live area of roughly 20×20.

Keylines

Keylines are the reference shapes every icon is measured against:

• a square (e.g. 18×18)
• a circle (e.g. ø20)
• a portrait and landscape rectangle

Aligning icons to these shapes makes a square icon and a round icon feel the same size, even though their bounding boxes differ.

In this app

The editor draws a grid and optional keyline guides. Toggle snap so anchor points land on whole units — that alone removes most of the wobble from hand-drawn paths.