Icons
Lucide Iconsライブラリをベースに、一貫性のあるアイコンシステムを提供します。サイズの詳細はIcon Sizesを参照してください。
Lucide Icons
24px viewBox
5 サイズトークン
Icon Library
クリックしてアイコン名をコピー
Navigation
Actions
Media
Status
Communication
Users
Files
Development
Objects
AI & ML
Voice & Audio
Call Center
Chat & Messaging
Analytics
Business
Workflow
Dashboard
Others
Size Scale
5段階のセマンティックアイコンサイズスケール。詳細はIcon Sizesトークンページを参照
icon-xs14pxicon-sm16pxicon-md20pxicon-lg24pxicon-xl32px| トークン | サイズ |
|---|---|
icon-xs | 14px |
icon-sm | 16px |
icon-md | 20px |
icon-lg | 24px |
icon-xl | 32px |
Auto Sizing
UIコンポーネント内のアイコンは自動的にサイズが調整されます。classNameの指定は不要です。
Button lg
テキスト付き
icon-sm
IconButton lg
アイコンのみ
icon-lg
テキスト付き
leftIcon / rightIconicon-xs14pxicon-xs14pxicon-sm16pxicon-sm16pxicon-sm16pxアイコンのみ
IconButtonicon-xs14pxicon-sm16pxicon-sm16pxicon-md20pxicon-lg24px自動サイズ調整はSVGを直接レンダリングするコンポーネントに対して機能します。<span><svg>…</svg></span>のようなラッパー要素がある場合は動作しません。