Icon Sizes
텍스트와 UI 요소에 균형 있게 맞춰진 아이콘 크기 스케일. 버튼 크기에 따라 적합한 사이즈를 제공합니다.
Size Scale
12px~32px, 6단계 시맨틱 아이콘 크기 스케일
2xsxssmmdlgxl2xs12px배지
xs14px소형 버튼
sm16px기본 버튼
md20pxIconButton
lg24px카드, 내비
xl32px히어로
| Icon | Token | Size | 사용 사례 |
|---|---|---|---|
iconSize.2xs | 12px | 배지 | |
iconSize.xs | 14px | 소형 버튼 | |
iconSize.sm | 16px | 기본 버튼 | |
iconSize.md | 20px | IconButton | |
iconSize.lg | 24px | 카드, 내비 | |
iconSize.xl | 32px | 히어로 |
Icon + Text Alignment
텍스트 크기에 맞는 아이콘 크기와 간격 조합
Label
SizeXS / SM
Icon
14pxGap
gap-1 (4px)Label
SizeDefault / LG
Icon
16pxGap
gap-2 (8px)Label
SizeXL
Icon
20pxGap
gap-3 (12px)Usage Guidelines
컨텍스트별 권장 아이콘 크기
iconSize.2xs(12px)배지 아이콘, 소형 인디케이터
iconSize.xs(14px)xs/sm 버튼, 태그
iconSize.sm(16px)default/lg 버튼, 폼 요소
iconSize.md(20px)IconButton, 내비게이션
iconSize.lg(24px)대형 아이콘, 카드
iconSize.xl(32px)빈 상태, 히어로 섹션
| Sizes | 값 | 사용 사례 |
|---|---|---|
iconSize.2xs | 12px | 배지 아이콘, 소형 인디케이터 |
iconSize.xs | 14px | xs/sm 버튼, 태그 |
iconSize.sm | 16px | default/lg 버튼, 폼 요소 |
iconSize.md | 20px | IconButton, 내비게이션 |
iconSize.lg | 24px | 대형 아이콘, 카드 |
iconSize.xl | 32px | 빈 상태, 히어로 섹션 |
Best Practices
✓
권장
- ✓텍스트 크기에 비례한 아이콘 크기 사용
- ✓터치 타겟 최소 24×24px 확보 (WCAG 2.5.8)
- ✓같은 컨텍스트에서 일관된 크기 유지
- ✓아이콘과 텍스트 사이에 적절한 간격 설정
✕
지양
- ✗텍스트보다 너무 큰 아이콘
- ✗같은 컴포넌트 안에 다른 크기 혼용
- ✗스케일 외 임의 크기
- ✗아이콘 비율 왜곡 (가로세로 비율 변경)