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.

Fotocamera, klok en potloot icoon. Ieder op een vergroot grid van 24 bij 24.

Door te werken met een grid zorg je voor consistente vormen en afmetingen. Door iconen binnen dit vierkant te positioneren zijn ze inwisselbaar. Hierdoor zullen teksten niet verspringen als je de iconen bijvoorbeeld toepast in een lijst.

Twee lijstjes met vier labels. Voor elk label staat een icoon. Bij de eerste set verschillende de iconen in breedte waardoor de labels verspringen. Bij de tweede set hebben alle iconen dezelfde breedte waardoor de labels links uitlijnen. `

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.