Le migliori librerie di icone gratuite: Lucide vs Heroicons vs Phosphor vs Tabler | We.Inc
13 librerie di icone SVG gratuite a confronto: le stesse icone da ognuna, licenze reali verificate in ogni pacchetto, numero di icone, stili, pacchetti React e Vue e come usarle in modo accessibile.
Librerie di icone SVG gratuite a confronto
Lucide, Heroicons, Phosphor e Tabler sono i set di icone gratuiti più pratici per i siti web: hanno tutti licenze permissive (ISC o MIT) e offrono tutti pacchetti React che includono nel bundle solo le icone che importi. Tabler ha più icone, Phosphor più pesi e Heroicons il set più piccolo e compatto.
Scelta rapida
Se vuoi
Prova
Un set outline ampio e coerente
Lucide o Tabler
Più pesi della stessa icona
Phosphor
Un set piccolo in linea con Tailwind UI
Heroicons
Loghi di brand
Simple Icons (verifica le regole sui marchi)
Lo stile di Google, con peso variabile
Material Symbols
Le stesse otto icone di uso quotidiano disegnate da sei librerie, così puoi confrontarne direttamente lo stile, poi una tabella completa di tredici librerie con le licenze lette dal file LICENSE di ogni pacchetto, il numero di icone ricavato dai file pubblicati e i pacchetti da installare.
Confronta la griglia. Ogni riga è una libreria che disegna le stesse otto idee: home, ricerca, utente, impostazioni, cuore, elimina, posta e notifiche.
Controlla la colonna della licenza prima di scegliere. Quasi tutte sono MIT o ISC, ma Remix Icon ora ha una licenza propria e Font Awesome Free richiede l'attribuzione.
Installa il pacchetto per il tuo framework dalla colonna React o Vue, oppure copia i singoli file SVG nel tuo progetto.
Segui le note sull'accessibilità qui sotto, così le icone decorative restano silenziose per gli screen reader e quelle significative ricevono un'etichetta.
Scegli una libreria e resta su quella. Mescolare set con spessori del tratto e stili degli angoli diversi fa sembrare un'interfaccia incompiuta.
Importa le icone una per una (import { Search } from 'lucide-react') invece di importare l'intera libreria, così il tuo bundle contiene solo ciò che usi.
Imposta il colore delle icone con currentColor, così seguono il colore del testo di pulsanti e link, compresi hover e modalità scura.
Dai ai pulsanti con sola icona un nome accessibile con aria-label sul pulsante e nascondi lo svg stesso con aria-hidden="true".
Ricontrolla la licenza quando aggiorni. Remix Icon è passata da Apache 2.0 a una licenza propria con la versione 4.9.0, rilasciata a gennaio 2026.
Domande frequenti
Posso usare queste icone in progetti commerciali?
Sì per tutte e tredici le librerie elencate, nei limiti delle loro licenze. MIT, ISC e Apache 2.0 consentono l'uso commerciale se conservi l'avviso di licenza con le copie. Font Awesome Free richiede l'attribuzione, che i suoi file contengono già. Remix Icon consente l'uso nei prodotti ma vieta di vendere le icone come pacchetto o di usarle come logo.
Lucide è la stessa cosa di Feather?
Lucide è nato come fork della community di Feather quando gli aggiornamenti di Feather hanno rallentato. Mantiene lo stile di Feather, ha molte più icone ed è mantenuto attivamente. Le icone provenienti da Feather restano sotto la licenza MIT di Feather; il resto di Lucide è ISC.
Heroicons o Lucide?
Heroicons è un set più piccolo dei creatori di Tailwind CSS, con versioni solid e piccole coordinate, adatto alle interfacce costruite con Tailwind. Lucide ha diverse volte più icone, quindi è meno probabile che tu resti senza. Entrambi hanno licenze permissive e pacchetti React.
Meglio un icon font o SVG?
SVG, nella maggior parte dei casi. Lo SVG inline o un pacchetto di componenti viene reso in modo nitido, può essere stilizzato per singolo path, include solo le icone che usi e funziona con gli screen reader. Gli icon font possono caricare un intero font per poche icone e fallire senza avvisi se il font viene bloccato.
Come rendo accessibili le icone?
Decidi se l'icona ha un significato. Le icone decorative accanto al testo ricevono aria-hidden="true". Un'icona che è l'unico contenuto di un pulsante o di un link ha bisogno di un'alternativa testuale, di solito aria-label sul pulsante o un testo visivamente nascosto al suo interno.
Tre modi per mettere un'icona in una pagina
I pacchetti di componenti come lucide-react o @heroicons/react sono la soluzione più semplice in un progetto React o Vue. Ogni icona è un componente, importi solo quelle che usi e le props impostano dimensione, colore e spessore del tratto.
SVG inline significa incollare il markup svg direttamente nel tuo HTML. Non richiede pacchetti né richieste e il CSS può stilizzarne ogni parte, ma ripete il markup ovunque compaia l'icona.
Uno sprite SVG mette tutte le icone in un unico file come elementi symbol, e ogni utilizzo ne richiama una con <use href="/icons.svg#search">. Il browser mette in cache il file una sola volta, il che è adatto a siti con molte icone su pagine HTML semplici.
Come abbiamo verificato le licenze
Ogni licenza in tabella proviene dal file LICENSE presente nella versione del pacchetto indicata, non dai metadati del pacchetto. È importante: la scheda npm di Remix Icon riporta ancora Apache 2.0, mentre il file LICENSE della versione 4.9.1 è la più recente Remix Icon License v1.0. Il numero di icone è il numero di file SVG che il pacchetto distribuisce nella cartella indicata.
Le licenze possono cambiare tra una versione e l'altra. Prima di pubblicare, apri il file LICENSE della versione che installi.
Librerie di icone gratuite a confronto (versioni e conteggi come pubblicati su npm, verificati il 13 ottobre 2026)
Libreria
Licenza
Icone
Stili
React
Vue
Lucide 1.55.0
ISC
Outline (spessore del tratto regolabile)
Heroicons 2.2.0
MIT
324 (ognuna in 4 stili)
Outline 24, solid 24, mini 20, micro 16
@heroicons/react
@heroicons/vue
Phosphor 2.1.1 (core)
MIT
1,512 (ognuna in 6 pesi)
Thin, light, regular, bold, fill, duotone
@phosphor-icons/react
@phosphor-icons/vue
Tabler Icons 3.49.0
MIT
5,184 outline, 1,054 filled
Outline (tratto regolabile), filled
@tabler/icons-react
@tabler/icons-vue
Bootstrap Icons 1.13.2
MIT
2,078 file (molti hanno un gemello -fill)
Varianti outline e fill
react-bootstrap-icons (community)
Nessuno ufficiale; usa SVG o l'icon font
Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929 simboli
Outlined, rounded, sharp; assi fill, weight e grade
Usa il font di Google Fonts o i pacchetti SVG
Usa il font di Google Fonts o i pacchetti SVG
Remix Icon 4.9.1
Remix Icon License v1.0
1,539 (line e fill)
Line, fill
@remixicon/react
@remixicon/vue
Font Awesome Free 7.3.1
CC BY 4.0 (icone), SIL OFL 1.1 (font), MIT (codice)
2,001 solid, 273 regular, 609 brands
Solid, regular (parziale), brands
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome
Ionicons 8.1.0
MIT
1,357 file
Filled, outline, sharp
Web component (ion-icon)
Web component (ion-icon)
Iconoir 7.12.1
MIT
1,383 regular, 288 solid
Regular (tratto), solid
@iconoir/vue
Radix Icons 1.3.2
MIT
Un solo stile, disegnato su una griglia 15 × 15
@radix-ui/react-icons
Nessuno ufficiale
Feather 4.29.2
MIT
Outline
react-feather (community)
vue-feather-icons (community)
Simple Icons 16.35.0
CC0 1.0 (i file SVG)
3,466 loghi di brand
Marchi di brand monocromatici
@icons-pack/react-simple-icons (community)
Usa SVG
ISC
Le icone prese da Feather sono anche sotto MIT. Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie.
Apache 2.0
Includi il testo della licenza con le copie e segnala le modifiche che apporti.
Remix Icon License v1.0
Gratuita nei prodotti commerciali, ma non puoi vendere le icone come pacchetto, costruirci un set di icone concorrente né usarne una come logo. Le versioni fino alla 4.8.0 erano Apache 2.0; la nuova licenza parte dalla 4.9.0.
CC BY 4.0 (icone), SIL OFL 1.1 (font), MIT (codice)
L'attribuzione è obbligatoria; i commenti già presenti nei file scaricati valgono come attribuzione, quindi non rimuoverli. Le icone Pro sono a pagamento.
MIT
Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie.
MIT
Conserva l'avviso di copyright con le copie. Aggiornata raramente; Lucide è nato da qui.
CC0 1.0 (i file SVG)
I file sono di pubblico dominio, ma i loghi sono marchi dei rispettivi brand. Segui le linee guida di ciascun brand.
Home
Cerca
Utente
Impostazioni
Preferito
Elimina
Posta
Notifiche
Le stesse otto icone, sei librerie
Sfondo scuro
Otto icone comuni come le disegna ogni libreria
Libreria
Icona {concept} di {library}
Le icone sono file SVG non modificati di ogni pacchetto, nella versione indicata nella tabella qui sotto (sono cambiati solo i nomi dei file), mostrati sotto le rispettive licenze.
Testi delle licenze:
Librerie a confronto
Note sulle licenze
Usare le icone in modo accessibile
In tutti e tre i casi lo svg è nascosto agli screen reader e il pulsante porta il nome. Se un'icona compare accanto a testo visibile, nascondi l'icona e lascia parlare il testo.