Lead with a visual cue
The icon draws attention to the card's topic before users read the text, helping them navigate a grid of options more quickly.
Icon card
Icon cards can include headers, footers, rich content, and contextual background colours or images.
GitHub
components/icon-card
components/icon-cardStorybook
components/icon-card
components/icon-cardDescribe features or categories
Icon cards work well for presenting a set of features, services, or categories where a small visual anchors each item.
Uniform across a grid
The consistent structure — icon, title, description — means a row of icon cards stays balanced and easy to scan.
1
Container
2
Icon (optional)
3
Title (slot)
4
Description (slot)
Default
Icon cards pair a leading icon with a title and description to help users identify the category or topic at a glance.
Renders a card with a leading icon, title, and description. Use when a simple visual anchor helps users recognise the category or topic of each card in a grid.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-none under sgds/icon-card means sgds/icon-card/padding-none.
sgds/icon-card
sgds/padding/nonesgds/padding/xlsgds/border-color-transparentsgds/border-width/1sgds/bg-translucent-subtlesgds/opacity/50When to use
- Use this component to group related information so users can scan it in smaller chunks.
- Use it when the built-in SGDS structure helps you keep content consistent across the page.
When not to use
- Do not use this component when simpler page content or a plain heading would communicate the same information more clearly.
- Do not overload it with competing content, controls, or visual treatments that weaken hierarchy.
Keep the content focused
Use one clear content pattern so users can scan and understand the component quickly.
Do not overload the component
Too many repeated instances or competing content blocks make the page harder to scan.
Built-in accessibility
- Icon cards use card structure with an icon slot and optional stretched-link behaviour.
- The card becomes focusable only when it is configured as a stretched link.
Labels and content
- Use the icon to support the title, not replace it.
- Keep the title and description meaningful without relying on the icon.
Focus and interaction
- If the card links somewhere, use one clear destination.
- Keep any nested interactive content reachable and understandable.
This component does not have a separate keyboard interaction table because:
- Icon cards do not define a keyboard pattern on their own.
- Keyboard behaviour depends on whether the card is configured as a link or contains interactive elements.
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.