Icon Grid Template Maker | Build a Transparent PNG Grid with Alignment Guides
Set columns, rows, cell size, padding, and gutter in pixels, then export a transparent PNG grid template with alignment guides. It is a quick way to lay out icon sheets, sprite sheets, and UI-kit scaffolding without opening a full design app.
💡 About this tool
Laying out a batch of icons at even spacing means doing math in your head: a 64px cell, an 8px gap, a 16px outer margin, times however many columns and rows. Get one number wrong and the whole sheet drifts out of alignment, which you often only notice after exporting and redoing the work.
This tool does that arithmetic for you. Type in the columns, rows, cell size, padding, and gutter, and it reports the total width, height, and icon count on the fly. The preview overlays the cell outlines, the outer padding, the inter-cell gutters, and the center crosshair, so you can see exactly where each icon will land before you commit. The export is a transparent PNG, which drops cleanly into Figma, Sketch, Illustrator, or any layered editor as a backing grid you align real artwork to. Toggle the guide lines on or off and the export follows that state, so a single button gives you either a guided working draft or a cells-only finished template.
🧐 Frequently Asked Questions
Is the exported PNG background transparent? Yes. The exported PNG has a transparent background. The checkerboard you see in the preview is only a way to visualize the transparency on screen and is not baked into the image.
What is the difference between gutter and padding? Padding is the margin reserved around the outside of the whole grid; the gutter is the gap left between adjacent cells. Set both to zero and the cells sit flush against one another with no spacing.
How do I control whether the exported PNG includes guides? Use the "show guides" toggle. With it on, the export includes the center crosshair and padding lines, which help with alignment during the drafting stage. With it off, only the cell outlines remain, giving a cleaner template closer to final layout. The toggle drives both the preview and the export, so there is just one download button.
How is the output size calculated? Width equals padding times two, plus cell size times the number of columns, plus gutter times the number of columns minus one. Height follows the same logic from the row count, and the output-size readout updates every time you change an input.
Can I place the actual icon images here? This tool produces an empty grid template that serves as a backing layer. Each cell shows only its outline; you overlay the real icon artwork onto each cell in your own design app.
📚 Why grids and gutters matter
The grid system, arranging elements at even intervals, comes straight out of print layout tradition, and the word "gutter" carries that history with it: it originally named the inner margin reserved at a page's binding edge. In icon and UI sprite sheets, the gutter does practical work too, keeping the rendered edges of neighboring icons from bleeding into one another so each cell can be exported or sliced independently. Pairing a consistent gutter with a steady outer padding keeps the proportions intact even when you add another cell later.