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

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

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

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

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

Use it anywhere in your app:

Edit the code below to see your changes live!

<USFlagIcon size="xxxLarge" />

<USFlagIcon size="xxxLarge" />

Edit the code below to see your changes live!

function Example() {
  const [value, setValue] = useState('');
  const handleChange = (val) => setValue(val);

  return (
    <Form>
      <FormGroup>
        <Select
          filterable={false}
          label="Countries"
          maxHeight={300}
          onOptionChange={handleChange}
          options={[
            { value: 'us', content: 'United States', icon: <USFlagIcon /> },
            { value: 'mx', content: 'Mexico', icon: <MXFlagIcon /> },
            { value: 'ca', content: 'Canada', icon: <CAFlagIcon /> },
            { value: 'en', content: 'England', icon: <GBFlagIcon /> },
            { value: 'fr', content: 'France', icon: <FRFlagIcon /> },
            { value: 'gr', content: 'Germany', icon: <DEFlagIcon /> },
            { value: 'ar', content: 'Argentina', icon: <ARFlagIcon /> },
            { value: 'ru', content: 'Russia', disabled: true, icon: <RUFlagIcon /> },
            { value: 'ch', content: 'Chile', icon: <CLFlagIcon /> },
            { value: 'jp', content: 'Japan', icon: <JPFlagIcon /> },
            { value: 'cn', content: 'China', icon: <CNFlagIcon /> },
            { value: 'sk', content: 'South Korea', icon: <KRFlagIcon /> },
            { value: 'au', content: 'Australia', icon: <AUFlagIcon /> },
          ]}
          placeholder={'Choose country'}
          placement={'bottom-start'}
          required
          value={value}
        />
      </FormGroup>
    </Form>
  );
}

function Example() {
  const [value, setValue] = useState('');
  const handleChange = (val) => setValue(val);
  return (
    <Form>
      <FormGroup>
        <Select
          filterable={false}
          label="Countries"
          maxHeight={300}
          onOptionChange={handleChange}
          options={[
            { value: 'us', content: 'United States', icon: <USFlagIcon /> },
            { value: 'mx', content: 'Mexico', icon: <MXFlagIcon /> },
            { value: 'ca', content: 'Canada', icon: <CAFlagIcon /> },
            { value: 'en', content: 'England', icon: <GBFlagIcon /> },
            { value: 'fr', content: 'France', icon: <FRFlagIcon /> },
            { value: 'gr', content: 'Germany', icon: <DEFlagIcon /> },
            { value: 'ar', content: 'Argentina', icon: <ARFlagIcon /> },
            { value: 'ru', content: 'Russia', disabled: true, icon: <RUFlagIcon /> },
            { value: 'ch', content: 'Chile', icon: <CLFlagIcon /> },
            { value: 'jp', content: 'Japan', icon: <JPFlagIcon /> },
            { value: 'cn', content: 'China', icon: <CNFlagIcon /> },
            { value: 'sk', content: 'South Korea', icon: <KRFlagIcon /> },
            { value: 'au', content: 'Australia', icon: <AUFlagIcon /> },
          ]}
          placeholder={'Choose country'}
          placement={'bottom-start'}
          required
          value={value}
        />
      </FormGroup>
    </Form>
  );
}

API

FlagIcon

Prop Name	Type	Default	Description
`title`	`string`	`Name of flag`	SVG Title, for accessibility purposes.
`size`	`Spacing` \| `number`		Determines the size of the icon. Accepts a Spacing value or a number of px.

Props ending with * are required

Beta