3 modi per utilizzare le icone nei tuoi siti web

L’utilizzo delle icone nei progetti web è sempre stata molto importante ma con la diffusione della navigazione da mobile negli ultimi anni è diventata una pratica vitale per ottimizzare la user experience.

Infine con l’avvento del mobile first non c’è più scampo.

In questo articolo vediamo 3 modi per utilizzare le icone nei vostri progetti web analizzando pro e contro di ogni soluzione e segnalando alcune (chiaramente non tutte) risorse utili e degne di nota.

Iniziamo, per inserire delle icone nei tuoi progetti puoi:

1. Usare delle immagini

Il metodo più ovvio.

Puoi farle tu o acquistarle da uno dei tanti marketplace.

Sono solitamente molto ben fatte ed hanno una buona varietà, quindi ti permette di diversificare completamente lo stile fra un progetto e l’altro.

Il problema è pratico: per inserirle nei tuoi siti devi importarle nel progetto come immagini, quindi, se ad esempio vuoi cambiarne il colore in corso d’opera devi modificarle e ri-esportarle.

Ci sono davvero tanti marketplace su cui reperire icone gratis e a pagamento, ne segnaliamo 3.

Iconfinder

Iconfinder è un marketplace con un catalogo di quasi 3 milioni di icone.

C’è una varietà allucinante ed in molti casi più che di icone parliamo di vere e proprie mini illustrazioni.

É possibile customizzare le icone prima di scaricarle tramite il loro editor online, una sorta di mini illustrator.

Puoi scaricare le icone in formato svg, png, ico, Ai e molti altri formati.

Puoi anche contattare uno dei 1800 designer per chiedere un set di icone custom.

Ci sono Set di icone gratuiti e a pagamento, i prezzi in alcuni casi sono alti ma se azzecchi il set giusto ti svoltano il design del sito con poco sforzo, quindi vale la pena dargli un’occhiata.

NounPro

NounPro è uno store con un catalogo di oltre un milione di icone.

Permette di customizzare il colore, lo sfondo e orientamento delle icone per scaricarle già giuste senza passare da photoshop o illustrator.

Tramite le loro app puoi importare direttamente le icone nei tuoi google docs, in photoshop, illustrator ed indesign senza doverle scaricare ed inserire manualmente.

Con L’account free si ha a disposizione tutto il catalogo ma bisogna dare i crediti ai designer delle icone inserite nel progetto, mentre l’account pro costa 39,9 dollari l’anno o 9,99 al mese.

Icomoon

Icomoon uno store con 3 set di icone minimal.

il pacchetto free ne include 490 mentre a pagamento è possibile accedere a tutte le icone.

Una funzionalità molto interessante è quella che permette, tramite la loro app, di creare il tuo set di icone sotto forma di font soltanto importando i file svg.

2. Usare una libreria Css

Usare una libreria css è il modo più veloce per inserire icone nei tuoi progetti.

Ti basta includere la libreria nel tuo progetto e richiamare nel file html le icone che ti servono tramite dei brevissimi tags.

Vengono poi gestiti come dei font, quindi puoi modificarne dimensioni, colori e spaziature in maniera rapida direttamente dal css.

Il rovescio della medaglia è che lo stile delle icone è sempre molto semplice e soprattutto sempre lo stesso, quindi se usi sempre la stessa libreria ti troverai con le stesse icone su tutti i tuoi siti.

Inoltre anche se ti servono solo poche icone dovrai includere l’intera libreria che spesso è molto pesante.

Ecco le principali soluzioni:

Font Awesome

Font Awesome è stato uno dei primi e sicuramente il più famoso.

Ha delle icone semplici ma molto ben fatte, ben sfruttabili su qualsiasi progetto.

Con la versione “Pro” è possibile scegliere lo spessore del tratto mentre con la versione free si può accedere a tutte le icone ma solo con il tratto medio.

Materialize

Materialize è una buona alternativa a font awesome da parte di Google.

Anche in questo abbiamo un solo stile, quello material appunto, ma tutto il catalogo è completamente gratuito.

Icono

Anche in questo caso, con Icono, abbiamo delle buone icone utilizzabili in maniera totalmente gratuita, anche se le icone presenti non sono molto numerose.

Una buona alternativa per variare nel caso in cui le icone che ci servono siano presenti fra quelle disponibili.

Fontello

Fontello è una soluzione molto interessante, innanzitutto per il numero delle icone presenti, davvero ampio, ed in secondo luogo perché dà la possibilità di esportare la libreria con al suo interno solo le icone che ci servono per il nostro progetto, tenendo quindi il tutto più leggero.

3. Realizzarle in Css

L’ultima alternativa è quella di creare le tue icone realizzandole tu stesso con il solo utilizzo dei css.

Puoi farlo partendo da zero o cercando delle icone già fatte per poi personalizzarle.

Il grosso vantaggio di questa soluzione è che ogni icona sarà creata solo con delle classi quindi sarà molto facile e veloce personalizzarle anche in corso d’opera.

Inoltre non dovrai portarti dietro nessuna libreria aggiuntiva.

Puoi operare in 3 modi:

Crearle da zero

Ci vuole una buona conoscenza tecnica ma con un po' di studio e voglia di imparare il solo limite è l'immaginazione.

Crearle partendo da icone già fatte

Con una semplice ricerca su google tipo ”icona menu css” puoi trovare delle ottime basi di partenza tipo questa.

In questo modo puoi scegliere di tenere quello che trovi o modificarle per renderle più in linea con il tuo Layout. 

Css Icon

Css icon è un’interessantissima collezione di icone create SOLO con i css.

Ti basta selezionare una ad una le icone che ti servono e copiare nel tuo foglio di stile gli script che il sito ti fornisce.

Un’altra chicca è che permette di creare animazioni fra 2 icone (ad esempio se vuoi switchare fra "icona menu" e "icona chiudi menu" quando il menu si apre).

Quindi qual è il metodo migliore?

Come al solito non c’è un metodo migliore, dipende dal contesto, dalle scelte stilistiche e dall’importanza che le icone avranno al’interno del progetto grafico.

Un’altra cosa da tenere in considerazione è quanto “budget” in termini di spazio abbiamo a disposizione da usare per le icone senza che il sito diventi troppo pesante.

Esempio, in un sito con molte fotografie forse sarebbe meglio non occupare spazio prezioso per le immagini, mentre se il sito è composto per la maggior parte da contenuti testuali un set di icone più complesse potrebbe dare maggior impatto al sito senza invece fare grossi danni all’indicizzazione del sito per via del peso.

Ti è piaciuto questo articolo?

Condividilo con i tuoi contatti a cui potrebbe tornare utile!