Icon Style Rules
Consistent visual language ensures clarity and professional appearance across all applications.
Do
- Stroke-based (not filled) for minimal aesthetic
- 2px stroke at 24px size（Lucide 既定）
- 24x24 viewBox square canvas
- 1px corner radius for internal corners
- Round end caps and line joins
- Optical centering not mathematical
- Simple shapes, high legibility
Don't
- Avoid filled shapes in standard contexts
- Don't mix filled/outline in same set
- No overly detailed or complex icons
- Avoid varying stroke widths
- Don't deviate from grid alignment
- Skip decorative elements
- Prevent visual imbalance
Sizing Scale
Icons scale consistently across six standard sizes, maintaining visual hierarchy and usability.
Color Rules
Icons adapt to context through semantic color application and interactive states.
Default
Inherits text color via currentColor
Accent
On hover, focus, or active state
Disabled
Uses secondary text color
Success
For positive actions/status
Warning
For alerts and caution states
Error
For errors and destructive actions
Info
For informational content
Navigation
移動・方向・メニュー。（12）
lucide/more-horizontal
Actions
操作（再生・編集・保存・検索 など）。（24）
lucide/share-2
Window
ウィンドウ操作（タイトルバー）。（3）
Files
フォルダ・ファイル・ライブラリ。（7）
Shapes
プレースホルダ・未知の名前のフォールバック（circle）。（2）
Status
状態表示（info / warning / error / success / help ほか）。（9）
lucide/triangle-alert
lucide/circle-check
Celestial — Moon Phases
Senastra 自作（fill 系・MIT）。（5）
Usage Guidelines
Best practices for implementing icons in buttons, navigation, forms, and other UI contexts.
Icon + Text Combinations
Navigation Item
Input Adornment
Table Context
| Name |
Status |
Action |
|
design-guide.pdf
|
Ready
|
|
|
Assets
|
Draft
|
|
Spacing Rules
Maintains clear visual separation while keeping elements grouped together.
Creates comfortable touch/click targets (minimum 32px). Use 8px for 24px icons.
Scale icons proportionally on mobile: 16px for text, 20px for nav, 24px default.