Icons

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

Props

type

GoabIconType | GoabIconOverridesType

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

ariaLabel

string

Defines how the icon will be announced by screen readers.

fillColor

string

Sets a custom fill color for the icon. Accepts any valid CSS color value.

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.

role

string

Sets the ARIA role for the icon. Use 'presentation' for decorative icons.

Defaults to img.

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.

mt, mr, mb, ml

Spacing

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

Examples

Button with Icon

<GoabButtonGroup alignment="start">
  <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 alignment="start">
  <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 alignment="start">
  <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.

Error pages

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

Error pages

Screen Readers

Related components