Iconografie in je huisstijl: een consistente iconenstijl ontwerpen

Iconografie in je huisstijl is de vaste set regels waarmee je al je iconen tekent.

Die regels maken van losse pictogrammen één systeem. Zonder systeem oogt je merk rommelig, hoe strak je logo en kleuren ook zijn.

Ons oordeel: kies één iconenstijl, leg zes regels vast en zet ze in je merkrichtlijn. Een gratis set van drie bronnen door elkaar kost je meer herkenbaarheid dan hij tijd bespaart.

Iconen lijken het kleinste onderdeel van een huisstijl. Denk aan:

• een setje pictogrammen voor je dienstenpagina
• een paar symbolen in een presentatie
• wat vinkjes in een tabel

Toch is iconografie een van de plekken waar inconsistentie het snelst zichtbaar wordt.

Waarom zijn iconen meer dan decoratie?

Omdat een icoon tegelijk leest, ordent en je merk draagt.

Een icoon doet drie dingen tegelijk:

• Het versnelt het lezen: je brein herkent een vorm sneller dan een woord.
• Het structureert informatie: het trekt lijsten, stappen en categorieën visueel uit elkaar.
• Het draagt je merk: de tekenstijl is net zo goed een keuze als je lettertype of je kleuren.

Dat laatste wordt vaak vergeten.

Iconen als inwisselbare gebruiksvoorwerpen

Veel bedrijven behandelen iconen als inwisselbaar: zoek een symbool dat lijkt op wat je bedoelt, plak het erin, klaar.

Het gevolg is een verzameling pictogrammen die technisch het juiste betekenen. Maar visueel horen ze nergens bij elkaar.

Denk aan drie iconen op één pagina:

• een dik gevuld icoon
• een dunne lijntekening
• een afgerond kleurig symbool

Een bezoeker benoemt dat zelden. Maar hij voelt het wel: het maakt je merk minder betrouwbaar, zonder dat iemand kan zeggen waarom.

Een icoon zonder label is vaak een raadsel

Er speelt nog iets: de meeste iconen zijn minder duidelijk dan je denkt.

Volgens Nielsen Norman Group zijn universeel begrepen iconen zeldzaam: home, print en zoeken zijn uitzonderingen. De rest blijft dubbelzinnig voor gebruikers.

Hun advies is daarom streng:

• zet een tekstlabel naast het icoon
• houd dat label altijd zichtbaar, niet pas bij hover
• vind je binnen 5 seconden geen passend icoon, gebruik er dan geen

Gevolg: een consistente stijl helpt je merk, maar een label helpt je bezoeker.

Iconografie volgt je positionering

Iconografie is dus geen losstaand klusje. Het is een uiting van je positionering, net als je beeldtaal en je vormtaal.

Wil je begrijpen hoe dat strategische fundament je visuele keuzes stuurt? Lees dan eerst onze uitleg over wat merkstrategie is.

Dit artikel gaat verder waar dat stopt: hoe je die strategie vertaalt naar een werkend icoonsysteem.

Hoe bouw je een icoonsysteem in plaats van losse iconen?

Je legt zes keuzes één keer vast en past ze op elk nieuw icoon toe.

Dat is de kern van consistente iconografie: je denkt niet in iconen, maar in een systeem. Zo blijft het twintigste icoon dat je toevoegt familie van het eerste.

Deze zes keuzes vormen de ruggengraat van een consistente iconenstijl:

1. Stijl

Kies een hoofdrichting en houd je eraan. De drie meest voorkomende:

• Lijniconen: open, modern en licht, voor merken die toegankelijkheid en helderheid uitstralen.
• Gevulde iconen: steviger en zwaarder, waar je gezag of robuustheid wilt tonen.
• Duotone: een variant met twee tinten.

Mengen kan, maar alleen met een reden. Bijvoorbeeld lijn voor neutrale items en gevuld voor de actieve staat in een menu.

Let op: de keuze mag nooit per icoon afhangen van de toevallige ontwerper.

2. Lijndikte

Bij lijniconen is de lijndikte het meest bepalende detail.

Een icoon van twee pixels dik naast een icoon van anderhalve pixel valt meteen op als rommelig.

Leg een vaste dikte vast en houd die gelijk, ongeacht de grootte waarop het icoon getekend wordt.

Ter vergelijking: de open-source set Lucide schrijft voor elk icoon een lijn van 2 pixels voor, met afgeronde lijnuiteinden.

3. Hoeken en rondingen

Werk je met scherpe of met afgeronde hoeken, en hoe sterk is die afronding?

Dit is een subtiele knop die veel doet voor de persoonlijkheid:

• Zachte rondingen: vriendelijk en benaderbaar.
• Scherpe hoeken: technisch en precies.

Eenmaal gekozen pas je dezelfde rondingstraal op alles toe.

Lucide maakt dat concreet: een hoekradius van 2 pixels voor vormen vanaf 8 pixels, en 1 pixel voor kleinere vormen.

4. Raster en grootte

Teken al je iconen op hetzelfde raster, met een vaste marge aan de rand.

Google werkt in Material Design precies zo. Het raster is 24 bij 24 eenheden, met een leefgebied van 20 bij 20 en 2 eenheden marge rondom.

Een gedeeld raster doet twee dingen:

• alle iconen houden hetzelfde optische gewicht
• ze lijnen netjes uit naast tekst

Zonder gedeeld raster gaat het ene icoon de beschikbare ruimte vullen. Het andere blijft klein in het midden hangen.

Zo ziet zo’n vastgelegd raster eruit in een publieke ontwerpgids:

5. Detailniveau

Spreek af hoeveel detail een icoon mag bevatten.

Op kleine formaten verdwijnt fijn detail toch. Te veel lijntjes maken een symbool onleesbaar in een knop of een tabblad.

