Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.Support for the Long Term Support (LTS) version of the Design system will be available until September 2025. View the upgrade guide
AllAccordionCalloutContainerDetailsHero bannerListPopoverTableTextBadgeFilter chipModalNotification bannerProgress indicatorSkeleton loaderTooltipButtonButton groupCheckboxDate pickerDropdownFile uploaderIcon buttonInputRadioText areaDrawer FooterForm stepperHeaderMicrosite headerPaginationSide menuTabsBlockDividerForm itemGridIconsLinkSpacer
IconsGitHub issues
FigmaA simple and universal graphic symbol representing an action, object, or concept to help guide the user.Related:Badge, Callout, Icon button, Tooltip
Code playground
<GoAIcon type="accessibility"></GoAIcon>
Properties
typeGoAIconType
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.
Core icon set

Alert and messaging

information-circle
warning
add-circle
alert-circle
checkmark-circle
close-circle
help-circle
remove-circle

Basic

close
checkmark
add
remove

Direction

chevron-down
chevron-up
chevron-back
chevron-forward
arrow-down
arrow-up
arrow-back
arrow-forward
caret-down
caret-up
caret-back
caret-forward

Interactions

menu
reload
search
pencil
flag
open
bookmark
calendar
documents
trash
funnel
ellipsis-vertical
notifications
notifications-off
eye
eye-off
cloud-upload
download

Accounts

person-circle
settings
mail
call
Extended icon setThe extended icon set includes the full Ionicons library. When you need additional icons outside of the core icon set, use these icons to maintain a consistent visual language.
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
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes