How to use the Isometric Grid Generator
- Pick a projection. Isometric 30° is classic isometric drawing paper. Pixel 2:1 is the slightly flatter angle used in pixel art and tile-based games. Custom gives you a slider from 10° to 60° for stylized or architectural views.
- Choose a grid style. Triangles adds vertical lines to the two diagonal sets, which is what most isometric notebooks use. Diamonds leaves out the verticals and gives you the rhombus tiles of a game map. Dots puts a dot at every corner, so the guide disappears under your inks.
- Set the spacing. Type a number in px, mm or inches and decide whether it means the Edge length (the side of one triangle) or the Tile width (one diamond, corner to corner). The line under the inputs shows both, plus the gap between vertical columns.
- Style the lines and the canvas. Set color, weight and opacity, add heavier lines with Major every, and choose a paper or screen size. A4, Letter and A3 are calculated from the DPI box, so 300 DPI A4 becomes 2480 × 3508 px.
- Check and export. Switch the preview to 1:1 or 4× and drag to inspect real pixels, then press Download PNG, Download SVG or Copy SVG code.
Why 30°, and why pixel artists cheat to 26.57°
An isometric view shows the three edges of a cube at equal angles to each other: 120° apart on the page. That only happens when the two “floor” axes leave the horizontal at exactly 30°. Every edge parallel to an axis is drawn at the same scale, so you can measure depth with a ruler, which is why engineers, architects and diagram makers have used it for well over a century.
There is one wrinkle worth knowing. A true isometric projection shrinks every axis to about 81.6% (√(2/3)) of its real length. Isometric drawing skips that step and draws everything at full scale. The angles are identical and the result is simply a little larger, so drawing paper, and this generator, use full-scale edges.
Pixels are another matter. A 30° line climbs 57.74 px for every 100 px across, so its stair steps are irregular — sometimes two pixels wide, sometimes one — and the line looks jagged. A slope of exactly 1:2 climbs 50 px per 100 px, giving perfectly regular two-pixel steps. That angle is 26.565°, about 3.4° flatter than isometric. Strictly speaking it is a dimetric view: the two floor axes sit 126.87° apart and each meets the vertical at 116.57°. Nobody playing a city builder notices, and the clean steps make tiles line up without stray pixels. Turn on Pixel-perfect 2:1 steps and the PNG uses those exact two-pixel stairs instead of anti-aliased lines.
Isometric and 2:1 grids compared
| Isometric 30° | Pixel 2:1 | |
|---|---|---|
| Line angle | 30° | 26.565° |
| Tile width : height | 1.732 : 1 (√3) | 2 : 1 |
| Angle between floor axes | 120° | 126.87° |
| Rise over 100 px | 57.74 px | 50 px |
| A 64 px wide tile is | 64 × 36.95 px | 64 × 32 px |
| Best for | Hand drawing, technical sketches, print | Pixel art, game tiles, crisp UI icons |
The fourth row is the practical one. A 64 px isometric tile has a height that is not a whole number, so tiles drift by a fraction of a pixel and edges blur. At 2:1 every common tile size — 32 × 16, 64 × 32, 128 × 64 — lands on whole pixels.
Sizing a grid for print: a worked example
Say you want a 5 mm triangle grid on A4 for sketching furniture. At 300 DPI, 5 mm is 59.06 px, and A4 is 2480 × 3508 px. With Edge length set to 5 mm, each triangle side is 5 mm, the vertical columns sit 4.33 mm apart (5 × cos 30°) and the diagonals cross every vertical line at 5 mm intervals. That gives about 48 columns across the sheet and just over 59 rows down.
Line weight is the other half of a good printed grid. At 300 DPI a 2 px line is 0.17 mm and a 3 px line is 0.25 mm — about the weight of a fine technical pen. For a guide you will draw over, 2 px in a light blue such as #9BB3D1 at 50–60% opacity is visible without fighting your linework, and a colored guide is easy to tell apart from graphite or ink when you clean up a scan. Reserve 3–4 px Major every 5 lines for when you need to count units quickly.
The PNG you download has the DPI written into the file, so a print dialog set to 100% or “actual size” reproduces the 5 mm spacing instead of stretching the image to fit the page. For paper presets the SVG is sized in real millimeters or inches, which does the same job in Inkscape, Illustrator or Affinity.
Tips from practice
Put the grid on its own layer and lock it. In Procreate, Photoshop or Krita, import the PNG as a separate layer set to Multiply at 20–40% opacity, then lock it. You can hide it for a final check without ever painting onto it by accident.
Use the transparent background for overlays. A white background is right for printing, but over a colored underpainting it hides everything. Tick Transparent background and the grid floats over whatever is underneath.
Measure pixel-art tiles by width, not edge. Tile maps are specified as 64 × 32 or 128 × 64, so switch Measured as to Tile width and keep the width divisible by 4. Then every tile has identical stairs and copy-pasted blocks snap together. Our Pixel Grid & Sprite Sheet Generator handles the square grids for the same project.
Start curves from ellipses that fit the diamond. A circle on an isometric face becomes an ellipse whose long axis is about 1.73 times its short axis at 30°, and exactly twice it on a 2:1 grid. Sketch the diamond first, then fit the ellipse to touch the midpoints of its four sides.
Mix projections on purpose, not by accident. If part of a scene needs real vanishing points — a long street, a tall tower — draw that part with the Perspective Grid Generator and keep isometric for objects. Mixing the two inside one object is what makes drawings look subtly wrong.