Icon

[Rozerinay]

We willen graag meer leren over de Icon component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Icon

Doel

Grafisch symbool dat visueel informatie geeft over een actie, onderwerp of status.

Onderzoek

Accounts & Self-Service UX: Consider Having an “Icon-Based” Dashboard - Baymard Institute
Gebruikersonderzoek naar het gebruik van iconen in een dashboard. Eén van de inzichten: door gebruik te maken van iconen (i.c.m. tekst), verbeterde de scanbaarheid aanzienlijk van het dashboard voor deelnemers.

Iconen - Gebruikersonderzoeken.nl
Gebruikersonderzoeken naar iconen door gemeente Utrecht en OpenGemeenten.

Usability Testing of Icons - Nielsen Norman Group
Artikel dat uitlegt welke verschillende soorten onderzoeken je in diverse stadia kunt uitvoeren om ervoor te zorgen dat mensen de betekenis en het doel van iconen begrijpen.

Improving Icon Usability and Accessibility: 6 Valuable Tips - The A11Y Collective
Artikel waarin 6 praktische tips staan om je icoonontwerpen te verbeteren van goed naar uitzonderlijk, met de nadruk op inclusiviteit en gebruiksgemak.

Accessible SVGs - CSS-tricks
Artikel dat de impact onderzoekt van deze verandering naar SVG iconen op gebruikers van ondersteunende technologieën (zoals screenreaders) en wat er nodig is om ervoor te zorgen dat SVG’s toegankelijk en bruikbaar zijn voor alle gebruikers.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

With text
Icons can be used alongside text. Using the same text levels for both the icon and text aligns them perfectly.

Square
Sometimes it’s useful for the icon to take up square space, for example, with the Icon Button.

Level 3

Level 4

Level 5

Level 6

Figma
De iconen zijn als placeholders aangegeven in verschillende sizes.

---

Notities

• Format: SVG.
• SVG zit in een <span>.
• Kleur van icoon is afhankelijk van de context.
• In Figma heb je de varianten 'filled' en 'line'.
• Beschikbaar in 4 verschillende sizes, die zijn aangeduid in levels.
• Documentatie beschikbaar (Storybook en Figma).

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

Default

All

---

Notities

• Format: SVG.
• Kleur van icoon is afhankelijk van de context.
• Filled en outline iconen beschikbaar (niet voor elk icoon afzonderlijk).
• Iconen hebben allemaal een vaste grootte (24px).
• Tabler iconen in gebruik.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

User

Table

---

Notities

• Format: SVG.
• Icoon wordt aangeleverd in zwart. Kleur kan worden bepaald via CSS.
• Filled en outline iconen beschikbaar (niet voor elk icoon afzonderlijk).
• Iconen hebben allemaal een vaste grootte (24px).
• In het use element wordt direct href in plaats van xlink:href gebruikt.
• Documentatie beschikbaar.

[Rozerinay]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Icon met badge
Een icon kan voorzien worden van een badge om extra info op een icon te tonen door gebruik te maken van het uno-ng-icon component.

Kleuren
Standaard heeft een icoon de kleur van tekstkleur van het parent element. Daarnaast is het ook mogelijk de kleur van het icoon te definieren, mogelijke kleuren zijn: Wit Zwart Blauw

Formaten
Standaard is een icoon 20px groot. Daarnaast is het ook mogelijk de kleur van het icoon te definieren, mogelijke kleuren zijn: S (16px) M (24px) L (32px) XL (40px)

---

Notities

• Format: SVG.
• Kleur: beschikbaar in 3 kleuren. Heeft standaard kleur van tekstkleur van parent element.
• Filled en outline iconen beschikbaar (niet voor elk icoon afzonderlijk).
• Beschikbaar in verschillende groottes: 16px, 24px, 32px en 40px.
• Toegankelijkheid: er wordt een role aan de icon toegekend, eventueel aangevuld met het title attribuut, zodat screenreaders begrijpen waarvoor het element bedoeld is.
• Documentatie beschikbaar.

[Rozerinay]

OpenGemeenten

• Patternlab

---

Screenshots / Varianten

Patternlab

Voorbeelden van een aantal componenten waarin een icoon te vinden is.

Button (Arrow After)

Button (Icon Municipality Set)

Typolink (File Audio)

OpenGemeentenSite Metadata All

Menu Toggle Button

Menu Link

Top Tasks List

---

Notities

• Geen afzonderlijke Icon component beschikbaar.
• Format: SVG.
• Kleur van icoon is afhankelijk van de context.
• Beschikbaar in verschillende groottes: 16px, 18px, 20px, 24px, 36px, 42px en 48px. De hoogte en breedte kunnen hierbij variëren.

[Rozerinay]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Figma

---

Notities

• Format: SVG.
• Kleur van icoon is afhankelijk van de context.
• Filled en outline iconen beschikbaar (niet voor elk icoon afzonderlijk).
• Iconen hebben allemaal een vaste grootte (32px).
• Wordt meestal gebruikt in combinatie met tekst, zoals in Buttons en Links.
• Documentatie beschikbaar (Figma).

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

---

Notities

• Format: span.
• Role: img.
• Kleur: beschikbaar in 5 kleuren.
• Filled en outline iconen beschikbaar (niet voor elk icoon afzonderlijk).
• Beschikbaar in verschillende groottes: xs, sm, md, lg, xl, 2xl, 3xl en 4xl.
• Documentatie beschikbaar.

[Rozerinay]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Unicode

Unicode Emoji

---

Notities

• Format: SVG.
• Kleur van icoon is afhankelijk van de context. Kan kleur van parent element overnemen.
• Filled en outline iconen beschikbaar (niet voor elk icoon afzonderlijk).
• Grootte van icoon is instelbaar.
• Variable voor grootte en kleur beschikbaar. De hoogte en breedte kunnen hierbij variëren.
• Design tokens beschikbaar.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Icon component op het Community bord