Anastasia Ovchinnikova

Seguire

Apr 5, 2020 · 13 min leggere

Le icone hanno un ruolo significativo nel dare la prima impressione di un sito o di un’applicazione di interfaccia. Ma ci vuole un sacco di tempo e denaro per svilupparli da zero., L’utilizzo delle icone sul tuo sito ti consente di comunicare efficacemente con i tuoi visitatori: aumentano la leggibilità, evidenziano contenuti importanti, rafforzano funzionalità o funzionalità e migliorano il design. Pertanto, vale la pena prestare attenzione ai migliori pacchetti di icone già pronti.

Inoltre, quando si tratta di icona del design, questo è un ottimo modo per mostrare il designer qualifiche., Un pacchetto di icone dolce e piacevole è una vetrina perfetta del lavoro del designer e un potente strumento per costruire la tua reputazione online.

Ecco alcuni grandi vantaggi dell’utilizzo delle icone nel tuo prossimo progetto di design UX.

  • Le icone aiutano ad aumentare la leggibilità del sito o dell’app.
  • Icone ben fatte aiutano a ridurre il volume del testo. Utilizzando le icone rende il messaggio comprensibile senza testo.
  • Icone possono aggiungere personalizzazione al prodotto.
  • Icone possono essere un buon punto di partenza per conoscere il prodotto.,
  • Ultimo, ma non meno importante: una delle funzioni più importanti di icons è quella di aiutare gli utenti a comprendere intuitivamente l’applicazione sia alla prima conoscenza che durante l’uso successivo.

In questo articolo troverai una raccolta di alcuni dei migliori pacchetti di icone che puoi utilizzare sul tuo sito web o sul tuo business, anche se non sei un artista creativo. I prodotti presentati in questo articolo possono essere utilizzati non solo su siti Web comuni e in casi di base, ma anche in quelli più complessi e specializzati.

Abbiamo diviso i prodotti in diverse categorie per la vostra facilità., Prima delle descrizioni vedrai la categoria a cui appartiene questo prodotto.

  • Set di icone gratuiti.
  • Mercati. Il marketplace contiene icone di diversi produttori. Qui puoi trovare sia prodotti economici che costosi, oltre a prodotti di buona e bassa qualità.
  • Set di icone di design dei materiali e set di icone piatte.
  • Set di icone CSS. Le icone CSS sono fatte usando — indovina un po ‘ – CSS. Per usarli, basta copiare il codice nella tua pagina.
  • Icone font. Secondo Pluralsight, i font icon sono font effettivi che contengono simboli e glifi anziché lettere o numeri., Sono popolari per i web designer poiché puoi modellarli con i CSS allo stesso modo del testo normale. I font Icon sono trattati come testo dai browser, quindi è necessario normalizzarli per evitare problemi di anti-aliasing del testo e sono supportati in quasi tutti i browser.
  • Icone SVG. Scalable Vector Graphics (SVG) è un formato di grafica vettoriale basato su XML che può scalare a qualsiasi dimensione senza perdere chiarezza. Possono essere visualizzati tramite CSS, tag oggetto, tag immagine o in linea direttamente nel tuo HTML.
  • Set di icone di glifi e pittogrammi.,

Flaticon

fonte dell’Immagine: https://www.flaticon.com/packs

Flaticon contiene completamente modificabile vettori e possono essere utilizzati sia per progetti personali e commerciali. FlatIcon ha più di 2,3 milioni di icone vettoriali raggruppate in 51202 confezioni.

Il prodotto ha un’estensione Adobe che consente di importare facilmente le icone all’interno di Photoshop, Illustrator e After Effects., Se desideri utilizzare un font web invece di file statici per le tue icone, FlatIcon si occuperà della conversione del formato e genererà un font web pronto per l’uso. È inoltre possibile personalizzare le icone scaricate.

Fatti chiave:

  • oltre 90.000 icone;
  • Formati SVG, EPS, PSD e PNG;
  • font icona;
  • Estensione Adobe per CC suite;
  • Licenza Linkshare con opzioni premium; e
  • nuovi pacchetti di icone vengono aggiunti ogni mese.,

