Icon Sizes
テキストやUI要素とのバランスを考慮したアイコンサイズスケール。ボタンサイズに応じた適切なサイズを提供します。
Size Scale
6段階のセマンティックアイコンサイズスケール（12px〜32px）
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
✓
推奨
- ✓テキストサイズに比例したアイコンサイズを使用
- ✓タッチターゲットは最低24x24pxを確保（WCAG 2.5.8）
- ✓同じコンテキストでは一貫したサイズを維持
- ✓アイコンとテキスト間に適切なギャップを設定
✕
避けるべき
- ✗テキストより大きすぎるアイコン
- ✗同じコンポーネント内で異なるサイズの混在
- ✗スケール外の任意のサイズ
- ✗アイコンの歪み（縦横比の変更）