GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Icon
<gcds-icon>

Also called: symbol, glyph, graphic. 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-circleNon-critical but helpful information.

Warning-triangleCautionary warning with no action needed.

Exclamation-circleCritical warning before an action.

Checkmark-circleConfirmation of completion or successful actions.

Indicate action

Choose an icon to match the action you want to indicate.
Arrow-[up/down]Indicate the active sort order (ascending or descending).

Arrow-up-downIndicate that content items can be sorted.
Chevron-[left/right/up/down]Expand / collapse content or indicate direction.

CloseCancel an action or close a flow.

DownloadDownload a file.

EmailSend an email.

External-linkOpen a link in a new tab or window.

FilterFilter content.

PhoneCall a phone number.

SearchSearch for specific information.

SortSort content.

TuneTune or adjust settings.
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
2026-06-01