Icon Grid Maker – Keylines, Safe Area and Padding Guides for Icons

Use the free tool below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.

Why icon designers draw on a grid

Good icons look like they belong together even when they show completely different things. The secret is rarely talent alone: it is a grid. A grid gives every icon the same proportions, the same safe area and the same visual weight, so a set of twenty icons reads as one family instead of twenty separate drawings. Without a grid, one icon looks heavy, the next looks lost, and the whole set feels uneven even when nobody can say why.

This tool draws that grid for you. Choose a canvas size, a number of grid columns, a safe-area margin and a keyline shape, and the tool draws the guides: thin grid lines, a dashed safe-area border, centre lines and the keyline shape itself. Use it as a template while you draw, and keep the important parts of your icon inside the safe area. The keyline shapes, a square, a circle or a rounded square, are the classic forms that icon sets use to keep optical size consistent.

How to use the grid maker

1. Pick the canvas size you design at, for example 480 pixels.
2. Choose the grid columns. Twelve or sixteen columns suit most icon work.
3. Set the safe-area margin. Ten percent is a common starting point.
4. Pick a keyline shape and draw your icon inside it, keeping details within the dashed safe area.

A worked example

Take a 480 pixel canvas with 12 columns and a 10 percent safe-area margin. Each grid cell is 40 pixels wide, because 480 divided by 12 is 40. The safe-area inset is 48 pixels on every side, because 10 percent of 480 is 48. The safe area itself is therefore 384 by 384 pixels, centred on the canvas. That is the space your icon’s main mass should live in. Small details may reach the keyline edge, but the bulk of the shape should stay inside the dashed border.

Now compare a circle keyline with a square keyline at the same size. The circle looks smaller than the square even when both measure the same, because the eye judges area, not width. That optical effect is why keylines exist: they let you size a circle slightly larger than a square so both feel equal. Draw with the keyline visible, step back, and trust your eyes over the numbers.

Tips for consistent icon sets

• Use the same stroke width across the whole set, and the same corner radius wherever corners repeat.
• Align details to the grid, but let optical judgement override the grid when a shape looks off-centre. Circles and triangles often need a tiny nudge.
• Test icons at 16 and 24 pixels early. A detail that reads at 480 pixels may vanish at real size.
• Keep padding generous. Icons that fill the whole canvas look cramped next to text and other interface elements.

Common mistakes

The most common mistake is drawing each icon to fill its canvas. A triangle that fills the frame looks much larger than a square that fills the same frame, and the set falls apart. Keylines fix this by giving each shape its own target size. Another mistake is changing the grid halfway through a set. Pick the grid once, write it down, and use it for every icon, including the ones you add months later. Consistency is a decision you make at the start, not something you repair at the end.

This tool draws guides only; it does not draw the icon for you. That is a strength, not a gap: the grid is the discipline, and your drawing is the craft. Export your finished icon from your own design tool, and use this grid again whenever the set grows.

Who uses an icon grid

Interface designers use grids for app icons and toolbar sets, illustrators use them for icon libraries sold online, and product teams use them to keep a growing set consistent as new features arrive. A grid also helps when handing work to another designer: the grid is the shared rule, so the new icons match the old ones without long explanations. Save your grid settings with the project, and every future icon starts from the same foundation.

Related calculators

• Spanish version
• Brand Clear Space Calculator – Exclusion Zone Around Your Logo
• Seamless Tile Edge Checker – Visible Seam Mismatches in Repeating Patterns