Icons

A simple and universal graphic symbol representing an action, object, or concept to help guide the user.

Related components: Badge, Callout, Icon button, Tooltip

Code examples

<GoAIcon type="accessibility"></GoAIcon>

type

GoAIconType

Sets the icon.

sizesmall | medium | large

Sets the size of icon. Defaults to medium.

themeoutline | filled

Styles the icon to show outline or filled. Defaults to outline.

opacitynumber

Sets the opacity of the icon between 0 and 1. Defaults to 1.

fillColorstring

Sets the fill colour of the icon. Defaults to false.

invertedboolean

Colors the icon white for use on dark backgrounds. Defaults to false.

titlestring

Sets the title of the icon.

ariaLabelstring

Sets the accessible name of the icon.

testIdstring

Sets the data-testid attribute. Used with ByTestId queries in tests.

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Alert and messaging

information-circle

information-circle copied to clipboard

warning

warning copied to clipboard

add-circle

add-circle copied to clipboard

alert-circle

alert-circle copied to clipboard

checkmark-circle

checkmark-circle copied to clipboard

close-circle

close-circle copied to clipboard

help-circle

help-circle copied to clipboard

remove-circle

remove-circle copied to clipboard

Basic

close copied to clipboard

checkmark

checkmark copied to clipboard

add

add copied to clipboard

remove

remove copied to clipboard

Direction

chevron-down

chevron-down copied to clipboard

chevron-up

chevron-up copied to clipboard

chevron-back

chevron-back copied to clipboard

chevron-forward

chevron-forward copied to clipboard

arrow-down

arrow-down copied to clipboard

arrow-up

arrow-up copied to clipboard

arrow-back

arrow-back copied to clipboard

arrow-forward

arrow-forward copied to clipboard

caret-down

caret-down copied to clipboard

caret-up

caret-up copied to clipboard

caret-back

caret-back copied to clipboard

caret-forward

caret-forward copied to clipboard

Interactions

menu copied to clipboard

reload

reload copied to clipboard

search copied to clipboard

pencil

pencil copied to clipboard

flag

flag copied to clipboard

open

open copied to clipboard

bookmark

bookmark copied to clipboard

calendar

calendar copied to clipboard

documents

documents copied to clipboard

trash

trash copied to clipboard

funnel

funnel copied to clipboard

ellipsis-vertical

ellipsis-vertical copied to clipboard

notifications

notifications copied to clipboard

notifications-off

notifications-off copied to clipboard

eye

eye copied to clipboard

eye-off

eye-off copied to clipboard

cloud-upload

cloud-upload copied to clipboard

download

download copied to clipboard

Accounts

person-circle

person-circle copied to clipboard

settings

settings copied to clipboard

mail

mail copied to clipboard

call

call copied to clipboard

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours