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

Foundations

Design tokensOverviewToken architectureToken namingBorderOverviewRadiusWidthColourOverviewBrand colourPrimitive colourSemantic colourElevationOverviewEdge elevationSurface elevationIconographyOverviewIcon sizeIcon libraryLayerOverviewZ-indexLayoutOverviewResponsive gridBreakpointMotionOverviewSpacingOverviewSpacer scaleGapPaddingMarginTypographyOverviewText stylesDisplayHeadingsSubtitlesParagraph bodyCaptionsLabelsLinksListsOverlineType systemFont familyFont sizeFont weightLetter spacingLine heightParagraph spacingText decorationText transform

Icon library

The SGDS icon library provides reusable symbols for common interface actions, statuses, and navigation patterns.

Storybook

API

sgds-icon

NameDescriptionname
The name of the icon from sgds icon library
string
size
Specifies a small, medium or large icon, the size is medium by default.
xssmmdlgxl2-xl3-xl

List of icons

sm (16px)md (20px)lg (24px)xl (32px)2-xl (48px)3-xl (64px)
General
72
Arrow
21
Users
9
Communication
8
Alerts & feedback
8
Layout
20
Files
11
Security
6
Media & devices
16
Time
5
Maps & travel
15

Singapore Government Design System

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

Past VersionsSGDS v1SGDS v2