Design Atlas⬡Icons & illustration
Keylines, optical correction, duotone icons, isometric — the rules of drawing small pictures. — 16 entries
Icon Keylines아이콘 키라인
The invisible circle, square, and two rectangles inside an icon grid that keep differently shaped icons feeling the same size.
Optical Correction옵티컬 보정
A deliberate size boost for circles and pointed shapes — because at identical height they read smaller than a square, and only overshooting the edge makes them look equal.
Line Icon라인 아이콘
An icon drawn purely as a stroke of consistent weight, with no fill — visually light and comfortable next to text.
Solid Icon솔리드 아이콘
An icon with its whole shape filled and no outline — the fill holds up at small sizes, so it grabs attention firmly.
Duotone Icon듀오톤 아이콘
An icon split into two flat layers — a light tone for the background shape, a saturated tone for the emphasis — building hierarchy from exactly two flat colors, no shadows.
Icon Grid & Safe Area아이콘 그리드 (세이프 영역)
The rule that separates an icon’s canvas from the smaller "safe area" inside it where the artwork is actually allowed to sit.
Pixel-Perfect픽셀 퍼펙트
Drawing an icon so every line lands exactly on a pixel boundary — land it between pixels and anti-aliasing blurs the edge.
Pictogram픽토그램
A symbol that carries its meaning entirely through the image, with no text needed — airport and facility signage is the classic case.
Isometric Illustration아이소메트릭 일러스트
A drawing style that places three faces at equal 120° angles with no vanishing point, reading as dimensional without perspective distortion.
Flat Illustration플랫 일러스트
An illustration style that strips out shadows, gradients, and highlights, building a scene from simple shapes and flat, uniform color fields.
3D Icon (CSS-Shaded)3D 아이콘 (CSS 셰이딩)
An icon that fakes a glassy, glossy dimensional look with nothing but CSS gradients and shadows — no actual 3D rendering.
Animated Icon애니메이션 아이콘
An icon that doesn't snap between states but morphs smoothly from one shape into the next as the state changes.
Icon Metaphor아이콘 메타포
Borrowing the picture of an unrelated object to stand in for a new function — the floppy disk on a save button is the classic case.
Stroke Consistency스트로크 일관성
Locking the line weight to one value across an entire icon set — mixed weights side by side read as sloppy even when each icon looks fine alone.
Spot Illustration스팟 일러스트
A small, self-contained drawing made for one specific spot on screen — an empty state, an error, a success message — not a full scene.
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.