ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
1.5 KiB
1.5 KiB
Icons
Libraries
| Library | Use |
|---|---|
lucide-react |
Default UI icons (nav, actions, social) |
@iconify/react |
Occasional extended sets when Lucide lacks a glyph |
Do not mix many icon libraries in one view. Prefer Lucide for consistency.
Sizing
| Context | Size |
|---|---|
Inline with text-sm |
size-4 (16px) |
| Buttons (default) | Controlled by --btn-icon-size (0.875–1.25rem) |
| Icon buttons | Match button box; glyph ~20px (size-5) for menu |
| Cards / features | size-5 / size-6 |
| Decorative empty states | size-8–size-10 max |
Use Tailwind size-* from the spacing scale. Avoid arbitrary w-[18px].
Color
- Inherit from parent text (
currentColor) whenever possible. - Semantic:
text-muted-foreground,text-primary,text-destructive. - Never hardcode icon hex fills in JSX.
Alignment
- Pair icons with labels using flex +
gap-2/ button gaps. - Decorative icons:
aria-hidden. - Standalone icon buttons: mandatory
aria-label(or visible text).
<Button variant="ghost" size="icon" aria-label="باز کردن منو">
<Menu aria-hidden className="size-5" />
</Button>
Stroke
Lucide defaults are fine. Do not globally remount icons with custom stroke widths that fight the set.
Forbidden
- Emoji as UI icons.
- PNG icons for simple glyphs.
- Different visual weights in the same toolbar.