Un abbonamento premium con FlatIcon ti fornirà diritti di licenza completi, accesso a contenuti esclusivi, nessun annuncio, estensioni macOS app e Adobe, oltre alla possibilità di creare collezioni illimitate.,

Jam Icons

Web-site: https://jam-icons.com/
Format and Type: SVG, CSS
Price and License: Free, MIT

Image source: https://jam-icons.com/

Jam icons are a set of 896 handcrafted icons. This icon pack comes with both SVG and font versions. The icons can be used as SVG files in your web, print or application development projects., Le icone possono anche essere utilizzate come font con i fogli di stile CSS specificati. Ci sono 16px, 24px e 32px dimensioni. Puoi anche scegliere di riempire o tracciare le icone.

Fontisto Icon Pack

sito Web: https://fontisto.com/
Formato e Tipo: CSS
il Prezzo e la Licenza: Libero, MIT

fonte dell’Immagine: https://fontisto.com/

Fontisto è un pack di icone vettoriali., Le icone possono essere istantaneamente personalizzate: dimensioni, colore, ombra esterna e tutto ciò che può essere fatto con la potenza dei CSS. Il prodotto non richiede Javascript. Le icone Fontisto sono vettori, il che significa che staranno bene sui monitor ad alta risoluzione.

Sul sito, è possibile trovare la documentazione completa e varie guide su come avviare e personalizzare il prodotto. Puoi iniziare a utilizzare il prodotto semplicemente incollando il link sul tuo sito web. Inoltre, è possibile utilizzare Fontisto con i gestori di pacchetti che sono giusti per te: npm, yarn, bower, ecc.,

Iconmonstr

sito Web: https://iconmonstr.com/
Tipo e Formato: il formato SVG, EPS, PSD e PNG, Mercato
il Prezzo e la Licenza: Libero

fonte dell’Immagine: https://iconmonstr.com/

Iconmonstr collezione di icone è 4400+ icone. Ogni set di icone offre sia contorni che versioni riempite della grafica per garantire che possano essere utilizzate per una varietà di applicazioni di progettazione., Ogni icona su questo sito è disponibile gratuitamente e i file di icone sono disponibili in formati come SVG, AI, PSD e PNG. I file possono essere utilizzati per scopi gratuiti e commerciali.

Iconmonstr rende semplice la ricerca di icone tramite la sua potente funzione di ricerca. È anche possibile salvare le icone preferite in una collezione personale per un uso futuro.

Caratteristiche principali:

  • l’uso gratuito di tutte le icone,
  • quattro opzioni di download di formato, e
  • icone ridimensionate ottimizzate per l’uso web.,

Pixsellz Materiale Icone Libreria

fonte dell’Immagine: https://icons.pixsellz.io/

Un enorme fascio di oltre 1000 icone divise in 16 diverse categorie. L’icon pack gratuito è ispirato al Material design e presentato in tre diversi stili visivi: arrotondato, contorno e bicolore., Il set è disponibile in 6 diversi formati di file, in modo da poter utilizzare le icone nel vostro software di progettazione preferito.

caratteristiche principali:

  • 3 stili,
  • Figma stili,
  • 1000+ icone,
  • 24×24 pixel,
  • Schizzo di stili e simboli,
  • 16 categorie, e
  • 6 formati di file.

Entypo

Sito web: http://www.entypo.com/
Formato e tipo: SVG
Prezzo e licenza: Free, Creative Common License 4.,0

fonte dell’Immagine: http://www.entypo.com/

Entypo è un’icona svg family pack, predisposto con cura un paio di anni fa da Daniel Bruce in Svezia. Queste icone sono superbe: quando si tratta di omaggi, sono top della linea. Il prodotto si presenta come SVG con 411 icone, gratuito con una licenza Creative Commons.,

L’autore dice che la costruzione di un font richiede molto tempo ed è meglio dedicare del tempo allo sviluppo di nuovi pittogrammi.

Male Icone

sito Web: https://evil-icons.io/
Tipo e Formato: il formato SVG, Schizzo
il Prezzo e la Licenza: Libero, MIT

fonte dell’Immagine: https://evil-icons.io/

