Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Icon

    Draws a glyph from the registered icon set; it is decorative and hidden from screen readers unless it has a label.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Icon } from '@bigbang/ui';
    Source
    Icon.tsx
    Storybook
    Icon · Playground

    Icon is in the @bigbang/ui package; icons come from the @bigbang/icons registry. Installation and style files are the same as for Button; see the Button code tab for details.

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

    <Icon name="star" />;
    <Icon name="triangle-alert" tone="warning" label="Warning" />;

    Props

    Section titled “Props”
    nameRequired
    Description
    Registered icon name. An unknown name is a type error, not a runtime fallback.
    Type
    IconName
    size
    Description
    12, 16, 20, 24 or 32 px; inherit fills the box a parent component sets.
    Type
    'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit'
    Default
    'md'
    tone
    Description
    Colour from the color.icon.* tokens. current takes the colour of the surrounding text.
    Type
    'current' | 'default' | 'subtle' | 'inverse' | 'brand' | 'danger' | 'success' | 'warning' | 'info' | 'disabled'
    Default
    'current'
    label
    Description
    Makes the icon meaningful: it gets role="img" and this text as its name. Omit it for decorative icons, which screen readers skip. Icons inside a Button or IconButton stay decorative; the control carries the name.
    Type
    string
    className
    Description
    For layout only: margins and alignment. Do not use it to change the size or colour.
    Type
    string

    Icon takes no other attributes. ref is not forwarded.

    Data attributes

    Section titled “Data attributes”
    • data-component="icon": on the SVG.
    • data-icon: the registered icon name, for example data-icon="check".

    Adding an icon to the registry

    Section titled “Adding an icon to the registry”

    Icon names are defined in packages/icons/src/registry.ts; only this file imports the icon library. Add a name, then use it with Icon.

    export const icons = {
      // ...
      'star': { component: Star },
      'arrow-right': { component: ArrowRight, mirror: true },
    } as const satisfies Record<string, IconEntry>;

    mirror: true is for icons that flip horizontally under dir="rtl". Names must be kebab-case and stable.

    import type { IconName } from '@bigbang/ui';
    

    const name: IconName = 'check';

    Source and licence

    Section titled “Source and licence”

    The glyphs in the registry come from lucide-react 1.59.0. Lucide is ISC-licensed; icons derived from Feather are MIT-licensed. The licence texts are in packages/icons/NOTICE. Only icons named in the registry enter the package.