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 NL Design System gebruiken we twee iconensets. De iconen in deze sets typeren we als Functionele iconen en Toptaak iconen.

Overzicht richtlijnen

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 NL Design System gebruiken voor de functionele iconen van het Start-thema.
• Gemeenteniconen.nl.
  De iconenset die we bij NL Design System gebruiken voor het Start-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 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.