Isometric grid SVG. For iso illustration, pixel art, and game maps.
📐 Preview

How to use

  1. Set width and height (px).
  2. Adjust cell size, line width, and colors.
  3. Use presets or pick colors.
  4. Toggle transparent background / vertical lines.
  5. 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.