Panoramica dei pacchetti Iconify

Sono disponibili diversi pacchetti di icone Iconify come pacchetti npm con componenti Icon di Astro. Ogni pacchetto ha il proprio import e utilizza la stessa API basata su name.

Confronto dei pacchetti

Pacchetto	Prefisso	Icone	Stile	Ideale per	Pagina
Material Design	`mdi`	7.638	Filled + outlined	Uso generico, copertura più ampia	Material Design
Carbon	`carbon`	2.582	Outlined	Design enterprise/IBM, linee pulite	Carbon
Phosphor	`ph`	9.161	Pesi multipli	Opzioni di peso flessibili (da thin a fill)	Phosphor
Tabler	`tabler`	6.034	Basato su tratti	Icone a linee nitide, tratto uniforme	Tabler

Utilizzo

Ogni pacchetto ha il proprio componente Icon.astro:

---
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import CarbonIcon from '@f5-sales-demo/icons-carbon/Icon.astro';
import PhIcon from '@f5-sales-demo/icons-phosphor/Icon.astro';
import TablerIcon from '@f5-sales-demo/icons-tabler/Icon.astro';
---

<MdiIcon name="database" />
<CarbonIcon name="cloud" />
<PhIcon name="globe" />
<TablerIcon name="shield" />

Le icone vengono renderizzate come SVG inline utilizzando currentColor — si adattano automaticamente alla modalità chiara e scura.

Scegliere un pacchetto

Copertura più ampia: Material Design Icons dispone del maggior numero di icone (7.638) con varianti filled e outlined per praticamente ogni caso d’uso.
Design enterprise: Carbon segue il linguaggio di design IBM con contorni puliti e coerenti, adatti ad applicazioni aziendali.
Flessibilità di peso: Phosphor offre sei varianti di peso (thin, light, regular, bold, fill, duotone) per regolare con precisione il peso visivo.
Tratti uniformi: Tabler utilizza uno spessore di tratto uniforme di 2px su tutte le 6.034 icone per un aspetto coeso.

Consultate la pagina dedicata di ciascun pacchetto per griglie di icone curate e link per la navigazione.