Icon

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Icon draws a registered glyph with name. The default size is md (20 px) and the default tone is current: it takes the colour of the surrounding text.

LightDark

Copy code

import { Icon } from '@bigbang/ui';

export default function Default() {
  return <Icon name="star" />;
}

Sizes

There are five sizes: xs 12, sm 16, md 20, lg 24 and xl 32 px. inherit fills the box a parent component gives it, such as a Button icon slot.

xssmmdlgxl

LightDark

Copy code

import { Icon } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex items-end gap-lg">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <span key={size} className="flex flex-col items-center gap-xs">
          <Icon name="star" size={size} />
          <code className="type-body-sm text-fg-subtle">{size}</code>
        </span>
      ))}
    </div>
  );
}

Tones

tone picks the colour from the color-icon-* tokens. current takes the text colour; the others carry meaning: danger, success, warning, info.

defaultsubtlebranddangersuccesswarninginfodisabled

LightDark

Copy code

import { Icon } from '@bigbang/ui';

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-lg">
      {(['default', 'subtle', 'brand', 'danger', 'success', 'warning', 'info', 'disabled'] as const).map((tone) => (
        <span key={tone} className="flex flex-col items-center gap-xs">
          <Icon name="circle-alert" tone={tone} size="lg" />
          <code className="type-body-sm text-fg-subtle">{tone}</code>
        </span>
      ))}
    </div>
  );
}

Meaningful icon

label makes the icon meaningful: it gets role="img" and an aria-label. Give a label when the icon alone carries information.

LightDark

Copy code

import { Icon } from '@bigbang/ui';

export default function Meaningful() {
  return (
    <span className="inline-flex items-center gap-xs">
      <Icon name="triangle-alert" tone="warning" label="Warning" />
      <Icon name="info" tone="info" label="Information" />
    </span>
  );
}

Right to left

Icons that follow the reading direction (arrows, chevrons, external link, log out) flip horizontally under dir="rtl". Others, such as check, stay put.

ltr

rtl

LightDark

Copy code

import { Icon } from '@bigbang/ui';

export default function RightToLeft() {
  return (
    <div className="flex flex-wrap gap-xl">
      {(['ltr', 'rtl'] as const).map((direction) => (
        <div key={direction} dir={direction} className="flex items-center gap-lg">
          <code className="type-body-sm text-fg-subtle">{direction}</code>
          <Icon name="arrow-right" />
          <Icon name="chevron-right" />
          <Icon name="external-link" />
          <Icon name="check" />
        </div>
      ))}
    </div>
  );
}

Registered icons

All 55 names in the registry are below. Each name is kebab-case and stable; the set behind it may change, the names do not.

align-center

align-left

align-right

arrow-down

arrow-left

arrow-right

arrow-up

bell

bold

calendar

check

chevron-down

chevron-left

chevron-right

chevron-up

chevrons-up-down

circle-alert

circle-check

circle-help

circle-x

clock

copy

download

ellipsis

ellipsis-vertical

external-link

eye

eye-off

file

filter

home

info

italic

layout-grid

list

lock

log-out

mail

menu

minus

moon

pencil

phone

plus

refresh

search

settings

star

sun

trash

triangle-alert

underline

upload

user

x

LightDark

Copy code

import { Icon } from '@bigbang/ui';

const names = [
  'align-center', 'align-left', 'align-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'bell', 'bold', 'calendar',
  'check', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'chevrons-up-down', 'circle-alert', 'circle-check',
  'circle-help', 'circle-x', 'clock', 'copy', 'download', 'ellipsis', 'ellipsis-vertical', 'external-link', 'eye', 'eye-off',
  'file', 'filter', 'home', 'info', 'italic', 'layout-grid', 'list', 'lock', 'log-out', 'mail', 'menu', 'minus', 'moon', 'pencil',
  'phone', 'plus', 'refresh', 'search', 'settings', 'star', 'sun', 'trash', 'triangle-alert', 'underline', 'upload', 'user', 'x',
] as const;

export default function Registry() {
  return (
    <div className="grid w-full grid-cols-2 gap-md lg:grid-cols-4">
      {names.map((name) => (
        <div key={name} className="flex items-center gap-sm">
          <Icon name={name} size="md" tone="default" />
          <code className="type-body-sm text-fg-subtle">{name}</code>
        </div>
      ))}
    </div>
  );
}

Light and dark mode

Icon takes its colours from the color-icon-* tokens; light and dark mode and brand changes need no extra setting.

Light

defaultsubtlebranddangersuccesswarninginfodisabled

Dark

defaultsubtlebranddangersuccesswarninginfodisabled

Copy code

import { Icon } from '@bigbang/ui';

export default function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-lg">
      {(['default', 'subtle', 'brand', 'danger', 'success', 'warning', 'info', 'disabled'] as const).map((tone) => (
        <span key={tone} className="flex flex-col items-center gap-xs">
          <Icon name="circle-alert" tone={tone} size="lg" />
          <code className="type-body-sm text-fg-subtle">{tone}</code>
        </span>
      ))}
    </div>
  );
}