Hoe vectoriseer je een icoon?
6 min leestijd · Gepubliceerd 2 aug 2026 · Bijgewerkt 2 okt 2026
Een icoon leeft op elke grootte tegelijk. Hetzelfde bestand is een item van 16 pixels in een menu, een knop van 24 pixels, een app-tegel van 512 pixels en soms zelfs een poster. Dat werkt alleen als de geometrie eronder eerlijk is: weinig knooppunten, gesloten paden en geen achtergebleven franje van de anti-aliasing van welk raster je ook bent begonnen.
Een icoon vectoriseren gaat daarom minder over de conversie en meer over wat je de motor voert en wat je daarna snoeit. Deze gids behandelt beide.
Begin met het grootste raster dat je hebt, en vlak het af
Anti-aliasing is hier de vijand. Op een icoon van 32 pixels zijn de zachte grijze pixels langs elke diagonaal een groot deel van het beeld, en een motor kan niet weten dat ze een harde rand moesten voorstellen en geen echte tussenliggende toon. Geef het een versie van 512 pixels en dezelfde rand is een overgang van één pixel tegen negenenveertig schone pixels — de vorm is onmiskenbaar.
Is het icoon monochroom, maak het dan écht monochroom vóór het converteren: zuiver zwart op transparant, of zuiver zwart op wit, zonder zachte schaduw en zonder subtiel binnenste gloed. Elk van die effecten wordt vormen in de uitvoer, en vormen in de uitvoer zijn knooppunten die je moet vinden en verwijderen.
Beoordeel het resultaat op het aantal knooppunten, niet op hoe het eruitziet op 100%
Op de grootte waar je naar kijkt ziet bijna elke trace er prima uit. De test die telt is het aantal knooppunten: open het pad en tel de punten. Een goed getekend icoon heeft punten alleen waar de curve echt van richting verandert — een afgerond vierkant heeft er acht, een cirkel vier, een chevron drie of zes. Komt een eenvoudige vorm met zestig terug, dan jaagde de motor achter pixerruis aan, en die vorm rendert langzaam, bewerkt slecht en ziet er geschaald subtiel verkeerd uit.
Op Lite en hoger stuurt de detailinstelling dit direct: lager detail voegt agressiever samen en levert minder, schonere knooppunten op. Draai het omlaag tot hoeken net beginnen te verzachten, en ga dan één stap terug. Op Free wordt het niveau automatisch gekozen, en de manier om het te beïnvloeden is de kwaliteit van de bron.
Lijn daarna uit op het pixelraster, niet ervoor
Iconensets hebben een raster — meestal 24×24 met een veiligheidsmarge van twee pixels, of 16×16 voor dichte interfaces. Een getraceerd pad belandt waar de pixels toevallig zaten, wat dicht bij dat raster is maar er niet op, en op kleine rendergroottes maakt 'dichtbij' dat één icoon in een rij een halve pixel zwaarder lijkt dan zijn buren.
Snap de kant-en-klare paden op hele coördinaten in je editor en zet de viewBox van de SVG op je raster. Dat is de eerste keer priegelen en daarna routine, en het is wat een iconenset die ontworpen oogt scheidt van eentje die geconverteerd oogt.
Eén lijndikte, één stijl, één bestand
Bouw je een hele set opnieuw op, converteer ze dan allemaal in één batchconversie zodat ze door identieke instellingen gaan, en maak daarna de lijndikte met de hand gelijk over de set. Een iconenfamilie leest als een familie omdat de strepen op elkaar lijken; een set die los over meerdere sessies is getraceerd, lijkt niet op elkaar, en het verschil is zichtbaar zelfs als geen enkel icoon apart fout oogt.
Batchconversie begint bij Pro, dat 30 bestanden tegelijk neemt. Daaronder worden bestanden één voor één geconverteerd, wat voor een set van twintig een paar minuten klikken is in plaats van een blokkade.
Stap voor stap
- 01
De grootste rasterversie pakken
512 pixels of meer als die bestaat. Een bron van 32 pixels bestaat vooral uit anti-aliasing, en anti-aliasing is precies wat een motor verkeerd doet.
- 02
Afvlakken naar één kleur
Verwijder slagschaduwen, binnenste gloed en verlopen vóór het converteren. Elk ervan wordt extra vormen in de uitvoer.
- 03
Converteren naar SVG
Uploaden en het resultaat downloaden. SVG is het native formaat voor zowel web- als app-iconen.
- 04
Het aantal knooppunten controleren
Open het pad in je editor. Een eenvoudige vorm hoort een handvol punten te hebben, niet tientallen. Heeft hij tientallen, dan zat er ruis in de bron.
- 05
Uitlijnen op het iconenraster
Lijn de paden op hele coördinaten uit en zet de viewBox op je rastergrootte, zodat het icoon op 16 en 24 pixels strak rendert.
Veelvoorkomende problemen
- Het icoon oogt wazig op 16 pixels ondanks dat het een vector is
- Zijn paden liggen niet op het pixelraster, dus de renderer anti-aliast elke rand. Snap de coördinaten op hele getallen en zet de viewBox overeenkomstig je raster.
- Een eenvoudige vorm kwam terug met tientallen knooppunten
- De bron had anti-aliasing of JPEG-ruis die de motor als detail las. Gebruik een grotere, schonere bron; op Lite en hoger zet je het detailniveau lager.
- Hoeken zijn afgerond die scherp hoorden te zijn
- Het gladmaken staat te hoog. Op Lite en hoger zet je het een stap lager — echte hoeken blijven tot Sterk scherp, en pas Maximaal maakt alles rond.
- Het icoon heeft een flauwe rand in een andere kleur
- Dat is de geanti-aliasde franje van het origineel, getraceerd als eigen dunne vorm. Verwijder die in de editor, en vlak de bron de volgende keer eerst af naar één kleur met harde rand.
Veelgestelde vragen
- Hoe groot moet het bronicoon zijn?
- Zo groot als bestaat — 512 pixels of meer is comfortabel. Onder ongeveer 64 pixels is de anti-aliasing een groot deel van het beeld en kan de motor een zachte rand niet van een echte onderscheiden, en dat is wat bobbelige curven oplevert.
- Kan ik een hele iconenset in één keer converteren?
- Batchconversie begint bij Pro, dat 30 bestanden per keer neemt; Studio neemt 50 en Agency 100. Een set in één batch converteren gaat om meer dan snelheid — elk bestand gaat door identieke instellingen, dus de iconen komen onderling consistent uit de bus.
- Blijft transparantie behouden?
- Ja, vanuit een bron die het heeft. Transparante gebieden van een PNG of WebP blijven leeg in de SVG. Een JPEG heeft helemaal geen transparantie, dus een icoon uit een JPEG komt binnen met zijn achtergrond als effen vorm die je kunt verwijderen.
- Moeten iconen SVG zijn of een lettertype?
- SVG. Iconenlettertypen waren een omweg voor een browsertijdperk dat voorbij is: ze kunnen geen meerdere kleuren, ze breken bij een ontbrekend lettertypebestand, en schermlezers lezen ze als tekst. Converteer naar SVG en gebruik het inline of als sprite.
Gerelateerde gidsen
- Hoe vectoriseer je een logo? — Bouw een logo dat je alleen als klein JPG hebt opnieuw op als strakke, drukklare curven met exacte merkkleuren.
- Hoe vectoriseer je blauwdrukken en technische tekeningen? — Converteer gescande tekeningen en schema's naar bewerkbare lijnvoering zonder de fouten van de scanner over te nemen.
- Hoe vectoriseer je een flyer of poster voor grootformaat? — Red een vlak ontwerp voor A1 en groter zonder de zachte randen — en weet welke onderdelen je juist niet moet converteren.