Questo pack è assolutamente enorme e viene fornito con tutto — compreso SVGs e il file di origine., Ciò significa che è possibile scaricare SVG con i file per Illustrator e la .file di schizzo per Schizzo.

Ogni icona segue lo stile della linea sottile e sono perfetti per la maggior parte dei siti web. Il fatto che tu possa modificare la fonte originale li rende ancora più preziosi.,

Streamline Icons

Web-site: https://streamlineicons.com/
Format and Type: ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG
Price and License: Free to $411

Image source: https://streamlineicons.com/

Streamline Icons is another nice and adaptable free icon pack on the web market. The tool is organized in 53 categories with over 30000 vector icons.,

Questo è uno dei pochi pacchetti di icone ottimizzati per Sketch, che rende facile manipolare le larghezze e i colori dei tratti. Le funzionalità di Sketch integrate, come i simboli e gli stili condivisi, rendono il riutilizzo di elementi, come le icone, un processo semplice e veloce.

L’azienda ha una propria applicazione web che aiuta a navigare, cercare e scaricare le icone direttamente dal browser.,

Caratteristiche principali:

  • più di 30000 icone vettoriali organizzate;
  • Tratti intelligenti per modificare lo spessore del contorno;
  • Sketch, AI, EPS, PDF, PNG, SVG;
  • web app per cercare e modificare le icone;
  • ogni icona in Streamline 3.0 ha tre pesi unici: leggero, regolare e grassetto.,

Smashicons

sito Web: https://smashicons.com/
Tipo e Formato: VASETTO, SVG, AI, SCHIZZO, Mercato
il Prezzo e la Licenza: Libero a $149

fonte dell’Immagine: https://smashicons.com/

Smashicons offre una collezione completa di icone con oltre 219000+ icone nella loro biblioteca. Smashicons funziona in modo un po ‘ diverso rispetto ad altri: il loro prezzo si basa su un piano mensile di $5/mese., Ciò significa che per $5 al mese si ottiene l’accesso a tutta la loro collezione di icone esistenti, nonché eventuali icone future che rilasciano.

Caratteristiche principali:

  • una grande collezione di icone,
  • tutte le icone sono multi-piattaforma compatibile,
  • facile da usare web app per cercare e trovare le icone necessarie,
  • modello di business basato su abbonamento,
  • supporto multipiattaforma.

Icons8

Sito Web:https://icons8.com/
Formato e tipo: SVG, PNG, PDF
Licenza e prezzi: Good Boy License, Free to 19.,90 al mese

fonte dell’Immagine: https://icons8.com/

Il set di icone da Icons8 viene fornito con più di 120000 icone che coprono diverse categorie; dal business di office e di impostazioni per le persone, il cibo e le icone social media. Le icone sono progettate per imitare l’aspetto di un sistema operativo specifico. È possibile scaricarli nelle versioni Windows, iOS e Android.,

Le icone funzionano con Sketch, Photoshop e Xcode. È possibile utilizzare un editor web prima di scaricare le icone sul sistema.

Caratteristiche principali:

  • SVG, PNG, e formati HTML;
  • icone disponibili in diversi stili, come l’icona della linea, icona riempita, e colore completo;
  • tutte le icone possono essere scaricati tramite .file zip;
  • modifica prima di scaricare;
  • entrambe le opzioni di abbonamento gratuite ea pagamento.,

Icomoon

Web-site: https://icomoon.io/
Format and Type: SVG, PNG, PDF
License and Pricing: Free to $139 per month

Image source: https://icomoon.io/

Icomoon comes as a complete tool for iconography and icon management. The product has a high-quality solution for editing and managing icons., Le icone Icomoon sono state realizzate a mano su una griglia 16X16 e sono disponibili nei formati SVG, EPS, PSD, PDF e AI. Il set di icone è anche costantemente aggiornato dai suoi creatori.

Ogni icon pack dispone di licenze dettagliate in modo che i progettisti e gli sviluppatori sanno esattamente come le icone possono essere utilizzati. Gli utenti possono anche fare i propri font icona personalizzata.

Caratteristiche principali:

  • strumenti di gestione delle icone complete,
  • opzioni di download gratuite ea pagamento,
  • un’ampia varietà di formati di download,
  • aggiornamenti gratuiti e facili.,

