Icon grids and keyline shapes

A keyline grid is the invisible scaffolding of a professional icon set. It defines both the pixel grid icons snap to and the reference shapes that keep them optically equal in size.

Pixel grid

Icons are drawn on a grid (commonly 24×24) and aligned to whole pixels where possible so edges stay sharp at small sizes. Snapping to the grid also keeps stroke widths even.

Keyline shapes

Because a circle looks smaller than a square of the same bounding box, designers use keyline shapes at slightly different sizes — e.g. a circle a touch larger than a square — so both appear the same size in a row of icons. Material Design popularized this approach with a well-defined keyline template.

Applying it

• Fit round icons to the circle keyline, boxy icons to the square, tall/wide ones to the rectangles.
• Keep consistent padding so icons don't crowd each other or their labels.
• Check icons together at real UI size, not just zoomed in.

Frequently asked questions