React Bootstrap Icons
The brand new Bootstrap Icons library to use as React components.
Currently v1.10.3, over 1900 icons!
Installation
npm install react-bootstrap-icons --saveor
yarn add react-bootstrap-iconsUsage
import { ArrowRight } from 'react-bootstrap-icons';
export default function App() {
return <ArrowRight />;
}Icons can be configured with inline props:
<ArrowRight color="royalblue" size={96} />You can pass whatever props you want:
<ArrowRight className="ml-4" />You can also include the whole icon pack:
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:
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} />;
}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 |
Figma Plugin
You can install it from the Figma app: Bootstrap Icons Plugin for Figma
More options
Other ways to use Boostrap icons: https://icons.getbootstrap.com/#usage