Icons

Icons live in a separate package @bigcommerce/big-design-icons. To use the icons you will first need to add the package to your app using npm install @bigcommerce/big-design-icons or yarn add @bigcommerce/big-design-icons. Iconography Design Guidelines.

Usage

To use an icon import the component from the package:

Code example

import { CheckIcon } from '@bigcommerce/big-design-icons';

import { CheckIcon } from '@bigcommerce/big-design-icons';

Use it anywhere in your app:

Edit the code below to see your changes live!

<CheckIcon color="success" size="xxxLarge" />

<CheckIcon color="success" size="xxxLarge" />

API

Icon

Prop Name	Type	Description
`title`	`string`	SVG Title, for accessibility purposes.
`color`	`Color`	Sets the icon color given a color name from our palette.
`size`	`Spacing` \| `number`	Determines the size of the icon. Accepts a Spacing value or a number of px.

Props ending with * are required

Available Icons

Beta