Design Atlas
한국어
⬡ Icons & illustration

Isometric Illustration

아이소메트릭 일러스트

A drawing style that places three faces at equal 120° angles with no vanishing point, reading as dimensional without perspective distortion.

Also known as: Isometric artEqual projection
···
html
<div class="stage">
  <svg viewBox="0 0 24 26" id="cube">
    <ellipse cx="12" cy="23.5" rx="8" ry="1.6" fill="var(--fg)" opacity=".12" id="shadow"/>
    <polygon class="top" points="12,2 21,7 12,12 3,7"/>
    <polygon class="left" points="3,7 12,12 12,21 3,16"/>
    <polygon class="right" points="21,7 12,12 12,21 21,16"/>
  </svg>
</div>
css
.stage{width:clamp(72px,30vmin,130px);aspect-ratio:24/26;overflow:visible}
#cube{width:100%;height:100%;display:block;overflow:visible;animation:float 2.6s ease-in-out infinite}
.top{fill:var(--accent)}
.left{fill:color-mix(in srgb, var(--accent) 65%, black)}
.right{fill:color-mix(in srgb, var(--accent) 40%, black)}
#shadow{animation:shrink 2.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes shrink{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.06;transform:scale(.85)}}

Isometric illustration arranges three faces of an object at equal 120° angles with no vanishing point, so it reads as dimensional without any of the distortion perspective normally introduces. It comes from architectural isometric projection but shows up constantly now in app onboarding, empty states, and feature cards.

The core discipline is fixing the shading rule for the three faces ahead of time — typically the top face is lightest, one side face is mid-tone, and the opposite side is darkest. Assuming light always comes from the same direction (usually above) and applying that same rule to every object is what keeps a whole scene of objects feeling lit consistently.

Drift even slightly off true isometric (all three axes at 120°, lines at a 30° slope) and the result reads as "slightly wrong 3D" rather than stylized — which is why most of these get drawn on a 30-60-90 grid or with a vector tool's isometric plugin rather than freehand.

When to use

Use it for onboarding, empty states, or feature cards that want a soft, explanatory tone. When a scene has several objects, keep the shading rule and light direction identical across all of them.