아이콘Icon

Lucide를 표준으로 채택합니다. Feather 계열의 가벼운 스트로크와 1,400+개의 충분한 양을 갖추고 있어 디자인 시스템 기본 셋으로 적합합니다. 스트로크 두께는 1.75px로 고정합니다 (기본 2px보다 얇게).

5단계 사이즈를 제공합니다. 버튼·링크 기본은 16px(md), 툴바·헤더는 24px(xl)을 기본으로 삼으세요. 같은 줄의 텍스트와 시각적 정렬이 맞도록 텍스트 크기의 0.9–1.0배 정도를 선택합니다.

1. 텍스트를 대체하지 않는다 — 아이콘은 보조 수단입니다. 의미가 명확한 곳(검색·닫기·설정)을 제외하고는 라벨을 붙이세요. 라벨 없는 아이콘은 반드시 aria-label로 보완합니다.

2. 한 화면에 한 가지 패밀리만 — Lucide와 Heroicons를 섞지 않습니다. 스트로크 두께·끝 처리가 달라 화면이 들쭉날쭉 보입니다.

3. 크기는 주변 텍스트에 맞춘다 — 14px 본문에는 14–16px 아이콘, 24px 제목에는 20–24px 아이콘. 비율이 맞지 않으면 아이콘이 “튀어” 보입니다.

4. 색은 텍스트 토큰을 따른다 — 본문 옆 아이콘은 --color-text 또는 --color-text-muted, 강조는 --color-accent. 자체 색을 가지는 일러스트 아이콘은 예외입니다.