Communicate at a glance
Icons convey meaning quickly in spaces where text would be too long — labels, buttons, status indicators, and navigation all benefit from visual shorthand.
Icon
Icons offer a form of visual shorthand that can label, inform, and aid navigation quickly and effectively.
GitHub
components/icon
components/iconStorybook
components/icon
components/iconSupport text, not replace it
Icons work best alongside text, not instead of it. When used alone, always pair them with an accessible label so meaning is never ambiguous.
Consistent library
All icons are drawn from the SgdsIcon set, ensuring visual consistency across every product built on SGDS.
1
Icon glyph
2
Size variant
Scale
Icon size should match the surrounding context — smaller for inline use, larger for prominent visual anchors.
Use medium icons as the standard size for most product contexts — buttons, navigation items, and standalone indicators.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: icon-size-2-xl under sgds/icon means sgds/icon/icon-size-2-xl.
sgds/icon
sgds/icon-size/2-xlsgds/icon-size/3-xlsgds/icon-size/lgsgds/icon-size/mdsgds/icon-size/smsgds/icon-size/xlsgds/icon-size/xsWhen to use
- Use icon when it reinforces an action, status, or content type that users can already recognise from context.
- Use it to support meaning, not to replace essential text.
When not to use
- Do not rely on icon alone when the meaning may be unclear.
- Do not mix too many icon styles or meanings in the same interface.
Pair the icon with clear context
Icons work best when nearby text or structure already explains what they mean.
Do not rely on icon alone
Without enough context, users may interpret the same icon in different ways.
Built-in accessibility
- Icons render visual symbols.
- The component does not add custom keyboard behaviour.
Labels and content
- Use icons as supporting visuals, not as the only way to convey meaning.
- Hide decorative icons from assistive technology in the surrounding markup when needed.
Focus and interaction
- Icons should not receive focus on their own.
- If an icon is used inside a button or link, the parent control needs an accessible name.
This component does not have a separate keyboard interaction table because:
- Icons are visual symbols and should not receive focus on their own.
- Keyboard behaviour belongs to the parent button, link, or control that contains the icon.
Have suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.