Richtlijnen NL Design System voor iconen

Iconen worden gebruikt om extra betekenis te geven. Ze brengen boodschappen in één oogopslag over en vestigen aandacht op belangrijke informatie. Ook kunnen ze hulp bieden aan iemand met een cognitieve beperking of als iemand moeite heeft met taal.

Let op! Tekst zou altijd voorrang moeten krijgen ten opzichte van iconen. Gebruik iconen alleen waar extra duidelijkheid gewenst is.

Binnen een Design System is het verstandig om iconen consistent toe te passen. Dat gaat gemakkelijk wanneer je gebruik maakt van een iconenset. Welke iconenset je gebruikt voor jouw organisatie staat je helemaal vrij.

Vanuit het NL Design System gebruiken we twee iconensets. De iconen in deze sets typeren we als Functionele iconen en Toptaak iconen.

Overzicht richtlijnen

Maak functionele iconen simpel van vorm

Bij functionele iconen is het belangrijk dat ze simpel van vorm zijn. Hierdoor kun je ze klein toepassen en blijven ze toch herkenbaar.

Toptaak iconen kunnen gedetailleerd zijn

Toptaak iconen zijn gedetailleerder dan functionele iconen. Dat kan ook makkelijk omdat ze groter worden ingezet. Toptaak iconen helpen bezoekers van gemeentelijke websites om sneller bij de juiste informatie te komen.

Positioneer iconen binnen een vierkant grid

Per icoon kan de vorm verschillen in hoogte en breedte. Denk bijvoorbeeld aan een stoplicht of een bus. Een iconenset wordt vaak ontworpen op basis van een vierkant grid.

Stem de grootte van je iconen af op je lettergrootte

Hoewel een iconenset op een bepaald grid wordt ontworpen kan het icoon wel op verschillende groottes worden toegepast. Daarbij is het verstandig om de grootte van iconen af te stemmen met je lettergrootte.

Laat de lijndikte meeschalen

Een 'outline' iconenset is vaak opgebouwd uit lijnen (stroke). Laat de lijndikte meeschalen on het verschillende gewichten in iconen constant te houden.

Zorg voor voldoende contrast

Gebruik je een icoon zonder tekst? Maak het contrast tussen de voor- en achtergrondkleur 3:1 of groter. Tenzij het icoon puur decoratief is.

Respecteer conventies

Voor iconen, en met name functionele iconen, is het belangrijk om conventies te volgen. Zo zijn er bepaalde iconen die sterk aan concept gerelateerd zijn. Het is verstandig deze conventies te respecteren en deze iconen niet ineens voor een andere functie te gebruiken.

Gebruik SVG voor iconen en geen font

In tegenstelling tot SVG worden iconen van een font toegewezen aan Unicode-punten en geïnterpreteerd als tekst. Dit kan tot toegankelijkheidsproblemen leiden.

Bronnen

• Deze documentatie is onder andere gebaseerd op de documentatie rondom iconen van BBC GEL.
• A complete guide to iconography - Bonnie Kate Wolf.
  Uitgebreid artikel over het ontwerpen en toepassen van iconen binnen een Design System.
• Inline SVG vs Icon Fonts - CSS-tricks.
  Artikel over de verschillen tussen ‘Inline SVG’ en ‘Icon Fonts’ worden beschreven.
• Are Hollow Icons Really Harder to Recognize Than Solid Icons? - Curt Arledge.
  Artikel over een onderzoek naar het gebruik van ‘outline’ iconen ten opzicht van ‘solid’ iconen.
• Icons - Google Material.
  Documentatie over het gebruik van iconen binnen het Material Design System van Google.
• Accessible icon buttons - Sara Soueidan.
  Artikel over het toegankelijk opzetten van buttons die alleen een icoon tonen. Er komen verschillende methodes aan bod.
• Aria-label is a xenophobe - Heydon Heydon Pickering.
  Artikel over het gebruik van Aria-label en de problemen die hierbij kunnen optreden bij het vertalen van een webpagina.
• Tabler icons - Codecalm.
  De iconenset die we bij het NL Design System gebruiken voor de functionele iconen van het Voorbeeld thema.
• Gemeenteniconen.nl.
  De iconenset die we bij het NL Design System gebruiken voor het Voorbeeld thema.

Deel je gebruikersonderzoek

Er is nog veel te onderzoeken over het gebruik van iconen. Doe je gebruikersonderzoek? Deel dan alsjeblieft je bevindingen op gebruikersonderzoeken.nl zodat we hiervan allemaal kunnen leren.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.