Iconography
아이콘은 사용자가 복잡한 정보나 기능을 빠르게 이해하도록 도와주는 디자인 요소예요.
아이콘은 명확한 메타포와 직관적이고 간결한 형태로 누구나 쉽게 이해할 수 있어야 해요. 글로벌 사용을 고려해 모두가 공감할 수 있는 형태를 선택해요.
Icon Library
Clay는 lucide-react 아이콘을 사용해요. 일관된 24px 그리드와 2px 선 굵기로 그려진 Line 아이콘이며, shadcn/ui 컴포넌트와도 함께 쓰여요. 아래는 자주 쓰는 아이콘 일부예요. 누르면 JSX가 복사돼요.
import { Heart } from 'lucide-react';
<Heart className="size-x5 text-fg-neutral" aria-hidden />전체 아이콘은 lucide.dev/icons 에서 찾을 수 있어요. 가능하면 라이브러리에 있는 아이콘 안에서 고르고, 새 아이콘이 꼭 필요하면 같은 그리드와 선 굵기 규칙을 따라 제작해요.
Naming
아이콘 이름은 확장성을 위해 의미가 아닌 형상으로 지어요. 예를 들어 '관심' 기능에 쓰더라도 이름은 Heart 예요. 같은 형상을 여러 의미로 재사용할 수 있어요.
Size
아이콘은 기본 24px로 제공되며, 용도에 맞게 비율을 유지하며 조정할 수 있어요.
- 아이콘의 최소 크기는 12px 이에요.
- 크기는 dimension 토큰으로 지정해요(
size-x4,size-x5,size-x6). - 작은 크기(15px 이하)에서는 형태가 단순한 아이콘을 골라 시각적 복잡도를 줄여요.
Touch Area
아이콘을 단독 버튼으로 쓰면 가독성과 터치 편의를 위해 충분한 여백이 필요해요. 터치 영역은 최소 40px 이상을 확보하고, 24px 아이콘에는 44px 이상을 권장해요. 아이콘만 있는 버튼에는 반드시 aria-label 을 지정해요.
Color
아이콘 색상은 전경 토큰(text-fg-*)을 사용해요. lucide 아이콘은 currentColor 를 따르므로 부모의 텍스트 색상을 그대로 이어받아요.
- 기본 아이콘은
text-fg-neutral, 보조 아이콘은text-fg-neutral-muted또는text-fg-neutral-subtle을 사용해요. - 상태를 나타내는 아이콘은 역할 색상(
text-fg-positive,text-fg-critical…)을 사용하되, 색상만으로 의미를 전달하지 않아요.
With Typography
한 줄에 아이콘과 텍스트를 배치할 때는 간격을 dimension 토큰으로 설정하고 높이의 가운데에 정렬해요. 텍스트 크기에 맞는 아이콘 크기를 조합해요.
Line과 Fill
Line 아이콘은 디테일한 설명이 가능해 명확한 개념 전달에 좋아요. Fill 형태는 인식 속도가 빠르고 무게감이 있어 켜짐/꺼짐 같은 상태 전환에 효과적이에요. lucide는 Line 아이콘이므로, 선택 상태를 강조할 때는 fill="currentColor" 를 함께 지정해 Fill처럼 표현할 수 있어요.
<Heart className="size-x6" fill={liked ? 'currentColor' : 'none'} aria-hidden />- Top Navigation — 다른 영역의 주목도를 고려해 Line 아이콘을 사용해요.
- Bottom Navigation — 선택된 탭은 Fill, 나머지는 Line으로 표현해 현재 위치를 알려요.
- State — 켜짐/꺼짐 개념이 있는 버튼은 기본(Line), 켜짐(Fill)으로 상태를 전환해요.