Cerca nel sito

Icone SVG gratis: libreria di simboli vettoriali da scaricare

Una raccolta di icone e simboli vettoriali originali per interfacce, siti web e social, con la guida per scegliere, ricolorare e inserire le icone SVG nei tuoi progetti.

Apri qualsiasi app e prova a contarle: la lente per cercare, il cuore dei preferiti, le tre righe del menu, il carrello. Le icone sono ovunque, e le capisci in un attimo senza leggere una parola.

Proprio per questo una brutta icona si nota subito. Basta un tratto più spesso degli altri, o un angolo diverso, e il sito sembra fatto in fretta. Il segreto di un’interfaccia curata è usare un set di icone coerente, e quasi sempre quel set è fatto di SVG.

In questa guida trovi una libreria di icone SVG gratuite, disegnate tutte con le stesse regole, e ti mostro come sceglierle, ricolorarle e inserirle nei tuoi progetti, anche senza scrivere codice.

Perché le icone dovrebbero essere SVG

Un’icona si vede piccola, a 16 o 24 pixel, ma su uno schermo ad alta densità quei pixel diventano il doppio o il triplo. Un PNG va preparato in più dimensioni, altrimenti si sfoca. Un SVG, come hai visto nella guida ai file SVG, resta nitido a qualsiasi misura con un solo file.

C’è anche un vantaggio pratico: un’icona SVG pesa pochissimo, spesso meno di mezzo kilobyte, e la puoi ricolorare senza aprire un programma di grafica. Per questo i set più usati del web, nei siti come nelle app, sono distribuiti in SVG.

Nota

Fino a qualche anno fa si usavano molto i “font di icone”, cioè font in cui ogni lettera è un disegno. Oggi si preferiscono gli SVG: si allineano meglio al testo, non spariscono se il font non si carica e sono più facili da rendere accessibili ai lettori di schermo.

Come riconoscere un buon set di icone

Un set professionale non è una raccolta di disegni belli. È un sistema in cui ogni icona segue le stesse regole, così messe una accanto all’altra sembrano scritte con la stessa penna. Quando scegli un set, controlla queste quattro cose.

  • La stessa griglia. Lo standard più diffuso è 24 × 24: tutte le icone nascono in un quadrato di 24 unità, quindi hanno lo stesso ingombro.
  • Lo stesso spessore del tratto. Di solito 1,5 o 2. Mescolare tratti diversi è l’errore che si nota di più.
  • Gli stessi angoli e le stesse estremità. Tutti arrotondati o tutti netti, mai metà e metà.
  • Un margine interno. Il disegno non tocca i bordi: lascia circa 2 unità libere, così le icone sembrano della stessa misura anche quando la forma è diversa.
Icona di una casa disegnata su una griglia 24 per 24, con il margine interno di 2 unità tratteggiato e il tratto di spessore 2 con estremità arrotondate.
Anatomia di un’icona: griglia 24 × 24, margine di 2 unità, tratto di spessore 2 con estremità arrotondate.

Sono proprio le regole con cui ho disegnato le icone qui sotto. In più, ognuna usa currentColor: prende il colore del testo intorno, e tra poco vedi perché è così comodo.

La libreria di icone SVG gratuite

Ecco 24 icone per le interfacce di tutti i giorni: navigazione, account, messaggi, acquisti, file e condivisione. Tutte su griglia 24 × 24, con tratto 2 ed estremità arrotondate. Con “Copia” prendi il codice da incollare nella pagina, con “Scarica” il file.

Tutte le icone di questa raccolta le ho create e curate per questo sito, e sono tue da usare: in progetti personali e commerciali, per te o per i tuoi clienti, modificate come preferisci. Non serve citarmi, anche se mi fa piacere. L’unica cosa che ti chiedo è di non rivenderle o ridistribuirle così come sono, da sole o in raccolte.

E le icone dei social?

Nella raccolta non trovi i loghi di Instagram, Facebook o LinkedIn, ed è voluto. Sono marchi registrati: ogni azienda decide come si possono usare, con quali colori e a che distanza da altri elementi.

Il modo corretto è scaricarli dal kit ufficiale del marchio, che di solito include già i file SVG e le regole da rispettare. Li trovi, per esempio, nelle risorse del marchio di Meta (Facebook, Instagram, WhatsApp), di LinkedIn, di X e di YouTube. Non ridisegnarli e non cambiarne le proporzioni.

Come cambiare colore a un’icona SVG

Hai scelto l’icona, ma ti serve blu, o bianca su un pulsante scuro. Hai tre modi per farlo, dal più veloce al più flessibile.

Senza codice, in un programma di grafica

Trascina il file SVG in Figma, Inkscape o Illustrator, selezionalo e cambia il colore del tratto. Poi esportalo di nuovo in SVG. È la strada giusta se l’icona ti serve in una presentazione, in un volantino o in un progetto grafico.

Modificando il file

Apri il file con un editor di testo e cerca stroke="currentColor". Se al posto di currentColor scrivi un colore preciso, come #1d4ed8, l’icona sarà sempre di quel colore, ovunque la usi.

Con currentColor, il metodo professionale

Se l’icona è incollata nel codice della pagina, lasciale currentColor e cambia solo il colore del testo intorno. È il metodo che usano i siti professionali: l’icona segue da sola il colore del pulsante, del link al passaggio del mouse e perfino del tema scuro.

