Icoonontwerp: een consistente iconenset bouwen

Goed icoonontwerp beoordeel je niet aan één symbool, maar aan een set iconen die bij elkaar horen. Een icoon dat los prachtig oogt, kan een interface verpesten als de lijn dikker is, de hoeken scherper zijn of de grootte niet klopt naast de buren. Het geheim van een consistente set zit minder in talent en meer in vooraf vastgelegde regels: een gedeeld grid, een vaste lijndikte, dezelfde hoekradius en optische balans. Dit artikel laat stap voor stap zien hoe je een iconenset op een houdbare manier vanaf nul bouwt.

Grid en canvas: waar alles begint

Voordat je iets tekent, definieer je een gedeelde werkruimte. Het standaard canvas in de branche is 24×24 pixels; kleinere interfaces gebruiken vaak 20×20 of 16×16. Wat telt is dat je elk icoon op hetzelfde canvas tekent. Plaats daarbinnen een live area (veilige zone): op een canvas van 24px laat je meestal 2px marge en werk je binnen een gebied van 20×20. Het visuele gewicht van elk icoon moet binnen die zone blijven.

Zie het grid niet alleen als een vierkant. In de praktijk helpen vier kernvormen: een vierkant, een verticale rechthoek, een horizontale rechthoek en een cirkel. Een potlood past in de verticale vorm, een envelop in de horizontale, een klok in de cirkel. Zo worden iconen met verschillende vormen toch als even groot ervaren.

Lijndikte: het DNA van de set

In een lijn- (outline) set is de meest zichtbare maat voor consistentie de lijndikte (stroke). Voor een grid van 24px is de klassieke keuze een lijn van 2px; voor een fijner gevoel werkt 1,5px ook. Kies de regel één keer en breek hem nooit binnen de set.

• Gebruik hetzelfde uiteinde op alle open paden: stroke-linecap: round voor ronde uiteinden, butt voor platte.
• Leg ook de hoekverbindingen vast: stroke-linejoin: round of miter — meng ze niet.
• Lijn de lijnen uit op het pixelraster. Valt het midden van een 2px-lijn precies op een pixelgrens, dan worden de randen wazig; verschuif een halve pixel om het scherp te maken.

Houd het ontwerp vectorieel, maar bekijk het altijd op ware grootte (bijvoorbeeld op 16 en 24 pixels). Een lijn die op 24 elegant oogt, kan op 16 dichtslibben als deeg.

Hoekradius en visuele taal

De hoekradius bepaalt de persoonlijkheid van de set. Scherpe hoeken ogen technisch en serieus, zachte hoeken vriendelijk en modern. Kies een radiuswaarde (bijvoorbeeld 2px) en pas die consistent toe op de buitenhoeken. De radius op binnenhoeken iets verkleinen oogt optisch vaak juister, omdat holle hoeken voor het oog toch al zachter lijken.

Dezelfde logica geldt voor elk terugkerend detail: hoe uiteinden worden afgesneden, de hoek van pijlen (meestal 45°), de schuinte van kappen. Neem een beslissing, documenteer die, pas hem op elk icoon toe. De consistentie van een set is de som van deze microbeslissingen.

Optische balans: je oog, niet de wiskunde

Het meest over het hoofd geziene deel van icoonontwerp is optische correctie. Wat geometrisch klopt, oogt niet altijd kloppend. Een paar klassieke voorbeelden:

• Een cirkel naast een vierkant van gelijke afmetingen lijkt kleiner; je moet de cirkel iets buiten het grid vergroten om in balans te komen.
• Een driehoek (zoals een "play"-icoon) op het geometrische midden lijkt naar links verschoven; je duwt hem naar rechts om het massamiddelpunt uit te lijnen.
• Horizontale lijnen ogen dikker dan verticale lijnen van dezelfde breedte; sommige sets maken de horizontalen iets dunner.

Regel: vertrouw op je oog, niet op de liniaal. Zet een icoon naast de andere, knijp je ogen samen en corrigeer degene die naar voren springt of wegvalt.

Het productieproces systematiseren

In plaats van consistentie in je hoofd te houden, bouw je die in je gereedschap in. Gebruik je Figma, zet dan deze structuur op:

• Bouw iconen als components en houd ze allemaal op dezelfde framegrootte (24×24).
• Zet het grid en de live area in een template-frame en kopieer dat naar elk nieuw icoon.
• Sla lijndikte, kleur en uiteindestijl op als stroke style, zodat je ze vanaf één plek kunt wijzigen.
• Houd de naamgeving systematisch: namen met slash zoals arrow/left, arrow/right, user/filled worden in Figma automatisch in mappen geordend.

Een snelle checklist per icoon helpt: juist canvas, juiste lijn, lijnen pixel-uitgelijnd, leesbaar op 16px, correct benoemd.

Exporteren als schone SVG

Als het ontwerp klaar is, gaan de iconen als SVG naar de code. Let voor een schone export op een paar dingen:

• Laat lijnen waar mogelijk als stroke staan in plaats van ze om te zetten naar outlines; zo blijven kleur en dikte vanuit CSS bestuurbaar.
• Zet de kleur op currentColor zodat het icoon de tekstkleur overerft.
• Verwijder onnodige groepen, lege <g>-tags en editor-metadata (SVGO doet dit automatisch).

Een typisch schoon icoon ziet er zo uit:

<svg viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M13 6l6 6-6 6"/>
</svg>

Met deze structuur krijgt een icoon in een knop zijn grootte en kleur van color en font-size, zonder apart afbeeldingsbestand.

Veelgestelde vragen

Welk pixelgrid moet ik gebruiken voor een iconenset?

Voor de meeste web- en mobiele interfaces is 24×24 pixels een goed startpunt. Voor heel dichte interfaces kun je naar 20×20 of 16×16; het belangrijkste is de hele set op één grid te houden en verschillende groottes uit dezelfde bron af te leiden.

Moet ik outline- of gevulde (filled) iconen gebruiken?

Beide zijn geldig; de keuze hangt af van de context. Outline-iconen ogen licht en neutraal, gevulde trekken de aandacht. Veel sets bieden beide: outline in rust, filled bij actief of geselecteerd. Zorg er alleen voor dat beide hetzelfde grid en dezelfde visuele taal volgen.

Kan ik de lijndikte later veranderen?

Heb je de lijnen als stroke gelaten in de SVG, dan wijzig je de dikte in één regel met stroke-width. Maar zodra je lijnen naar outlines (paths) omzet, is terugdraaien lastig — bewaar de masterbron daarom altijd met stroke.

Een consistente iconenset nodig voor je eigen merk? Ik help je die end-to-end op te bouwen, van grid tot schone SVG-export. Neem contact op en vertel me over je project.