Isometric grid SVG. For iso illustration, pixel art, and game maps.
๐ Preview
How to use
- Set width and height (px).
- Adjust cell size, line width, and colors.
- Use presets or pick colors.
- Toggle transparent background / vertical lines.
- Download SVG or PNG.
Key features
- Exact 30ยฐ isometric grid
- Cell size 10โ120 px
- 5 presets (standard ยท fine ยท bold ยท blueprint ยท dark)
- Transparent background option
- SVG/PNG export + clipboard copy
Use cases
- Isometric illustration โ building / city / game-icon guidelines
- Pixel art โ iso-dot baseline
- Game-map design โ RPG / tower-defense tiles
- Infographics โ iso data visualization
- Architectural sketches โ 3D blueprints
What is isometric?
A 2D projection of 3D objects where X, Y, Z axes are equally spaced 120ยฐ apart. Visually it's 30ยฐ/150ยฐ diagonals + verticals โ clean grid plus depth. Standard for pixel art and games (SimCity, Diablo, Civilization). Core of recent illustration trends.
FAQ
Why 30ยฐ?
Isometric uses exactly 30ยฐ/150ยฐ. tan(30ยฐ)=1/โ3 creates evenly spaced diagonals balancing depth and flatness.
Paste into Figma?
Download SVG โ drag into Figma canvas โ vector grid. Lock the frame to use as a guide.
Different from dimetric?
Dimetric = 2 axes equal; isometric = all 3 axes equal. Classic games often use dimetric, but isometric is more visually appealing.
Free?
Yes, no signup or uploads.