42 lines
1.6 KiB
Markdown
42 lines
1.6 KiB
Markdown
# Icons (No Emoji, Modern Minimal)
|
||
|
||
## Hard rules
|
||
|
||
- Do not use emoji as icons (or decoration).
|
||
- Use one icon family across the product. Do not mix outlined/filled/3D/emoji styles.
|
||
- Prefer obvious meanings over clever metaphors. If an icon can be misunderstood, add a text label.
|
||
|
||
## “Intuitive + refined” checklist
|
||
|
||
- **Style consistency**: same stroke weight (outline) or same fill style (filled).
|
||
- **Sizes**: standardize on 16/20/24 (or your system sizes); avoid random sizes per screen.
|
||
- **Optical alignment**: align visually (icon bounding boxes lie; nudge when needed).
|
||
- **Touch targets**: icon buttons still need adequate hit area; do not shrink interactive area to the glyph.
|
||
- **Labels**: primary actions should be text or text+icon; icon-only is reserved for universally-known actions.
|
||
- **Tooltips**: tooltips are support, not the primary way to understand an action.
|
||
|
||
## Prefer text over icons when
|
||
|
||
- The action is uncommon in your product.
|
||
- The icon is domain-specific (users won’t share the same mental model).
|
||
- The action is destructive or high-stakes (use explicit wording).
|
||
|
||
## Suggested icon sets (pick one; do not mix)
|
||
|
||
- Lucide / Feather-style outline icons (web-friendly)
|
||
- Material Symbols (outlined or rounded; pick one)
|
||
- SF Symbols (Apple platforms)
|
||
|
||
## Common mappings (use cautiously)
|
||
|
||
- Search: magnifier
|
||
- Filter: funnel
|
||
- Settings: gear
|
||
- More actions: kebab (vertical three dots)
|
||
- Close: x
|
||
- Back: left arrow
|
||
- Info: i in circle (use sparingly; don’t turn UI into a tooltip museum)
|
||
|
||
If an icon is not instantly clear, prefer a short label instead of inventing a new icon metaphor.
|
||
|