Glyphish Icon Pack

fonte dell’Immagine: http://www.glyphish.com/

Glyphish offre una varietà di diversi pacchetti di icone. Ogni pacchetto è disponibile in una varietà di formati diversi, tra cui PNG, SVG, PSD e AI. Il pacchetto di icone di base è disponibile per $25 mentre l’ultimo è disponibile ad un prezzo normale di $99. La demo gratuita include 50 icone. Tutte le icone possono essere facilmente modificate dai progettisti.,

Caratteristiche principali:

  • icone per diverse piattaforme: iOS, Android, Web, Windows;
  • un set di 50 icone gratuite;
  • facile drag-and-drop in Xcode;
  • icone appositamente dimensionate per Apple Retina display.,

Ionicons

sito Web: https://ionicons.com/
Tipo e Formato: il formato SVG e Webfont, Icona font
Licenza: MIT

fonte dell’Immagine: https://ionicons.com/

Il Ionica, il team ha deciso di rilasciare le proprie icone, come un webfont chiamato Ionicons. Naturalmente sono totalmente gratuiti e disponibili su GitHub. È anche possibile aggiungere queste icone direttamente al tuo sito utilizzando la versione CDN del foglio di stile., Supporta pienamente i font SVG e web.

Caratteristiche principali:

  • completamente gratuito,
  • facile configurazione copiando e incollando link,
  • si presenta come un webfont,
  • dimensioni personalizzate,
  • oltre 1100 articoli.

Angolare Materiale Icone

fonte dell’Immagine: https://material.io/resources/icons/?style=baseline

Materiale Icona è free icon pack da Google., Per garantire la leggibilità e la chiarezza, queste icone sono stati ottimizzati per guardare grande su tutte le piattaforme e display. Queste icone materiali sono totalmente gratuiti e accessibili su GitHub. Questo icon pack è assolutamente enorme con oltre 1.000 icone che coprono una vasta gamma di funzioni di interfaccia.

Tutti i simboli sono disponibili in cinque temi. Otterrai una gamma di dimensioni e densità scaricabili. Il formato migliore per i progetti web è un font web icona facile da usare.,

Linearicons

fonte dell’Immagine: https://linearicons.com/

Lineare Icon pack è uno dei più popolari e migliori icon pack per scopi personali o commerciali. Linear icon pack è disponibile in entrambe le versioni gratuite e premium. La versione gratuita di questo incredibile icon pack è sotto licenza Creative Common. Ci sono anche diversi pacchetti che puoi scegliere per le tue esigenze, come il pacchetto Desktop.,

Key features:

  • CloudFront CDN;
  • free version available;
  • comes with different formats: SVG, PDF, Webfont.

Feathericons

Web-site: https://feathericons.com/
Format and Type: SVG, Webfont, Iconfont
License and Pricing: Free, MIT License

Image source: https://feathericons.com/

Feather is one of the most popular open-source icon sets., Queste sono icone open source che sono state progettate su una griglia 24X24. Le icone sono disponibili nel formato SVG. E ‘ sotto la licenza MIT, e ci sono circa 250 + icone in open source.

Le icone sono facili da modificare, pulite e nitide, indipendentemente dalle dimensioni. Sono stati progettati come un font icona prima, quindi è pensato per essere incorporato come un font web.,

Iconfinder

Web-site: https://www.iconfinder.com/
Format: SVG, PNG, ICO, Marketplace
License and Pricing: From $9 to $49 per month

Image source: https://www.iconfinder.com/

Iconfinder is one of the most popular icon resources on the net. It offers over 4 million icons, providing users with a variety of search options including icon format, price, size, background, etc., Ci sono diversi piani di pagamento mensili — da 9 9 a $49. È inoltre possibile scegliere il sistema “pay as you go”.

I file di icone sono disponibili nei formati SVG, PNG, ICO, ICNS e Adobe Illustrator e le dimensioni variano da 16×16 a 512×512. Puoi anche lavorare con alcuni dei migliori designer del sito se non riesci a trovare qualcosa che ti piace o semplicemente vuoi icone personalizzate progettate appositamente per te e il tuo marchio.,

