Icon

To add the Icon component to your app:

import {Icon} from '@stripe/ui-extension-sdk/ui';

This is a preview of an Icon component:

<Icon name="addCircle" />

Icon props

CSS

Size

Icons use the size prop for sizing. They can have one of five sizes:

• xsmall: 12px
• small: 16px
• medium: 20px (default)
• large: 32px
• xlarge: 64px

<Icon name="konbini" size="xsmall" />
<Icon name="konbini" size="small" />
<Icon name="konbini" size="medium" />
<Icon name="konbini" size="large" />
<Icon name="konbini" size="xlarge" />

Color and fill

You can give the Icon component color with the fill property of the css prop.

<Icon name="cancelCircle" css={{fill: 'critical'}} />

Default color behavior

By default, icons are the same color as the text around them.

<Inline css={{color: 'attention'}}>
  <Icon name="mobile" /> new messages
</Inline>

Accessibility

By default, there is an aria-hidden attribute on icons (read more about ARIA). In the rare situations the icon has semantic value to screen-reader users, you can manually set aria-hidden={false}. In these situations it’s often a good idea to add an aria-label as well. In general, it’s better to have text labels rather than making visual-only icons important for a workflow.

<Icon icon={addCircle} aria-hidden={false} aria-label="Add another item" />

Icons in Button and Badge components

You can place an Icon component inside of a Button or Badge component.

<Button>
  <Icon name="mobile" size="xsmall" />
  <Inline>New messages</Inline>
</Button>
<Badge type="positive">
  <Icon name="mobile" size="xsmall" />
  New messages
</Badge>

Icon reference