Pair icons with text rows
Icon lists give each list item a visual marker, making it easier to scan and find specific entries in longer sets.
Icon list
An icon list displays related content where each list item begins with an icon.
GitHub
components/icon-list
components/icon-listStorybook
components/icon-list
components/icon-listCommunicate type or status
Icons can signal category, priority, or state at a glance — users don't need to read every label to understand the list.
More expressive than plain lists
When plain bullet points feel flat, icon lists add visual structure without adding layout complexity.
1
List container
2
List item
3
Leading icon
Default
Icon lists display content rows where each item begins with a leading icon to aid scanning and visual grouping.
Renders a list where each item is preceded by an icon. Use when a repeated visual marker helps users scan a set of similar items or understand their type at a glance.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: gap-xs under sgds/icon-list means sgds/icon-list/gap-xs.
sgds/icon-list
sgds/gap/xssgds/font-size/14sgds/font-size/20sgds/line-height/20sgds/line-height/32When to use
- Use icon list when it gives users a clearer, more consistent SGDS interaction for the task at hand.
- Use the built-in SGDS pattern when it helps users recognise the component quickly and act with confidence.
When not to use
- Do not use this component when a simpler SGDS pattern would communicate the same thing more clearly.
- Do not add repeated or decorative instances that compete with the main content.
Keep the pattern clear
Use one clear, purposeful instance so users can understand the component quickly.
Do not add noise
Repeated or decorative instances make the interface harder to scan.
Built-in accessibility
- Icon lists structure repeated items with supporting icons.
- The component does not add custom keyboard behaviour.
Labels and content
- Use icons to support the text, not replace it.
- Keep each list item meaningful when read without the icon.
Focus and interaction
- Icon list items should not receive focus unless they contain links or controls.
- If an item includes a link, keep the link text clear and reachable.
This component does not have a separate keyboard interaction table because:
- Icon lists are structured content with supporting icons.
- Keyboard interaction only applies when list items contain links or controls.
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.