Icon

Overview

BigDesign offers a variety of icon components that can be used in a project. We also provide Country flags icons that can be imported.

To use the icons install @bigcommerce/big-design-icons package from npm.

When to use:

  • To represent an action or a status.
  • To provide additional visual cues.

Implementation

To use an icon, import the component from the package:

Code example

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" />

Props

Prop name
Type
Default
Description
titlestring

SVG Title, for accessibility purposes.

colorColor

Sets the icon color given a color name from our palette.

sizeSpacing | number

Determines the size of the icon. Accepts a Spacing value or a number of px.

Props ending with * are required

Available icons