React Bootstrap Icons

1.11.6 · active · verified Tue Apr 21

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.

Common errors

```
ReferenceError: [IconName] is not defined
```
cause 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]')
```
cause 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.
```
cause 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.

Warnings

gotcha Icon 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.
gotcha When 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.
gotcha SVG 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.

Install

npm install react-bootstrap-icons npm
yarn add react-bootstrap-icons yarn
pnpm add react-bootstrap-icons pnpm

Imports

ArrowRight

wrong:

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

correct:

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

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

Icon
wrong:
```
import Icon from 'react-bootstrap-icons';
```
correct:
```
import * as 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)
wrong:
```
import { icons } from 'react-bootstrap-icons';
```
correct:
```
import * as 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]`.

Quickstart

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>
  );
}

view raw JSON →