Het einde van het icoon als afbeelding.

Al jaren werkten de meeste designers met afbeeldingen als er iconen nodig waren. Alles werd uit de kast getrokken om iconen te ontwerpen die goed in het ontwerp-straatje van de betreffende site passen. Dit heeft mooie icoon-bibliotheken opgeleverd. Vaak werden deze icoon-bibliotheken middels css-sprites ingezet op websites.
Aangezien de trend steeds meer naar "plat" gaat kunnen de iconen dan ook platter en dus "simpeler" worden. De oplossing voor deze bibliotheken met iconen in dezelfde stijl is gevonden in de vorm van een "font", een lettertype-bestand dat beschikt over vele iconen. Wie dacht dat het over dingbats gaat heeft het mis. Icon-fonts zijn volwassen geworden.
Het grote voordeel van deze icon-fonts is simpel, het is eindeloos schaalbaar. Doordat alle iconen vector-afbeeldingen zijn is het mogelijk om de iconen in alle grootten te maken. De grootte van het font bepaalt hoe groot de afbeeldingen worden
1x: 2x: 3x: 4x:
Hieronder een paar links naar icon-fonts die wat mij betreft zeker de moeite waard zijn om eens te bekijken:

  • FontAwsome

    FontAwsome is momenteel een van de meest geimplementeerde icon-fonts van dit moment. De set bestaat momenteel uit wel 369 iconen. De bibliotheek is bestaat uit vele gebruiksiconen maar bevat ook merken en directionele iconen.

  • Fontello

    Een andere benadering is het zelf samenstellen van een font. Handig, je zoekt zelf de iconen die je wil gaan gebruiken en maakt op fontello.com een eigen font aan. Voordeel is natuurlijk dat het font lekker klein kan blijven. Nadeel is dat je het font opnieuw moet maken als je een icoontje extra wil toevoegen.

  • Typicons

    Nog een mooie bibliotheek is Typicons. De meeste iconen hebben een fat-outline wat ze een bepaalde uitstraling geeft.

  • Foundicons

    Bij Zurb maken ze niet alleen een responsive framework maar hebben ze ook een icon-font geproduceerd. Duidelijke en heldere iconen die zonder enig probleem samenwerken met jouw web project.