← 목록으로
아이콘 시스템
라이브러리, 크기, 색상, 아이콘+텍스트 페어링
아이콘 라이브러리 예시
권장: Lucide Icons, Heroicons, Feather Icons
사용 가이드라인
버튼 내 아이콘
버튼 크기에 따라 아이콘 크기 조정
입력 필드 아이콘
Leading/Trailing 아이콘 지원
89. 아이콘 시스템
Define an icon system:
**Icon Library Choice**:
- Lucide Icons (recommended)
- Or: Heroicons, Phosphor, Feather
- Consistent style throughout
**Icon Sizes**:
- xs: 12px
- sm: 16px
- md: 20px (default)
- lg: 24px
- xl: 32px
- 2xl: 48px
**Stroke Width**:
- Consistent: 1.5px or 2px
- Match across all icons
- Scale if needed for sizes
**Icon Colors**:
- currentColor (inherits text color)
- Semantic: success, warning, error
- Muted: gray-500
- Interactive: hover state
**Icon Categories**:
- Navigation: menu, arrow, chevron
- Actions: edit, delete, save, share
- Status: check, x, alert, info
- Objects: user, file, folder, image
- Communication: mail, chat, phone
- Media: play, pause, volume
**Icon + Text Pairing**:
- Leading icon: icon before text
- Trailing icon: icon after text
- Gap: 8px (2)
- Vertical align: center
**Button Icons**:
- Size: 16-20px in buttons
- Color: matches button text
- Position: leading or trailing
**Icon-Only Buttons**:
- Minimum touch target: 44x44px
- Icon centered
- Accessible label required
**Animated Icons**:
- Loading spinner
- Success checkmark draw
- Menu to X transformation
- Chevron rotation
**Custom Icons**:
- SVG format
- Same grid/size as library
- Consistent stroke weight
- No fills (outline style)
**Icon Component**:
```tsx<Icon
name="settings"
size="md"
color="muted"
className="..."
/>
**Accessibility**:
- aria-hidden if decorative
- aria-label if meaningful
- Role="img" for standalone
Tech: Lucide React + Tailwind + SVG sprites