Caratteristiche principali:

  • entrambe le opzioni di utilizzo gratuito ea pagamento,
  • funzioni di ricerca flessibili,
  • icone disponibili in una varietà di formati,
  • un sacco di categorie e stili,
  • icon editor.

Il Sostantivo Progetto

fonte dell’Immagine: https://thenounproject.com/

Il nome del Progetto, che offre una delle più grandi librerie di icone disponibili sul web., La maggior parte delle icone di questo sito sono disponibili nei formati SVG e PNG, nonché negli stili in bianco e nero.

La libreria del sito è composta da file di icone progettati da una varietà di designer indipendenti. È un luogo in cui creatori e professionisti creativi possono collaborare per vendere i loro disegni e trovare una libreria apparentemente infinita di icone premium.

Cercare questa enorme e completa libreria di icone è molto semplice. Altre caratteristiche principali di questa libreria di icone includono opzioni di download gratuite e premium, molti grandi set di icone, un’applicazione per Mac e altro ancora., Questa libreria di icone viene regolarmente aggiornata e nuove icone e set vengono pubblicati ogni giorno.

Caratteristiche principali:

  • oltre 150.000 icone;
  • SVG, formati PNG;
  • strumenti di ricerca e scoperta;
  • Licenza comune creativa con opzioni premium;
  • opzioni di download gratuite ea pagamento;
  • nuove icone caricate su base quasi giornaliera.

Fontawesome Icons

Sito Web:https://fontawesome.com/icons
Formato e tipo: SVG, PNG, Icon font, Marketplace
Licenza e prezzi: SIL OFL 1.,1

fonte dell’Immagine: https://fontawesome.com/icons

Font Impressionante è la più usata e la più famosa icona set di caratteri circa. È anche l’icona predefinita impostata per il team di bootstrap. E ‘ disponibile anche come icone SVG tra gli altri formati.La licenza è aperta e gratuita per qualsiasi cosa, commerciale o personale.

Ogni icona è completamente scalabile e gestibile direttamente in CSS., Puoi cambiare colori, ombre, sfumature di sfondo e praticamente qualsiasi altra cosa usando pure CSS3. Un altro motivo per utilizzare questa libreria è che è completamente ottimizzata e non ha problemi di compatibilità perché non richiede affatto JavaScript.

caratteristiche principali:

  • tipo di Carattere Vettoriale,
  • ogni icona viene fornito con una Classe CSS & Unicode
  • gratuito
  • costruito con l’accessibilità in mente,
  • caratteristiche di un facile passaggio tra siti web,
  • offre un desktop cheat sheet per l’intera libreria di icone.,

Lineicons

sito Web: https://lineicons.com/
Tipo e Formato: il formato SVG, Web font, icone font
Licenza e Prezzi: Libero

fonte dell’Immagine: https://lineicons.com/

LineIcons anche fornire gratuitamente il CDN con una chiara documentazione che lo rende facile per iniziare.

Questo icon pack è completamente gratuito e viene fornito con oltre 450 icone di linea., Esso copre ogni singola icona essenziale è necessario per il progetto da diverse categorie. LineIcons fornisce anche CDN gratuito e documentazione chiara per iniziare facilmente. Viene fornito con 2 diversi pacchetti scalabili: WEBFONT e file SVG che è possibile utilizzare in base alle esigenze del progetto.

Caratteristiche principali:

  • 450+ Icone gratuite,
  • file SVG,
  • Font Web pronto,
  • CDN gratuito.,

Considerazioni finali

La scelta della giusta risorsa icon library per il tuo progetto non dovrebbe basarsi su ciò che è considerato più popolare, ma piuttosto su ciò che meglio si adatta alle esigenze del tuo progetto. Quando si scelgono le icone, prestare attenzione a quanto sia facile avviare un progetto, quali formati sono presenti nella libreria e il prezzo.

Inoltre, un fattore importante quando si sceglie un icon pack sarà corrispondente allo stile della vostra applicazione o sito.

Speriamo che questo articolo ti aiuti a scegliere la soluzione più adatta alle tue esigenze.