# react-bootstrap-icons

> React component for Bootstrap Icons

Latest version **1.11.6** (published 2025-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-bootstrap-icons
pnpm add react-bootstrap-icons
yarn add react-bootstrap-icons
bun add react-bootstrap-icons
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.11.6 |
| Published | 2025-05-12 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 197 |
| Author | Ismael Martínez |
| Maintainers | ismamz |
| Keywords | react, icons, svg, bootstrap |

## Links

- npm: https://www.npmjs.com/package/react-bootstrap-icons
- Repository: https://github.com/ismamz/react-bootstrap-icons
- Homepage: https://github.com/ismamz/react-bootstrap-icons#readme
- Issues: https://github.com/ismamz/react-bootstrap-icons/issues
- npm.io page: https://npm.io/package/react-bootstrap-icons

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.11.6 (latest) — 2025-05-12
- 1.11.5 — 2024-12-05
- 1.11.4 — 2024-04-11
- 1.11.3 — 2024-02-16
- 1.10.3 — 2023-04-03
- 1.10.2 — 2022-11-21
- 1.9.1 — 2022-09-27
- 1.8.4 — 2022-06-15
- 1.8.3 — 2022-06-15
- 1.8.2 — 2022-04-26
- 1.8.1 — 2022-03-24
- 1.7.2 — 2021-12-18
- 1.6.1 — 2021-10-24
- 1.5.0 — 2021-05-13
- 1.4.1 — 2021-05-10
- … 17 more at https://npm.io/package/react-bootstrap-icons/versions

## README

# React Bootstrap Icons

The brand new [Bootstrap Icons library](https://icons.getbootstrap.com/) to use as React components.

> Currently v1.13.1, over **2000 icons!**

![bootstrap-icons](https://user-images.githubusercontent.com/39626451/192898250-711e2281-ab03-433a-afeb-4ad542b68a5b.png)

## Installation

```bash
npm install react-bootstrap-icons --save
```

or

```bash
yarn add react-bootstrap-icons
```

## Usage

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

export default function App() {
  return <ArrowRight />;
}
```

Icons can be configured with inline props:

```jsx
<ArrowRight color="royalblue" size={96} />
```

You can pass whatever props you want:

```jsx
<ArrowRight className="ml-4" />
```

You can also include the whole icon pack:

```jsx
import * as Icon from 'react-bootstrap-icons';

export default function App() {
  return <Icon.ArrowRight />;
}
```

The icon names are the `PascalCase` version of the original name. For those icons whose name begins with a number, the `Icon` prefix will be used. Examples: `arrow-right` → `ArrowRight`, `1-circle` → `Icon1Circle`.

You can also create an `Icon` component and pass it the icon name as a prop:

```jsx
import * as icons from 'react-bootstrap-icons';

interface IconProps extends icons.IconProps {
  // Cannot use "name" as it is a valid SVG attribute
  // "iconName", "filename", "icon" will do it instead
  iconName: keyof typeof icons;
}

export const Icon = ({ iconName, ...props }: IconProps) => {
  const BootstrapIcon = icons[iconName];
  return <BootstrapIcon {...props} />;
}
```

```jsx
import { Icon } from './Icon';

export default function App() {
  return (
    <Icon
      iconName="Stopwatch"
      color="royalblue"
      size={96}
      className="align-top"
    />
  );
}
```

## IconProps

| Name         | Type             | Description                                    |
| ------------ | ---------------- | ---------------------------------------------- |
| `color?`     | string           | color of the icon                              |
| `size?`      | string \| number | size of the icon (`width` and `height`)        |
| `title?`     | string           | provides an accessible, short-text description |
| `className?` | string           | `bi bi-{icon-name}` and add your own classes   |

## Figma Plugin

You can install it from the Figma app: [Bootstrap Icons Plugin for Figma](https://www.figma.com/community/plugin/868341386266170307/Bootstrap-Icons)

## More options

Other ways to use Boostrap icons: [https://icons.getbootstrap.com/#usage](https://icons.getbootstrap.com/#usage)

## License

- react-bootstrap-icons are open-sourced ([MIT](https://github.com/ismamz/react-bootstrap-icons/blob/master/LICENSE.md))
- Bootstrap Icons are open-sourced ([MIT](https://github.com/twbs/icons/blob/main/LICENSE)).

## Collaborators

- [@kwnath](https://github.com/kwnath)

---
_Source: https://npm.io/package/react-bootstrap-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._