React Bootstrap Icons
The brand new Bootstrap Icons library to use as React components.Currently v1.11.3, over 2000 icons!
Installation
npm install react-bootstrap-icons --save
or
yarn add react-bootstrap-icons
Usage
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 |
| className?
| string | bi bi-{icon-name}
and add your own classes |