```
Grigna usa una sola libreria: **[Lucide](https://lucide.dev)**, versione **1.57.0** (licenza ISC). Il tratto è sottile e arrotondato, coerente con il tono pulito e amichevole del sistema.
## Perché una sola libreria
Icone di librerie diverse hanno spessori, angoli e proporzioni diversi: messe vicine, si vede subito. Se a Lucide manca un'icona, la si disegna nello stesso stile (griglia 24×24, tratto 2px, estremità arrotondate) e la si aggiunge a Grigna. Non si prende da un'altra libreria.
## Come si usa
Con il pacchetto UMD:
```html
```
Oppure si copia il file SVG da `lucide-static@1.57.0/icons/{nome}.svg`. In entrambi i casi l'icona prende il colore del testo (`currentColor`).
Misure: `--grigna-size-icon-sm` (16px) dentro badge e filtri, `--grigna-size-icon-md` (20px) nei bottoni e accanto al testo, `--grigna-size-icon-lg` (24px) da sola. I componenti di Grigna dimensionano già le icone che contengono.
## Regole
- **Icona più testo, quasi sempre.** Un'icona da sola si capisce solo se è universale (cerca, chiudi, menu). In quel caso il bottone ha un `aria-label`.
- **Le icone decorative si nascondono** agli screen reader con `aria-hidden="true"`.
- **Il colore dell'icona è quello del testo vicino.** Non si colora un'icona per farla notare.
- **Stesso concetto, stessa icona** in tutto il prodotto.
## Icone disegnate per Grigna
Quando Lucide non ha un'icona, la si disegna nello stesso stile e la si salva in `icons/`, nella cartella del livello a cui appartiene: `icons//`. Le icone di un livello brand sono elencate nelle sue docs.
Si usano copiando il contenuto del file SVG così com'è dentro la pagina, con `aria-hidden="true"` sull'elemento `