Come scegliere un set di icone: quattro misure

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 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.