Docs / Icons / Icon

Icon

Inline Bootstrap Icons rendered as React SVGs. Use the dynamic <Icon name=”…”/> convenience, or import tree-shakeable per-icon components like <BsIconAlarm/>. Every form paints with currentColor and sizes in em, so icons inherit the color and font-size of whatever contains them.

Import

import { Icon, BsIconAlarm } from '@metatoy/bootstrap-styled';

Dynamic icons

<Icon name="alarm" /> looks the slug up in the bundled registry and renders the matching SVG inline. Icons default to size="1em", so they scale with the surrounding text like Bootstrap’s own .bi class.

Which names resolve? The published package ships a committed, representative subset of the Bootstrap Icons set — a full gen:icons build populates the complete registry, but only these names resolve out of the box: alarm, check, chevron-up, chevron-down, chevron-left, chevron-right, facebook, gear, github, house, instagram, plus, search, star, trash, twitter, and x. An unknown name renders nothing (and warns in development).

Sizing

The size prop takes a number (interpreted as pixels) or any CSS length string ('1.5rem', '2em', …). It sets both width and height. Leave it unset to track the parent font-size at 1em.

Color

Bootstrap Icons paint with fill="currentColor", so color comes from the CSS color of a parent — a text-* utility, an inline style, or a --bs-* theme token — with no icon-specific prop.

Accessibility

By default an icon is decorative: it renders aria-hidden and focusable={false}, so assistive tech skips it. Pass label to make it meaningful — the icon becomes role="img" with an aria-label. title adds an in-SVG <title> (a native tooltip) and, when no label is given, also supplies the accessible name.

Dynamic vs. tree-shakeable

<Icon name="…"/> is the convenience form — one component, any registered name, resolved at runtime. For zero bundle tax, import the per-icon components instead: each <BsIcon*/> is a standalone SVG that pulls in only its own path, so unused icons drop out of your bundle. Both forms share the same props.

The tree-shakeable exports available in the published package are:

import {
BsIconAlarm, BsIconCheck,
BsIconChevronUp, BsIconChevronDown, BsIconChevronLeft, BsIconChevronRight,
BsIconFacebook, BsIconGear, BsIconGithub, BsIconHouse, BsIconInstagram,
BsIconPlus, BsIconSearch, BsIconStar, BsIconTrash, BsIconTwitter, BsIconX,
} from '@metatoy/bootstrap-styled';

Icons in buttons

Because icons use currentColor, dropping one into a Button (or any colored control) just works — the glyph takes the control’s text color for every variant.

Props

Icon (and every BsIcon* export) also accepts all native SVG attributes — className, style, onClick, ref, and so on — which pass straight through to the underlying <svg>.

Theming

Icons carry no color of their own: they render fill="currentColor", so they inherit the resolved color of their context. Point that context at a --bs-* token — e.g. a text-primary parent or color: var(--bs-primary) — and the icon reshades with the active theme automatically.

Accessibility summary

• Decorative (default): aria-hidden + focusable={false} — the icon is skipped by screen readers. Use this when adjacent text already conveys the meaning.
• Meaningful: set label (→ role="img" + aria-label) when the icon is the only carrier of information, such as an icon-only button.
• Prefer a real accessible name over relying on the icon’s shape alone.

Explore in Ladle

Browse every icon form and prop in the interactive component gallery: Open in Ladle.