기초

아이콘

Lucide 선 아이콘의 고른 어휘, 16·20·24 크기와 획 굵기, 이름 규칙, 신뢰 상태 아이콘과 라벨 짝.

Lucide

lucide-react(ISC)를 쓴다. 이미 의존성에 있어 새 런타임 의존성이 0이고, 24 격자에 획을 prop으로 조절하며, 신뢰 상태에 필요한 기호(circle-dashed, link-2-off, pencil-line, scan-eye)가 있다. Phosphor·Tabler는 새 의존성이라 보류했다.

크기와 획

크기는 16·20·24만, 획은 16에서 1.5, 20에서 1.75, 24에서 2. 조석 앱의 얇은 아이콘 인상에 맞춘 값이다. --cb-icon-sm/md/lg 토큰과 같다.

크기
크기	획	쓰는 곳
16px	1.5	행 안, 출처 줄, 버튼 sm
20px	1.75	기본. 버튼, 목록 아이콘
24px	2	빈 상태 원 안 아이콘, 탭 막대

고른 어휘

Icon 컴포넌트가 아는 이름은 45개다(아래 목록은 icons.ts에서 바로 읽는다). 이름을 더하는 것은 디자인 결정이다 — 목록을 짧게 지켜 제품이 하나의 시각 언어로 말하게 한다.

신뢰 상태 아이콘

신뢰 상태 아이콘은 항상 텍스트 라벨과 함께 나온다. 아이콘 하나만으로 상태를 말하지 않는다. 아래는 실제 TrustLabel이다.

상태 ↔ 아이콘 ↔ 선
상태	Lucide 아이콘	선	실제 라벨
verified	file-check-2	실선 (상세에서만 라벨)	원문 일치
inferred	circle-dashed	점선	추정
self-stated	pencil-line	선 없음 + 연필	직접 작성
user-reviewed	user-check	실선 (상세)	내가 검토함
source-unavailable	link-2-off	끊긴 선	원문 열 수 없음
needs-review	scan-eye	실선 + 머리 표식	검토 필요
reverified	history	이력에서만	다시 검토함

규칙

이렇게아이콘은 기본이 장식이다(aria-hidden). 아이콘만으로 의미를 전할 때만 label을 준다.
이렇게아이콘만 있는 버튼은 IconButton을 쓰고 반드시 이름(aria-label)을 준다.
이렇게색은 currentColor. forced-colors에서도 남는다. 아이콘은 회전·애니메이션하지 않는다(회전은 Loader의 일).
이렇게 하지 않기서비스 로고를 남발하지 않는다. 출처 줄에는 자료 유형 아이콘(mail, calendar, file-text) + 서비스 이름 글자. 공식 컬러 로고는 연결 화면과 Google 로그인 버튼에만.
이렇게 하지 않기스톡 사진, 사람 일러스트, 3D 오브젝트는 쓰지 않는다. 빈 상태에는 원 안의 선 아이콘 하나(24px) + 문장 하나 + 버튼 하나.

실제 컴포넌트: 아이콘 버튼의 이름

보이는 글자는 없지만 스크린리더는 “복사”, “닫기”로 읽는다.

아이콘 크기 토큰: --cb-icon-sm 16 · --cb-icon-md 20 · --cb-icon-lg 24