Stelregel: een icoon moet op 16 pixels nog herkenbaar zijn. Lukt dat niet, dan is het te complex.

Lucide hanteert een verwante regel: losse elementen krijgen minstens 2 pixels ruimte tussen elkaar.

6. Kleurgebruik

Bepaal of iconen je merkkleuren dragen of vooral neutraal blijven.

Vaak werkt een rustige basis, met kleur die je spaarzaam inzet voor nadruk of voor een actieve staat.

Let daarbij ook op contrast. Een icoon dat informatie draagt, moet goed zichtbaar zijn tegen zijn achtergrond, zoals onze WCAG-checklist uitlegt.

Hoe je die kleuren kiest, lees je in ons stappenplan om merkkleuren te kiezen.

De zes regels naast elkaar

Een samenvatting voor je ontwerper:

Waar maakt iconografie het verschil?

Overal waar je logo en tekst wegvallen: apps, interfaces, infographics en presentaties.

Het belang van een eigen iconenstijl groeit naarmate je merk op meer digitale plekken leeft.

In software en apps

Op een drukke webpagina valt een afwijkend icoon nog mee.

Maar in een app of softwareproduct vallen logo en tekst grotendeels weg. Daar dragen interface-elementen je merk, en wordt iconografie ineens een hoofdrolspeler.

In infographics, dashboards en presentaties

Hetzelfde geldt voor infographics, dashboards, presentaties en handleidingen.

Overal waar je complexe informatie visueel maakt, doen iconen het zware werk. Denk aan een infographic of een dashboard voor je bestuur.

De valkuil van de gratis set

Juist op die plekken is het verleidelijk om snel een gratis iconenset te downloaden.

Dat werkt op de korte termijn, maar het kost je herkenbaarheid. Een generieke set die duizend andere bedrijven ook gebruiken, maakt je merk inwisselbaar.

Een eigen stijl, hoe eenvoudig ook, doet het omgekeerde. Het laat zien dat alles wat je maakt uit dezelfde hand komt.

Iconen als herkenbaar merkelement

Een eigen stijl wordt na verloop van tijd een herkenningspunt op zich. Hoe dat werkt, lees je in distinctive brand assets.

Dat is precies wat een sterke huisstijl beoogt. Daarom behandelt een ervaren branding bureau iconografie als volwaardig onderdeel van het ontwerpsysteem.

Hoe leg je iconen vast in je merkrichtlijn?

Met drie onderdelen: de regels, een bibliotheek en een set do’s en don’ts.

Een mooi icoonsysteem dat alleen in het hoofd van je ontwerper zit, verdwijnt zodra die persoon vertrekt. Of zodra een nieuwe leverancier aan de slag gaat.

Daarom hoort iconografie thuis in je merkrichtlijn, naast je logo, je kleuren en je typografie. Wat er verder in zo’n document hoort, lees je in wat er in een brandbook hoort.

Leg drie dingen vast:

1. De regels: stijl, lijndikte, hoeken, raster en detailniveau, met voorbeelden erbij.
2. Een bibliotheek: de bestaande iconen in bruikbare bestandsformaten, zodat niemand een bestaand icoon natekent.
3. Do’s en don’ts: wat fout gaat, zoals een vreemde stijl, een verkeerde lijndikte of een te druk symbool.

Waarom tegenvoorbeelden het best werken

Die tegenvoorbeelden voorkomen meer fouten dan een pagina abstracte regels.

Een ontwerper ziet in één oogopslag wat niet mag. Een abstracte regel moet hij eerst interpreteren.

Welke bestandsformaten in de bibliotheek?

Lever iconen bij voorkeur als SVG. Dat vectorformaat schaalt zonder kwaliteitsverlies, van 16 pixels in een knop tot een slide op groot scherm.

Welk formaat waarvoor dient, lees je in logo bestandsformaten uitgelegd. Dezelfde logica geldt voor iconen.

Iconografie is één laag van je visuele identiteit

Iconografie staat niet op zichzelf. Het is een laag binnen het grotere geheel van je visuele identiteit.

Die andere lagen:

• je lettertype
• je kleuren en beeldtaal
• de stappen om een huisstijl te laten ontwikkelen

Pas als die lagen volgens dezelfde logica gebouwd zijn, voelt je merk als één geheel. Niet als losse onderdelen die toevallig naast elkaar staan.

Waarom die samenhang loont, lees je in merkconsistentie in B2B.

Veelgestelde vragen

Wat is iconografie in een huisstijl?

Iconografie is de manier waarop je merk iconen en pictogrammen tekent en inzet. In een huisstijl gaat het om vaste regels voor stijl, lijndikte, hoeken, raster, detailniveau en kleur, zodat elk icoon tot dezelfde familie behoort. Meer over de andere onderdelen lees je in wat een huisstijl is.

Mag ik een gratis iconenset gebruiken in mijn huisstijl?

Dat kan, als je één set kiest en die consequent gebruikt. Het risico is herkenbaarheid: een generieke set die veel andere bedrijven ook gebruiken, maakt je merk inwisselbaar. Mix nooit sets met verschillende lijndiktes of hoeken.

Hoe groot moet een icoon zijn?

Teken op een vast raster, bijvoorbeeld 24 bij 24 eenheden zoals Material Design en Lucide doen. Test daarna of het icoon op 16 pixels nog herkenbaar is. Lukt dat niet, dan bevat het te veel detail.

Aan de slag met een consistent icoonsysteem

Sluipt er bij elke nieuwe drager weer een vreemde stijl binnen? Dan is je iconografie nog geen systeem.

Wij ontwerpen een icoonsysteem dat past bij je positionering en overal hetzelfde blijft.

Neem contact op en we bekijken samen hoe consistent je merk er vandaag uitziet.