Icons

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

Props

ariaLabel

string

Defines how the icon will be announced by screen readers.

inverted

string | boolean

When true, inverts the icon colors for use on dark backgrounds.

opacity

number

Sets the opacity of the icon from 0 (transparent) to 1 (opaque).

Defaults to 1.

size

GoabIconSize

Sets the size of the icon. Accepts numeric (1-6) or named sizes.

Defaults to medium.

testId

string

Sets a data-testid attribute for automated testing.

theme

GoabIconTheme

Sets the icon theme. 'outline' shows stroked icons, 'filled' shows solid icons.

Defaults to outline.

title

string

Adds an accessible title to the icon SVG. Used by screen readers.

TODO

Change type to only boolean /** Sets a custom fill color for the icon. Accepts any valid CSS color value. */ fillColor?: string

type

GoabIconType | GoabIconOverridesType

The icon type to display. See GoabIconType for available icons.

mt, mr, mb, ml

Spacing

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

Examples

Button with Icon

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

<goab-button-group>
  <goab-button leadingIcon="arrow-back">Go back</goab-button>
  <goab-button trailingIcon="arrow-forward">Continue</goab-button>
  <goab-button type="secondary" leadingIcon="add">Add item</goab-button>
</goab-button-group>

<goa-button-group>
  <goa-button version="2" leadingicon="arrow-back">Go back</goa-button>
  <goa-button version="2" trailingicon="arrow-forward">Continue</goa-button>
  <goa-button version="2" type="secondary" leadingicon="add">Add item</goa-button>
</goa-button-group>

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

View old component docs

Props

Button with Icon

Screen Readers

Related components