Skip to main content

Richtlijnen voor iconen

Iconen moeten opzettelijk gebruikt worden en waar mogelijk, met het oog op de toegankelijkheid, gekoppeld aan een tekstlabel. Iconen kunnen zowel als interactieve als statische elementen fungeren.

Grofweg zijn er twee categorieën iconen; functionele en illustratieve iconen.

Denk bij functionele iconen bijvoorbeeld aan:

  • Chevrons
  • Opslaan en download indicatoren
  • Een × om een dialoogvenster te sluiten

Functionele iconen zijn vaak abstract en hun betekenis is vaak aangeleerd, denk hierbij bijvoorbeeld aan het floppy icoon voor opslaan, of een vergrootglas om te zoeken. Illustratieve iconen zorgen in één oogopslag dat een tekstlabel verduidelijkt of een thema uitgebeeld kan worden.

Combinatie van icoon en tekst

Combineer waar mogelijk een icoon met tekst.

Het kan zijn dat een bezoeker een icoon niet helemaal goed begrijpt. Het gebruik van tekst (label) is ook een belangrijke factor in de navigatie. Een eenvoudig en duidelijk icoon met een goed omschreven label is superieur aan iconen of labels alleen.

Niet te veel iconen op een pagina

Te veel iconen gebruiken op een pagina kan een soort blindheid veroorzaken.

Let er op dat er niet te veel iconen op een pagina komen te staan en voorkom een oerwoud van plaatjes. Bij het gebruik van te veel iconen worden de iconen niets meer dan decoratie op je pagina en mist het z’n doel als navigatiehulp voor de bezoeker.

Door het aantal iconen te beperken, trekken de iconen die je wel gebruikt sneller de aandacht van de gebruiker en wordt het navigeren op de pagina eenvoudiger.

De uitstraling van iconen hebben een effect op de vormgeving van de portaal/webpagina. Let dus goed op hoe en welke iconen jullie willen gaan gebruiken.

Icoon kleuren

Icoon kleuren moeten automatisch de kleur kunnen overnemen van nabije content.

De valkuil is om hardcoded kleur waardes zoals fill="#ABCDEF te gebruiken. Gebruik in plaats daar van de CSS waarde currentColor: fill="currentColor". Dit is een handmatige aanpassing in de code van de SVG, en een essentiële. Dit principe is ook toepasbaar op andere kleur-gerelateerde eigenschappen zoals stroke.

Referenties