Icons

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

Props

type
GoAIconType
The icon type to display. See GoAIconType for available icons.
size
IconSize
Sets the size of the icon. Accepts numeric (1-6) or named sizes.
Defaults to medium.
theme
IconTheme
Sets the icon theme. 'outline' shows stroked icons, 'filled' shows solid icons.
Defaults to outline.
inverted
boolean
When true, inverts the icon colors for use on dark backgrounds.
Defaults to false.
fillcolor
string
Sets a custom fill color for the icon. Accepts any valid CSS color value.
opacity
number
Sets the opacity of the icon from 0 (transparent) to 1 (opaque).
Defaults to 1.
title
string
Adds an accessible title to the icon SVG. Used by screen readers.
testId
string
Sets a data-testid attribute for automated testing.
ariaLabel
string
Defines how the icon will be announced by screen readers.
ariacontrols
string
Identifies the element(s) whose contents or presence are controlled by this icon.
ariaexpanded
string
Indicates whether the element controlled by this icon is expanded or collapsed.
role
string
Sets the ARIA role for the icon. Defaults to 'img'. Use 'presentation' for decorative icons.
Defaults to img.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
 Examples

Button with Icon

ReactAngularWeb Components
<GoabButtonGroup>
      <GoabButton leadingIcon="arrow-back">Go back</GoabButton>
      <GoabButton trailingIcon="arrow-forward">Continue</GoabButton>
      <GoabButton type="secondary" leadingIcon="add">Add item</GoabButton>
    </GoabButtonGroup>

When using icons in buttons, the button text provides the accessible name. The icon is decorative and should be hidden from screen readers with aria-hidden.

No usage guidelines have been documented for this component yet.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Screen Readers

Icon-only interactive elements must have an accessible label so screen reader users understand their purpose.

For IconButton: The ariaLabel prop is required.

// Good - describes the action
<GoabIconButton icon="trash" ariaLabel="Delete item" />

// Bad - no label for screen readers
<GoabIconButton icon="trash" />

For Badge with icon only: Provide ariaLabel when there’s no visible text.

<GoabBadge icon="warning" ariaLabel="Warning" type="important" />

For Icon: Use ariaLabel when the icon conveys meaning, not just decoration.

The label should describe:

  • What action happens (for buttons): “Delete”, “Edit”, “Close”
  • What the icon represents (for informational icons): “Warning”, “Success”
Don't
Don't use icon-only elements without an accessible label