Lucide-style 24×24 라인 아이콘. stroke="currentColor" 기반으로 텍스트 색상을 상속합니다. 카드를 클릭하면 SVG 코드가 클립보드에 복사됩니다.
Navigation
Action
Status
Content
System
Data & Chart
Size Preview
아이콘 크기는 --icon-xs ~ --icon-xl 토큰으로 정의됩니다. 아래는 check 아이콘의 5단계 크기 비교입니다.
| Scale | Token | Size | Use Case |
|---|---|---|---|
| XS | --icon-xs |
14px | 인라인 배지, 밀집 테이블 내 액션 |
| SM | --icon-sm |
16px | 보조 버튼 아이콘, 필터 칩, 사이드바 아이템 |
| MD | --icon-md |
20px | 기본 버튼 아이콘, 인풋 접두/접미, 네비게이션 |
| LG | --icon-lg |
24px | 섹션 헤더, 카드 아이콘, 모바일 터치 타겟 |
| XL | --icon-xl |
32px | Empty state, 온보딩, 히어로 일러스트레이션 |
Usage Rules
접근성과 일관성을 위한 아이콘 사용 규칙입니다.
장식용 아이콘
텍스트 레이블과 함께 사용되는 보조 아이콘은 스크린리더에서 무시합니다.
aria-hidden="true"
인터랙티브 아이콘
아이콘만으로 구성된 버튼은 반드시 접근 가능한 이름을 제공합니다.
aria-label="설명"
Stroke Width
모든 아이콘은 --icon-stroke: 1.5 토큰 값을 기본으로 사용합니다. 시각적 일관성을 위해 변경하지 않습니다.
stroke-width="1.5"
Color Inheritance
아이콘 색상은 currentColor를 사용하여 부모 텍스트 색상을 상속합니다. 직접 색상 지정은 지양합니다.
stroke="currentColor" fill="none"
Line Cap & Join
모든 선 끝과 꺾임은 둥글게 처리하여 부드럽고 일관된 형태를 유지합니다.
stroke-linecap="round" stroke-linejoin="round"
Filled 아이콘 금지
CHAART OS는 라인 아이콘만 사용합니다. fill 기반 솔리드 아이콘은 브랜드 가이드라인에 부합하지 않습니다.
fill="none" 유지
SVG Template
새 아이콘 추가 시 아래 기본 구조를 따릅니다.