Icon library

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

Use <sgds-icon> with the name attribute to render any icon from the registry. Click a tile to copy the icon name to your clipboard.

Usage

Import the component and use the name and optional size attributes.

<sgds-icon name="house" size="lg"></sgds-icon>

Attributes

AttributeTypeDefaultDescriptionnamestringThe name of the icon from the SGDS icon registry. Required.size"xs" | "sm" | "md" | "lg" | "xl" | "2-xl" | "3-xl""md"Sets the icon size. Maps to the SGDS icon size token scale (12px–64px).

215 icons in 14 categories

General

82

Arrow

21

Users

9

Communication

8

Alerts & feedback

8

Layout

21

Finance & eCommerce

1

Files

11

Security

7

Media & devices

16

Time

5

Social media

8

Logo

1

Maps & travel

17

Singapore Government Design System

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