Iconografie is de set kleine symbolen die een product gebruikt voor acties en begrippen. Een vergrootglas betekent zoeken, een tandwiel betekent instellingen, een prullenbak betekent verwijderen. Samen vormen die symbolen een visuele taal waarmee mensen een interface snel kunnen scannen, zonder elk label woord voor woord te lezen.
Denk aan verkeersborden. Een rode driehoek waarschuwt, een blauwe cirkel geeft een gebod, en een bestuurder uit een ander land snapt ze nog steeds op snelheid. Goede iconografie werkt net zo binnen een product: consistente vormen dragen consistente betekenis, en daarom zijn iconen een kerndeel van elk design system en een bouwsteen van de user interface. Als stijl en lijndikte uniform blijven, voelt het hele product doordacht.
Het risico is aannemen dat een icoon duidelijk is terwijl dat niet zo is. Buiten een handvol universele symbolen zijn veel iconen hooguit te raden, dus een kort label erbij houdt het helder. Stijlen mengen, sommige outline en sommige gevuld, is de andere veelgemaakte misser; het laat een nette interface stilletjes amateuristisch lijken.
Twee details verdienen nog aandacht. Het eerste is toegankelijkheid: een knop met alleen een icoon zegt een schermlezer niets, tenzij je een verborgen tekstlabel toevoegt, dus het symbool en zijn microcopy horen samen te reizen. Het tweede is hergebruik. Putten uit één open set zoals Lucide, Feather of Material Symbols, in plaats van elk icoon zelf te tekenen, houdt maat en lijndikte gelijk en bespaart het team het opnieuw uitvinden van een prullenbak. Een SVG-icoon schaalt bovendien scherp mee op elk scherm, van een kleine knop tot een grote header, zonder kartelranden.
Bij TopDevs putten we uit één consistente iconenset en labelen we alles wat dubbelzinnig kan zijn, zodat gebruikers nooit hoeven stil te staan om een symbool te ontcijferen.
