Alternatives

Illustration — For complex ideas, conveyed in a simple way

Imports

Each icon is exposed from its own entry point to reduce the bundle size and improve performance. Icon entry points follow the pattern:

import { ICON_NAME } from '@balance-web/icon/icons/ICON_NAME';

When you need multiple icons, import from multiple entry points:

import { ChevronRightIcon } from '@balance-web/icon/icons/ChevronRightIcon';
import { XIcon } from '@balance-web/icon/icons/XIcon';

Usage

Use icons to help users more easily understand common interaction patterns that are available. Icons should be used intentionally and be paired with text, when possible, for accessibility. Icons may be used within interactive or static elements.

Color

By default icons will inherit the current color of the container they are in. You may also pass an explicit theme color.

Edit in Playroom

<Inline gap="medium">
  <SmileIcon color="base" />
  <SmileIcon color="active" />
</Inline>

Size

Icons are available in four sizes, medium is the default.

Edit in Playroom

<Inline gap="medium">
  <SmileIcon color="base" size="xsmall" aria-label="12px" />
  <SmileIcon color="base" size="small" aria-label="16px" />
  <SmileIcon color="base" size="medium" aria-label="24px" />
  <SmileIcon color="base" size="large" aria-label="32px" />
</Inline>

Icon Finder

Search the available icons exposed from the web design system.