Free Icon Grid Generator

Keylines are the fix. Instead of one bounding box, each shape category gets its own boundary, sized so that the resulting areas are comparable. The circle's boundary is larger than the square's, and rectangles get boundaries longer in one direction and shorter in the other.

What sizes exactly is where the published systems differ, and it is worth being precise about what this overlay draws rather than describing keylines in general.

The grid here is 24 units square with a 20 × 20 live area inset two units all round. The four keylines are a circle of radius 10 units, a square of 14 × 14, and rectangles of 18 × 12 and 12 × 18.

Compute their areas and the circle comes out at 314.16 square units, the square at 196, and each rectangle at 216. The circle carries 60.3% more area than the square and 45.4% more than either rectangle.

That is a much stronger correction than the widely used Material keyline set, where the circle is 20 units in diameter (314), the square 18 × 18 (324) and the rectangles 20 × 16 (320) — all within about 3% of each other.

Which set is right depends on what you are drawing. Near-equal areas suit icons that are mostly solid, where area is a good proxy for weight. A larger circle suits stroked or outlined icons, where the perimeter matters more than the fill and a circle's perimeter is shorter than a square's of equal area.

The honest position is that this overlay's keylines are a workable set and not the Material set, and if you are contributing to a system that specifies Material's you should use theirs. What the grid gives you either way is the 24-unit substrate and the live area, which are common to both.

Twenty-four is the standard canvas for a reason worth knowing: it divides by 2, 3, 4, 6, 8 and 12. A shape centred on a 24-unit grid, halved, thirded or quartered, lands on whole units, and whole units are what render sharply at low resolution.

That last point mattered enormously when icons were displayed at 16 or 24 pixels and mattered less once screens got dense. It has not stopped mattering entirely — an icon whose edges fall on half-pixels still renders soft at 1× — but it is no longer the constraint it was.

The live area is the other half of the substrate and it is the part people skip. Two units of clearance on every side means that when icons are set in a row at their natural spacing, each still has its own space and the row reads as separate marks rather than as a band.

It also protects against the container. Icons get put inside circles, squares and buttons by systems the icon designer does not control, and a mark that fills its full 24 units will collide with any of those. The 20-unit live area is the promise that it will not.

The line weighting — every fourth line at 1.1× and the rest at 0.45× — exists because 24 divisions is a lot to count. A grid with a heavier line every four units lets you say "six units from the left" by counting one and a half heavy intervals rather than six thin ones.

Four is the right interval for a 24-unit grid because 24 ÷ 4 = 6, so the heavy lines themselves divide the canvas into sixths, which is a count the eye handles without help.

The practical use of all this is auditing a set rather than constructing one icon. Over a single icon the grid tells you little — you drew it, you know where things are. Over twenty icons it tells you which three are optically heavier than the rest, which is a problem nobody can see in isolation and everybody sees in a toolbar.

The usual method is to lay the grid over each icon in turn at the same scale and look for the ones whose mark does not reach its keyline, or overshoots it. Those are the outliers, and correcting them is what makes a set feel drawn by one hand.

For a mark rather than a set, the logo construction grid generator is the tool, and the 8pt grid generator handles the spacing the icons sit in. A second use is deciding a keyline for a shape that does not fit the four categories. A diagonal mark, an L-shape, a mark with a long tail — none of them is a circle, a square or a rectangle. The usual approach is to fit the closest keyline and then adjust by eye until the optical weight matches its neighbours.

Which is a reminder that keylines are an aid rather than a rule. They get you close enough that the remaining judgement is small, and the remaining judgement is still yours.

For stroke-based icon sets there is an additional consistency question the grid does not answer: stroke weight. A set drawn at 2 units of stroke will look quite different from one at 1.5, and mixing them within a set is a more visible inconsistency than any keyline error. The grid gives you the geometry; the stroke weight is a separate decision to make once and hold.

The 74% inscription — the grid sits at 74% of the canvas's short side rather than filling it — is there so the construction has a margin in the working view. It is not part of the icon system; it is how the overlay presents itself.

The grid draws over your own canvas rather than exporting a fixed template because the audit use is the valuable one, and auditing means putting the grid on icons that already exist.

The export sizes itself from the paper format and the DPI you choose rather than from your screen. SVG keeps every line and keyline editable, which is what you want when the grid becomes a layer in a vector application. The icon grid overlay page compares the published sets, beside the rest of the design template overlays.

Everything runs in your browser. Images you load are never uploaded, because there is no server for them to reach. The drawing, the transform and the export all happen on your own machine.