Registry / web-framework / react-bootstrap-icons

react-bootstrap-icons

library1.11.6jsnpmunverified

react-bootstrap-icons is a specialized library that provides the entirety of the Bootstrap Icons collection as individual, configurable React components. Currently, on version 1.11.6, it supports Bootstrap Icons v1.13.1, offering over 2000 SVG icons for use in React applications. The library is actively maintained, with updates typically aligning with new releases of the upstream Bootstrap Icons library. Its primary differentiator is the direct conversion of each icon into a callable React component, allowing for easy integration and customization via standard React props like `color`, `size`, and `className`. It also ships with TypeScript types, enhancing developer experience by providing strong typing for icon names and component props. Unlike generic SVG icon libraries, it is exclusively focused on the Bootstrap Icons set.

web-framework

npm install react-bootstrap-icons

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-BOOTSTRAP-IC

react-bootstrap-icons

web-frameworkjavascriptv1.11.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ArrowRight

✓ import { ArrowRight } from 'react-bootstrap-icons';

✗ const ArrowRight = require('react-bootstrap-icons').ArrowRight;

Prefer named imports for individual icons to minimize bundle size and enable tree-shaking.

Icon

✓ import * as Icon from 'react-bootstrap-icons';

✗ import Icon from 'react-bootstrap-icons';

Use 'import * as Icon' to access all icons as properties of the 'Icon' object, e.g., Icon.ArrowRight. This is useful for dynamic rendering or accessing many icons.

IconProps

✓ import { IconProps } from 'react-bootstrap-icons';

Import 'IconProps' for type-checking when creating wrapper components or extending icon functionality in TypeScript.

icons (dynamic access)

✓ import * as icons from 'react-bootstrap-icons';

✗ import { icons } from 'react-bootstrap-icons';

For dynamic rendering where the icon name is a string variable, import all icons as a namespace object (e.g., `icons`) and then access them using bracket notation: `icons[iconName]`.

Demonstrates importing and rendering multiple Bootstrap Icons components with inline props for color, size, className, and accessibility titles.

import React from 'react'; import { Stopwatch, PaletteFill, Star } from 'react-bootstrap-icons'; export default function MyIconDisplay() { return ( <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}> <Stopwatch color="teal" size={48} className="my-custom-icon stopwatch-timer" title="Time tracking icon" /> <PaletteFill color="#8A2BE2" size={96} className="my-custom-icon color-picker" title="Color palette" /> <Star color="gold" size={32} className="my-custom-icon rating-star" title="Rating star" /> <p> These are some example Bootstrap icons rendered as React components with custom styling and accessibility titles. </p> </div> ); }

Debug

Known issues

gotchaIcon name casing and number prefixes differ from original Bootstrap Icons names. Icon names follow `PascalCase` (e.g., `arrow-right` becomes `ArrowRight`). If an icon name begins with a number (e.g., `1-circle`), it will be prefixed with `Icon` (e.g., `Icon1Circle`).

fix

Always consult the `react-bootstrap-icons` documentation or the source code to confirm the exact `PascalCase` component name for the desired icon.

affects: >=1.0.0

gotchaWhen creating a wrapper component that dynamically renders icons by name (e.g., `<Icon iconName='Stopwatch' />`), avoid using `name` as the prop for the icon string. `name` is a valid SVG attribute and will be passed to the underlying SVG.

fix

Use an alternative prop name like `iconName`, `icon`, or `filename` for the string that specifies the icon, as demonstrated in the README's dynamic icon example.

affects: >=1.0.0

gotchaSVG icons should always include accessibility attributes. Missing titles can make your application less accessible to users relying on screen readers.

fix

Provide a `title` prop to each icon component (e.g., `<ArrowRight title="Right Arrow" />`). This adds an `<title>` element inside the SVG, offering a short text description for screen readers.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: [IconName] is not defined

The specific icon component was used without being imported.

fix

Add `import { [IconName] } from 'react-bootstrap-icons';` to the file where the icon is used, replacing `[IconName]` with the actual icon's PascalCase name.

TypeError: Cannot read properties of undefined (reading '[IconName]')

Attempting to access an icon dynamically from a wildcard import, but the icon name string does not exactly match the component's `PascalCase` name or the component itself is undefined.

fix

Ensure the string used to access the icon (e.g., `icons[iconName]`) precisely matches the `PascalCase` component name. Double-check for typos or incorrect casing, especially for icons starting with numbers (e.g., `Icon1Circle`). You can `console.log(Object.keys(icons))` to verify available names.

JSX element type 'BootstrapIcon' does not have any construct or call signatures.

This TypeScript error indicates that a variable intended to be a React component (e.g., `BootstrapIcon` in the dynamic icon example) is not recognized as such. This often happens if the value resolved from `icons[iconName]` is `undefined` or not a valid React component.

fix

Verify that the `iconName` string correctly resolves to an actual icon component from the `react-bootstrap-icons` library. Ensure the `import * as icons from 'react-bootstrap-icons';` statement is present and that the `iconName` property exactly matches a key within the `icons` object.

Upgrade

Version history

1.11.6latest on npm

Audit

Dependencies

reactrequiredRuntime dependency for rendering React components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ismamz/react-bootstrap-icons ↗

packagehttps://www.npmjs.com/package/react-bootstrap-icons ↗