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

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Icon list

An icon list displays related content where each list item begins with an icon.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Pair icons with text

Use icon lists when each row benefits from a visual marker.

Show type or status

Icons can signal category, priority, or state before users read the text.

Add light visual structure

Icon lists add emphasis while keeping the layout simple.

Anatomy

Respond within 3 working days
Bring your supporting documents
1

List container

2

List item

3

Leading icon

Configuration

Size

Use size to scale the font size of all list items in the icon list.

Application submitted
Documents verified
Review in progress

Default size suitable for most body content.

Structure

Respond within 3 working days
Bring your supporting documents

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedGapsgds-gap-xs8pxSpacing between items inside the component; spacing between items of the contentTypographysgds-font-size-body-md—Font size of the content (inherited from parent)sgds-line-height-xsHeight variesLine height of the content (inherited from parent)

Usage

When 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.

Best practices

Identity verified with Singpass
Documents uploaded
Application submitted
Use a consistent icon when items share a meaning

When every item belongs to the same category, repeat the same icon so the visual rhythm shows they are peers.

Eligible for housing grant
Documents verified
Application submitted
Do not mix unrelated icons in the same list

If icons do not share a common purpose, they create noise. Use one icon, or icons tied to a shared dimension.

Application submitted
Documents verified
Review in progress
Vary the icon when items represent different states

When each item carries different meaning, match icons to each state so the list reads as more than a checklist.

Home
Settings
Do not use an icon list as a substitute for a navigation menu

An icon list is presentational, not interactive. Use sidenav or a list of buttons for navigation instead.

Free to use for all residents
Available 24 hours a day
Keep each item to a single line where possible

Icon lists scan best when items are short and parallel. For longer explanations, use a different layout.

Bring all supporting documents, including identification, proof of address, and any letters requested by the agency.
Review the full eligibility criteria before applying, especially if your household details recently changed.
Do not write long explanations as icon list items

Long items make the icon alignment less useful and slow scanning. Use paragraphs, cards, or description lists for detailed content.

Accessibility considerations

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.

Keyboard interaction

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.

Updates

DateVersionDescription18 Dec 2025v3.6.0Icon list line height fixes with new line height tokens in #473.

Roadmap

Planned itemStatusTargetFuture enhancements for icon listPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/icon-list

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