Le icone sono spesso utilizzate come supporto al veloce riconoscimento e comprensione di uno strumento, che possono più o meno accompagnare il testo o una breve descrizione. Nei dispositivi, come smartphone e computer, la maggior parte della grafica è realizzata con le icone che, attraverso una corretta rappresentazione grafica, esprimono il relativo contenuto. Ad esempio, le cartelle sul desktop che contengono i file, a volte, sono rese simili al colore o al materiale dei portadocumenti e sono corredate anche da corrispettiva etichetta.
Il livello di stilizzazione di una icona è variabile, spesso più simile ad un cartello stradale che ad una illustrazione dettagliata dell'elemento rappresentato.[1] È compito del progettista, riuscire a fornire l'informazione esatta che si vuole trasmettere, attraverso una corretta rappresentazione grafica.
In un sistema operativo un'icona può assumere la funzione di collegamento ipertestuale o collegamento ad un software o file. L'utente può interagire con un'icona tramite un mouse, puntatore, touch o comandi vocali. Il puntatore posizionato all'interno dell'interfaccia ed in relazione ad altre icone, può essere usato per fornire ulteriori informazioni riguardo al loro utilizzo.[2]
Le icone hanno molteplici impieghi; alcuni di essi possono essere:
nei moderni sistemi operativi alle applicazioni viene associata un'icona e l'interazione con tale icona (ad esempio un doppio clic) è il metodo standard per il lancio delle applicazioni;
in un file manager le icone vengono usate per differenziare i tipi di file in base alla loro estensione;
in una pagina Web un'icona può essere usata per caratterizzare il collegamento ipertestuale che la affianca; ad esempio, in un forum web è frequente che le discussioni con un numero elevato di messaggi vengono affiancate da icone infuocate;
un'icona può essere essa stessa un link e venire utilizzata per creare delle ricorrenze ad una pagina Web su altre pagine o siti; un'operazione di questo tipo è anche detta scambio di link (link exchange).
Anche un sito web può avere una propria icona (favicon, letteralmente icona dei preferiti) che generalmente rappresenta il logo del sito stesso. Nella maggior parte dei browser questa icona appare alla sinistra dell'URL digitata. Per esempio l'icona di Wikipedia è una W nera su fondo bianco.
Nel web
Ci sono diverse tecniche per incorporare delle icone in una pagina web. Le due più utilizzate sono i font-icona (ogni lettera corrisponde ad una icona simbolica) e le immagini (svg, jpg, png...). Queste ultime hanno diversi vantaggi rispetto ai font-icona[3][4]:
Possibilità di creare l'icona con molti particolari e colori. I font-icona hanno solitamente un solo colore.
CSS Sprite, attuano una sola chiamata al server utilizzando una sola immagine che ne contiene molte.
Le immagini sono dotate di elementi semantici incorporati, come <title> e <desc>, che lo rendono accessibile a screen reader e browser di testo. Come anche attraverso il tag <alt>, <title> e le regole WAI-ARIA attraverso l'attributo aria-labelledby. Un font-icona verrà invece letto come "A", "E", ecc.
I font-icona sono vulnerabili alle tecniche di anti-aliasing implementate dal browser che influiscono sulla qualità visiva dell'icona rendendola sfocata e meno nitida.
Le immagini e/o gli elementi SVG possono essere animate con CSS3 in modo molto più vario rispetto ai font-icona
Poiché i caratteri delle icone vengono inseriti utilizzando pseudo-elementi, il loro posizionamento è più difficile delle immagini. Potrebbe essere necessario modificare molte proprietà CSS, mentre nelle immagini si deve solo specificare la dimensione.
Creare icone tramite software come Inkscape è molto più semplice che creare da zero un font-icona. Se si scelgono questi ultimi si è costretti ad usare font già esistenti
Si possono creare icone anche in codice, ad esempio SVG, Canvas e WebGL.