Iconen en illustraties lijken kleine details, maar ze bepalen sterk hoe verzorgd en eigen een site aanvoelt. Een consistente set iconen maakt informatie sneller leesbaar, en een paar goed gekozen illustraties geven je merk een gezicht dat foto's niet altijd kunnen geven. Andersom verraadt een rommelige verzameling pictogrammen meteen dat er weinig over is nagedacht. Deze gids legt uit wanneer iconografie en illustratie iets toevoegen en hoe je een set kiest of laat maken die bij je visuele identiteit blijft passen.

De functie van iconen en illustraties

Een icoon is een visuele afkorting. Het versnelt herkenning, breekt een lap tekst open en helpt de blik om te scannen. Een illustratie doet iets anders: die voegt sfeer, persoonlijkheid en een eigen handschrift toe, op plekken waar een foto te letterlijk of niet beschikbaar is. Beide zijn middelen, geen versiering, en werken het best als ze een doel dienen.

Samen vormen ze een herkenbare laag bovenop je tekst en je fotografie en beeldtaal. Net als typografie en kleur zijn ze onderdeel van het visuele systeem dat je merk herkenbaar maakt over elke pagina.

Wanneer ze wel en niet werken

Iconen helpen waar ze herkenning versnellen: in navigatie, bij een lijst voordelen, naast contactgegevens of stappen in een proces. Ze werken tegen je zodra ze puur decoratie zijn of zo abstract worden dat niemand de betekenis raadt. De vuistregel: zou de tekst zonder het icoon net zo duidelijk zijn, dan voegt het icoon weinig toe.

Illustraties zijn op hun sterkst bij abstracte onderwerpen, lege staten of plekken waar je sfeer wilt zetten zonder een concrete foto. Ze worden zwak als ze generiek aanvoelen, zoals de bekende kleurige mensfiguren die op talloze sites opduiken. Hoe je iconen consistent kiest, werk ik uit in het artikel iconenstijl kiezen, en de bredere rol van beeld in beeldgebruik en iconen.

Een consistente icoonstijl kiezen

Het belangrijkste aan iconen is niet welk plaatje je kiest, maar dat ze bij elkaar horen. Iconen uit verschillende sets verschillen in lijndikte, hoekafronding en detailniveau, en dat verschil valt direct op. Kies daarom één set en houd je eraan. Let op deze punten:

Die consistentie is dezelfde gedachte als achter consistentie in design: eenheid maakt rust, en rust maakt een site geloofwaardig.

Illustraties als merkmiddel

Een eigen illustratiestijl is een van de sterkste manieren om op te vallen, juist omdat niemand anders precies dezelfde heeft. Je hoeft niet alles te laten tekenen; een kleine set sleutelillustraties op de plekken die ertoe doen, kan al een eigen sfeer neerzetten. Denk aan de hero op je homepage, een lege staat of een sectie die anders kil zou ogen.

Belangrijk is dat de illustratiestijl past bij de rest van je merk: dezelfde kleurtoon, dezelfde mate van detail, dezelfde persoonlijkheid. Een speelse illustratie op een verder strakke, zakelijke site botst. Dat afstemmen hoort thuis in hoe je je visuele identiteit opbouwt.

Techniek: SVG, schaal en kleur

Voor iconen en eenvoudige illustraties is SVG bijna altijd de beste keuze. Het formaat schaalt scherp op elk scherm, van een klein menu-icoon tot een grote illustratie, en blijft licht van gewicht. Bovendien kun je de kleur in code aanpassen, zodat een icoon meekleurt met zijn omgeving zonder dat je een nieuw bestand nodig hebt.

Voor complexere illustraties met veel kleurverloop kan een geoptimaliseerd rasterformaat als WebP soms beter passen. In beide gevallen geldt: houd de bestanden klein, want ook iconen tellen op in de laadtijd. Dat raakt direct aan snelheid en design.

Toegankelijkheid en betekenis

Een icoon zonder bijschrift is voor lang niet iedereen duidelijk. Wat voor jou een vanzelfsprekend symbool is, kan voor een ander een raadsel zijn. Combineer dragende iconen daarom met tekst, en geef functionele iconen een tekstuele beschrijving voor schermlezers. Zo blijft je site bruikbaar voor iedereen, zoals beschreven in toegankelijk webdesign.

Hetzelfde geldt voor illustraties die informatie dragen: laat de boodschap nooit alleen van het beeld afhangen. Een verzorgde site valt niet uit elkaar zodra een beeld niet laadt of niet begrepen wordt.

Zelf doen of uitbesteden?

Een nette icoonset kiezen uit een goede bibliotheek kun je prima zelf, mits je streng bent op consistentie. De meerwaarde van uitbesteden zit in het samenbrengen van iconen, illustratie, kleur en type tot één visuele taal, en in maatwerkillustraties die je merk een eigen gezicht geven. Dat ontwerp ik mee als onderdeel van het webdesign en leg ik vast in een designsysteem en stijlgids, zodat je set ook bij latere uitbreiding consistent blijft.

Twijfel je of jouw site iconen, illustraties of allebei nodig heeft, neem dan vrijblijvend contact op. Ik denk graag mee over een aanpak die bij je merk en budget past.

Veelgestelde vragen

Een icoon werkt als het herkenning versnelt of een tekst ondersteunt, bijvoorbeeld bij een lijst voordelen of in navigatie. Het werkt tegen je als het alleen decoratie is of als de betekenis onduidelijk blijft. Bij twijfel laat je het icoon weg; een heldere tekst wint het bijna altijd van een vaag plaatje.

Liever niet. Iconen uit verschillende sets verschillen in lijndikte, stijl en detail, waardoor het rommelig oogt. Kies een enkele set met een consistente stijl, of laat een eigen set maken. Eenheid in je iconen is belangrijker dan welk individueel icoon je kiest.

Maatwerkillustraties kosten meer dan kant-en-klare iconen, maar je hoeft niet alles te laten tekenen. Vaak volstaat een kleine set sleutelillustraties op de plekken die ertoe doen, aangevuld met een consistente icoonstijl. De prijs hangt af van omvang en stijl en gaat altijd op offerte.

SVG is meestal de beste keuze: het schaalt scherp op elk scherm, is licht van gewicht en je kunt de kleur in code aanpassen. Voor complexe illustraties met veel kleurverloop kan een geoptimaliseerd rasterformaat zoals WebP soms beter passen.

Verder in de kennisbank: Beeldtaal en fotografie · Visuele identiteit opbouwen · Designsysteem en componenten