CSS
.pulsante {
  color: #ffffff;
}

.pulsante:hover {
  color: #e2b04e;
}
La stessa icona a forma di campanella su tre sfondi diversi: scura su chiaro, bianca su scuro e scura su oro, cambiando solo il colore del testo.
Un solo file, tre colori: con currentColor l’icona prende il colore del testo intorno.

Attenzione

currentColor funziona solo quando l’SVG fa parte del codice della pagina. Se usi l’icona con un tag img, il colore resta quello scritto nel file e il CSS della pagina non può cambiarlo.

Come inserire le icone nel tuo sito

Per una o due icone basta incollare il codice dove ti serve. Quando le icone diventano tante, conviene uno “sprite”: un unico file che le contiene tutte, da richiamare per nome.

Incollata nel codice

Copia l’icona dalla libreria e incollala nell’HTML, accanto al testo che accompagna. La dimensione la decidi con width e height, oppure dal CSS.

HTML
<a href="/carrello/" class="link-icona">
  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="9.5" cy="20" r="1.5" />
    <circle cx="17" cy="20" r="1.5" />
    <path d="M3 4h2.5l2.3 11.2a1 1 0 0 0 1 .8h9a1 1 0 0 0 1-.8L20.5 8H6.3" />
  </svg>
  Carrello
</a>

Con uno sprite: tutte le icone in un file

Metti ogni icona dentro un elemento symbol con un nome, raccoglile in un file e richiamale con use. Il browser scarica il file una volta sola e lo riusa in tutto il sito.

HTML
<!-- icone.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="cerca" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="10.5" cy="10.5" r="6.5" />
    <path d="m15.5 15.5 5 5" stroke-linecap="round" />
  </symbol>
</svg>

<!-- nella pagina -->
<svg width="20" height="20" aria-hidden="true">
  <use href="/icone.svg#cerca" />
</svg>

Il file dello sprite deve stare sullo stesso dominio del sito: per sicurezza, i browser non caricano con use uno sprite ospitato su un altro sito.

Dimensione e allineamento

Un trucco semplice: dai all’icona una dimensione in em. Così cresce e si rimpicciolisce insieme al testo che la accompagna.

CSS
.link-icona {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.link-icona svg {
  width: 1.25em;
  height: 1.25em;
}

Icone accessibili: due regole da ricordare

Chi usa un lettore di schermo non vede l’icona: sente quello che il codice gli dice. Per farlo bene bastano due regole.

  • Se c’è già un testo accanto, l’icona è decorativa: aggiungi aria-hidden="true", così non viene letta due volte.
  • Se l’icona è da sola, come la lente di un pulsante di ricerca, il pulsante deve avere un nome: usa aria-label="Cerca" sul pulsante.

Pensa anche alle dita: l’icona può essere piccola, ma l’area che si tocca no. Le linee guida per l’accessibilità del W3C chiedono almeno 24 × 24 pixel, e Apple e Google consigliano 44 o 48 pixel per i pulsanti da toccare.

Da icona a favicon in un minuto

Una delle icone della libreria può diventare la favicon del tuo sito, cioè l’iconcina che compare nella scheda del browser. Scarica l’SVG, cambiane il colore se vuoi, e caricalo nel generatore: ti prepara tutte le misure che servono, anche per iPhone e Android.

Domande frequenti

Le icone SVG gratis si possono usare per lavoro?

Dipende dalla licenza, quindi leggila sempre. Quelle di questa pagina sì: puoi usarle anche in progetti commerciali e per i clienti. Altri set chiedono di citare l’autore, o vietano l’uso commerciale.

Come cambio colore a un’icona SVG?

Se l’icona è nel codice della pagina e usa currentColor, cambia il color del testo intorno. Altrimenti apri il file e sostituisci il colore in stroke o fill, oppure modificalo in Figma, Inkscape o Illustrator.

Che dimensione deve avere un’icona?

Le icone di interfaccia si disegnano quasi sempre su 24 × 24 e si mostrano tra 16 e 32 pixel. Più importante della misura è l’area cliccabile intorno: almeno 24 pixel, meglio 44.

Posso usare i loghi dei social nel mio sito?

Sì, per collegarti ai tuoi profili, ma prendili dal kit ufficiale del marchio e rispettane le regole: niente colori inventati, niente deformazioni e niente modifiche al disegno.

Meglio icone SVG o font di icone?

Oggi SVG. Sono più nitide, si allineano meglio al testo, non dipendono dal caricamento di un font e sono più semplici da rendere accessibili.

Come metto un’icona SVG in WordPress?

Per sicurezza WordPress non accetta il caricamento di file SVG. Puoi incollare il codice dell’icona in un blocco “HTML personalizzato”, oppure installare un plugin come Safe SVG, che ripulisce i file prima di accettarli.

Fonti e approfondimenti

Le icone sono perfette per i pulsanti e la navigazione. Ma non sempre serve un disegno: una freccia, un ©, un cuore o il simbolo dell’euro esistono già come caratteri di testo, e li scrivi direttamente nell’HTML. Nel prossimo articolo trovi la tabella completa delle entità HTML, con ogni simbolo pronto da copiare.

Commenti

Nessun commento. Lascia il primo!

Lascia un commento

Accetto la Privacy Policy