Design Atlas
한국어
⬡ Icons & illustration

Flat Illustration

플랫 일러스트

An illustration style that strips out shadows, gradients, and highlights, building a scene from simple shapes and flat, uniform color fields.

Also known as: Flat design illustration
···
html
<div class="stage">
  <svg viewBox="0 0 100 60" id="scene">
    <circle cx="78" cy="16" r="9" fill="var(--accent-2)" id="sun"/>
    <path id="cloud" d="M10 22a6 6 0 0 1 11-3 5 5 0 0 1 9 3 5 5 0 0 1-1 10H12a6 6 0 0 1-2-10Z" fill="var(--surface)" stroke="var(--line)" stroke-width="1" opacity=".9"/>
    <polygon points="0,50 30,15 55,50" fill="var(--accent-3)"/>
    <polygon points="35,50 60,22 100,50" fill="var(--accent)"/>
  </svg>
</div>
css
.stage{width:clamp(150px,58vmin,280px);aspect-ratio:100/60;overflow:visible}
#scene{width:100%;height:100%;display:block;overflow:visible}
#sun{animation:pulse 2.4s ease-in-out infinite;transform-origin:center}
#cloud{animation:drift 5s ease-in-out infinite}
@keyframes pulse{0%,100%{r:9}50%{r:10}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

Flat illustration strips out every trace of dimension — shadows, gradients, highlights — and builds a scene from simple shapes and flat, uniform color fields. It spread as a reaction to the leather-textured, glossy skeuomorphism of the early 2010s and has since become the default illustration style across the web.

It's quick to produce and, drawn as SVG, stays crisp and light at any size since there's no gradient mesh or raster shading to scale. The tradeoff is that without dimension to lean on, mood has to come entirely from shape and color choice — most teams lock in a fixed palette of three to five colors and only combine within it to keep a whole illustration set feeling like one family.

Because the style already strips detail down, oversimplifying an object risks making it unreadable. It's worth checking the silhouette alone — strip away color and background and see if the shape still reads as what it's supposed to be.

When to use

Reach for it first for default web/app illustration that needs to ship fast and stay light as SVG. Lock a palette of three to five colors before drawing and hold to it across the set.