# How to choose an icon set: four measurements Coverage, grid, weight and licence: four measurements to choose an icon set on the product, not the preview, plus counts for five catalogue families. > Page: https://ui.eneawork.it/blog/come-scegliere-le-icone > Markdown: https://ui.eneawork.it/blog/come-scegliere-le-icone.md *2026-11-01* Un set di icone si sceglie con quattro misure: copertura, griglia, peso del tratto e licenza. Il resto è gusto, e il gusto non si discute in una code review. Le quattro misure si fanno sul prodotto, non sulla pagina di anteprima. Servono i nomi delle icone che usi, le dimensioni in cui le disegni, il peso che accetti nel bundle e la licenza che puoi rispettare. ## Le quattro misure ## 1. Copertura: quante icone mancano davvero La copertura non è il numero totale del set. È quante icone del prodotto esistono nella famiglia scelta, con il nome che ti serve. Un set da 5.166 icone con tre buchi nei comandi principali è meno coprente di un set da 324 che li ha tutti. Il catalogo EneUI indicizza 12.808 icone in cinque famiglie SVG, misurate il 1 novembre 2026: Tabler 5.166, Remix 3.229, Bootstrap Icons 2.078, Lucide 1.853, Heroicons 324. Il totale arriva da `/api/stats`, i conteggi per famiglia dall’indice delle icone: le due letture possono divergere di poche unità. ## 2. Griglia: la misura che si vede a 16px Una famiglia disegna su una griglia da 24px, un’altra su 20px, un’altra ancora su 16px. A 24px la differenza sparisce; nella toolbar a 16px il tratto si spegne. Prima di scegliere, guarda le icone alla dimensione reale, non a 64px nell’anteprima. ### Tratto e riempimento Il peso del tratto è una decisione di sistema, non di schermata. Se scegli 1,75px, resta 1,75px anche nell’icona piccola. Le varianti filled servono per lo stato attivo, non per variare il tono. ## 3. Peso: quanto costa un’icona Un SVG inline pesa poche centinaia di byte; un’icona font pesa l’intero set. Con un bundler moderno l’import nominato viene eliminato se non usato, ma solo se il pacchetto espone moduli separati. Verifica il risultato nel bundle, non nella documentazione. # quante icone diverse usa il progetto rg -o "<[A-Z][A-Za-z]+Icon" src | sort -u | wc -l # griglia e tratto dichiarati negli SVG rg -o 'viewBox="[^"]+"|stroke-width="[^"]+"' src/icons | sort | uniq -c # peso del pacchetto prima di installarlo npm view lucide-react dist.unpackedSize ## 4. Licenza: cosa devi conservare Tabler è MIT, Lucide è ISC, Remix Icon è Apache 2.0, Bootstrap Icons e Heroicons sono MIT. MIT e ISC chiedono il testo della licenza; Apache 2.0 chiede anche l’avviso di modifica. Un’icona è software: la licenza viaggia con il file. Il 1 novembre 2026 `/api/stats` restituisce 111.985 componenti, 1.556 blocchi, 12.808 icone e 1.472 librerie. L’indice delle icone, letto lo stesso giorno, conta 5.166 icone Tabler, 3.229 Remix, 2.078 Bootstrap Icons, 1.853 Lucide e 324 Heroicons. Per l’accessibilità, il 31 ottobre 2026 l’API Stack Exchange, interrogata con `/2.3/questions?order=desc&sort=votes&tagged=accessibility`, riporta 8.264 domande con tag `accessibility` e 556 voti sulla domanda più votata su `aria-label`. ## Il test in dieci minuti Prendi le venti icone più usate dal prodotto e cercale in due famiglie. Conta le mancanti e le quasi-equivalenti. Se una famiglia copre diciotto su venti, hai una scelta; se ne copre dodici, hai un compromesso da dichiarare. Poi guarda le due famiglie insieme a 16px e a 24px. La famiglia che vince a 16px è quella che userai davvero, perché è la dimensione in cui vivono le toolbar. ## Il limite da dichiarare Limite dichiarato: nessun set di icone copre i loghi di terze parti. GitHub, Google e i marchi dei clienti hanno licenze proprie e vanno presi da un brand kit o da un catalogo di loghi, non da una famiglia di icone. Mescolarli è corretto, perché il lettore li riconosce come marchi. Il record vivo è l’icona search di Tabler; il browser completo è su /icons e il record della famiglia Lucide su /components/lib/icons-lucide. Il confronto tra famiglie è in copertura icone 2026, i criteri di scelta in come scegliere una libreria UI, l’accessibilità in componenti React accessibili e il contrasto in palette UI. ## FAQ ### Quante icone deve avere un set? Almeno tutte quelle che il prodotto usa oggi, più le dieci che userai nella prossima funzione. Il totale del catalogo conta meno della copertura sui tuoi nomi. ### Meglio outline o filled? Outline per la maggior parte dell’interfaccia e filled per lo stato attivo. Mescolarli senza una regola fa sembrare il set incompleto. ### Posso mescolare due famiglie? Sì, ma solo per i marchi. Due famiglie di icone generiche hanno griglie e tratti diversi, e la differenza si vede a 16px. ### Le icone font sono più leggere? No, di solito pesano l’intero set. Un SVG inline o un import nominato tree-shaken costa meno se usi poche icone. ### Serve l’attributo alt sulle icone SVG? No, `alt` vale per le immagini. Un SVG decorativo va con `aria-hidden`, uno che porta significato ha bisogno di un nome accessibile.