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.

Een lijstje van 3 labels met voor elk label een kalender icoon. De labels worden groter en het kalender icoon schaalt mee.

Functionele iconen worden vaak ontworpen en toegepast op een formaat van 16×16, 24×24 of 32×32. Deze formaten sluiten mooi aan bij het veelal toegepaste 8pt grid voor ruimte en de standaard browser lettergroote van 16px. Een evenwichtige balans van icoon en lettergrootte zou dan kunnen zijn lettergrootte 16px met een icoon van 24px. Of een lettergrootte 26px met een icoon van 32px.

Grootte als design token

Voor de grootte van functionele iconen kun je een common token zoals voorbeeldprefix.icon.functional.size inzetten. Op die manier kun je in 1 keer alle functionele iconen op component niveau in formaat aanpassen. Voor Toptaak iconen zou dit een common token zoals voorbeeldprefix.icon.toptask.size kunnen zijn.

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.