Ikony

Dvě vrstvy: lucide-react jako UI ikonová sada (akce, navigace) a 5 značkových kategorie-piktogramů z manuálu (signifikují produktovou kategorii).

lucide
UI sada
lucide-react
4
Velikosti
14 · 16 · 20 · 24
2px
Stroke
lucide default
5
Kategorie marky
brand piktogramy

Velikosti

Čtyři velikosti přes Tailwind size-* utility. Default 16px (size-4) v tlačítkách a nav.

14px

size-3.5

Inline s textem, meta

16px

size-4

Default — tlačítka, nav

20px

size-5

Větší akce, hlavičky

24px

size-6

Hero, prázdné stavy

UI ikony (lucide)

Výběr běžných ikon. Import po jedné: import { ShoppingBag } from 'lucide-react'. Barva přes text-* token.

ShoppingBag
Search
Heart
User
Menu
ChevronRight
Plus
Minus
Check
X
Truck
Leaf
Star
ArrowRight
Filter
Trash2
Info
ShieldCheck
Sparkles

Kategorie-piktogramy

Pět značkových marek. Každá v barvě své kategorie; na soft tintu jako badge. Themují přes currentColor.

adaptogen

Adaptogen & Herbs

organic

Organic Mix

vitamins

Vitamins & Minerals

organs

Organs

beauty

Beauty

adaptogenorganicvitaminsorgansbeauty

Použití

  • lucide-react pro veškeré UI ikony (akce, navigace, stavy). Import po jedné, ne celý balík.
  • Kategorie-piktogramy jen jako značka produktové kategorie (karta, badge, obal) — ne jako UI ikony.
  • Velikost přes size-*, barva přes text-* token — nikdy inline hex.
  • Default velikost UI ikony = size-4 (16px), stroke nech lucide default (2px).