Balance Logo
Balance
Reckon Design System

Icon

Icons are used to visually communicate core parts of the app and available actions.
Install
pnpm add @reckon-web/icon
Import usage
import {
AlertOctagonIcon,
ActivityIcon,
AlertCircleIcon,
AlertTriangleIcon,
AlignCenterIcon,
AlignLeftIcon,
AlignJustifyIcon,
ApertureIcon,
AlignRightIcon,
AnchorIcon,
ArrowDownCircleIcon,
ArrowDownLeftIcon,
ArrowDownIcon,
ArrowLeftCircleIcon,
ArrowRightCircleIcon,
ArrowDownRightIcon,
ArchiveIcon,
ArrowLeftIcon,
ArrowUpLeftIcon,
ArrowRightIcon,
ArrowUpRightIcon,
ArrowUpIcon,
ArrowUpCircleIcon,
AtSignIcon,
AwardIcon,
BatteryIcon,
BatteryChargingIcon,
BarChartIcon,
...
} from '@reckon-web/icon';
  • Code
  • API

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 '@reckon-web/icon/icons/ICON_NAME';

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

import { ChevronRightIcon } from '@reckon-web/icon/icons/ChevronRightIcon';
import { XIcon } from '@reckon-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

Size

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

Icon Finder

Search the available icons exposed from the web design system.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo