Design Atlas
한국어
⬡ Icons & illustration

Avatar Illustration

아바타 일러스트

A stand-in for a photo, using nothing more than simple shapes to suggest a person — the default for users with no profile photo.

Also known as: Default avatarGenerated avatar
···
html
<div class="stage">
  <svg viewBox="0 0 40 40" class="ic">
    <circle cx="20" cy="20" r="20" fill="var(--accent)" id="bg"/>
    <circle cx="20" cy="15" r="7" fill="var(--surface)" opacity=".92"/>
    <path d="M6 38a14 14 0 0 1 28 0Z" fill="var(--surface)" opacity=".92"/>
  </svg>
</div>
css
.stage{width:clamp(64px,26vmin,110px);aspect-ratio:1;overflow:hidden;border-radius:50%}
.ic{width:100%;height:100%;display:block}
#bg{transition:fill .5s ease}
js
const bg = document.getElementById('bg');
const colors = ['var(--accent)', 'var(--accent-2)', 'var(--accent-3)'];
let i = 0;
setInterval(() => { i = (i + 1) % colors.length; bg.style.fill = colors[i]; }, 1400);

An avatar illustration stands in for a photo, using nothing more than simple shapes to suggest a person. It's most common as the default shown to users who haven't uploaded a profile photo yet — softer than a blank gray circle, and with none of the risk of being mistaken for an actual person's face.

Most products auto-generate these. A hash of the user's ID or name picks a color from a fixed palette, and a minimal silhouette — a head shape, a shoulder shape — gets composed from that. It has to be deterministic rather than random, since the same user needs to get the same avatar every time they log in.

Add too much detail and it usually ends up as an awkward almost-photo rather than a clean illustration. Most designs settle on one of two directions instead: stop at a bare head-and-shoulders silhouette with no facial features, or go fully abstract with a geometric pattern built from a small set of shapes.

When to use

Use it as the default for users with no profile photo. Generate it deterministically from a user ID or name so the same user always gets the same avatar, and stop at a silhouette or geometric pattern rather than attempting facial features.