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 --save

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

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

License

react-bootstrap-icons are open-sourced (MIT)
Bootstrap Icons are open-sourced (MIT).

Collaborators

@kwnath

2.7 KiB Raw Permalink Blame History