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.

Usage

To use an icon import the component from the package:

Code example

Use it anywhere in your app:

Edit the code below to see your changes live!

API

Icon

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

Flags

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

A complete list of available flags is located here.

Usage

To use a flag import the component from the package:

Code example

Use it anywhere in your app:

US flag

Edit the code below to see your changes live!

    Edit the code below to see your changes live!

    API

    FlagIcon

    Prop Name
    Type
    Default
    Description
    titlestringName of flag

    SVG Title, for accessibility purposes.

    sizeSpacing | number

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

    Props ending with * are required

    Beta