This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Icon size

Icon tokens provide consistent sizing and styling decisions so icons stay aligned with SGDS components and typography.

Design token

CSS variable

Figma token

CSS variable

Value (px/rem)

Example

--sgds-icon-size-xs

12/0.75

--sgds-icon-size-sm

16/1

--sgds-icon-size-md

20/1.25

--sgds-icon-size-lg

Base

24/1.5

--sgds-icon-size-xl

32/2

--sgds-icon-size-2-xl

48/3

--sgds-icon-size-3-xl

64/4

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.