Icon
`<gcds-icon>`

An icon is a symbol that visually represents an action or idea.

GitHub
Figma

Icon component preview

Problems icons solve

Use an icon to:

Clarify information with a visual reference.
Highlight key actions or states, like a checkmark for validation.
Scan content quicker and reduce cognitive load.

Text to display written content in a styled and formatted paragraph.

Notice to display a short, prominent message.

Icon use cases

Emphasize information

Choose an icon to match the information you want to emphasize.

Info-circle

Non-critical but helpful information.

Warning-triangle

Cautionary warning with no action needed.

Exclamation-circle

Critical warning before an action.

Checkmark-circle

Confirmation of completion or successful actions.

Indicate action

Choose an icon to match the action you want to indicate.

Chevron-[left/right/up/down]

Expand / collapse content or indicate direction.

Cancel an action or close a flow.

Download

Download a file.

Send an email.

External-link

Open a link in a new tab or window.

Phone

Call a phone number.

Search for specific information.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback

Report an issue on GitHub

2025-05-06

Icon <gcds-icon>