Iconen - afmetingen

Kleine Iconen

Dcr Icons kunnen vergroot of verkleind worden zonder kwaliteitsverlies. Wanneer iconen kleiner worden weergegeven (onder de 20px), is het essentieel dat een begeleidende labeltekst aanwezig is voor:

• Iconen met veel details of meerdere onderdelen.
• Iconen die een kernactie in de gebruikersinterface vertegenwoordigen.

Doelgrootte

Rond elk icoon moet voldoende ruimte worden voorzien om zowel de leesbaarheid als de interactie te garanderen.

Aanbevolen:
Een icoon met een afmeting van 24px dient standaard in een interactiegebied van 48px (cds.sys.dimension.touch.target) geplaatst te worden.

⚠️ Let op: dcr-icons mogen niet interactief zijn. Interactie vindt altijd plaats via een knop, link, enzovoort. Deze zijn aangepast om correct te functioneren met toetsenbordnavigatie, screenreaders, ... . Het is dus aan de knop waarin een dcr-icon zich bevindt om voldoende interactiegebied te bieden.

Afmetingen

Bij gebruik van een muis en toetsenbord als primaire invoer, kan de ruimte iets compacter zijn om een dichte layout mogelijk te maken.

Aanbevolen:
Een icoon van 20px kan in een doelgebied van 40px (cds.sys.dimension.touch.content) geplaatst worden, zodat de toegankelijkheid en bruikbaarheid behouden blijven.