Home » React JS » React Bootstrap icons

React Bootstrap icons

Following on from my post about making buttons using React and Bootstrap, here is a tutorial on using React Bootstrap Icons. Before we dive into the detail I am presuming that you have created a React app already, so once you are ready to start focusing on using icons in your Bootstrap React app you’ll need to:

  1. Install bootstrap
  2. Install bootstrap icons

Read on for details of each of these steps.

Install Bootstrap

Check here for the latest version – https://react-bootstrap.github.io/getting-started/introduction/ and then follow their latest instructions, but you’ll need to use something like the following command to install the latest package to your React app:

npm install react-bootstrap bootstrap@5.1.3

Then reference the Bootstrap css file itself from your index.js file, by adding a line like this:

//add this line to the top of your file
import "bootstrap/dist/css/bootstrap.min.css";

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Install the React Bootstrap Icons package

In order to use this package you need to install it from here. Again, follow their instructions for the most up to date command, but you’ll need to use a command like this to install the package using npm:

npm install react-bootstrap-icons --save

…or if you use Yarn:

yarn add react-bootstrap-icons

Viewing and using the icons

The whole library of icons is here to view, so once you’ve found the icon(s) you want to use, make a note of the name. You can search for icons, so let’s say you’re looking for an icon to do with a chart, you’d search like this:

Searching the react bootstrap icons library

You can import each icon individually by using it’s name, and in VS Code, as you start typing the name within the curly brackets, you’ll see an autocomplete list come up of all of the available icons. So importing the BarChartLineFill icon would look like this :

import { BarChartLineFill } from "react-bootstrap-icons";

….or you can import the whole pack.

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

Once you’ve imported the icon or icons that you need you’re ready to add them to the correct position in your page. To show the BarChart icon in the page you’d simply reference it like this:

<BarChartLineFill />
 

That’s the simplest example of how to use a Bootstrap React icon. It’s likely though that you’ll want to change the icon colour, or size – read on to find out how to change the colour or size of the icons.

Change the React Bootstrap Icon size and colour

Simply changing the size and / or colour can be done like this, by passing a colour value into the color property, and an appropriate size unit into the size property.:

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

Change the hover colour of a React Bootstrap icon

In order to change the colour of the icon when you hover over it is done using css. In this example we’ll use the Wifi icon, so set the basic markup like this, referencing a css class named ‘wifi’ :

<Wifi size="100" className="wifi" />
  

You can set this class up in the App.css file, along with a class specifically for the hover state :

.wifi {
  color: lightblue;
}

.wifi:hover {
  color: darkblue;
}

You should now find the color changes when you hover over the React Bootstrap icon ! I’ve included some code that will give you the icons shown in this image, giving examples of different sizes and colours, and two different ways to use css to change hover color of the icon.

Change the react bootstrap icon colour on hover

And here is the code for all of those icons:

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Stack from "react-bootstrap/Stack";

import { BarChartLineFill } from "react-bootstrap-icons";
import { Activity } from "react-bootstrap-icons";
import { BookmarkStarFill } from "react-bootstrap-icons";
import { Wifi } from "react-bootstrap-icons";
import { UpcScan } from "react-bootstrap-icons";
import { BatteryFull } from "react-bootstrap-icons";

import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Learn to use <code>Bootstrap icons</code>.
        </p>
      </header>
      <Container>
        <Row className="justify-content-md-center">
          <Col sm={12}>
            <h2 style={{ padding: "60px 50px" }}>Icon Sizes</h2>
          </Col>
        </Row>
        <Row className="justify-content-md-center">
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div
                style={{
                  height: "150px",
                  paddingTop: "20px",
                  paddingBottom: "20px",
                }}
              >
                <h4>Size 10</h4>
                <BarChartLineFill size="10" />
              </div>
            </Stack>
          </Col>
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div
                style={{
                  height: "150px",
                  paddingTop: "20px",
                  paddingBottom: "20px",
                }}
              >
                <h4>Size 40</h4>
                <BarChartLineFill size="40" />
              </div>
            </Stack>
          </Col>
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div
                style={{
                  height: "150px",
                  paddingTop: "20px",
                  paddingBottom: "20px",
                }}
              >
                <h4>Size 100</h4>
                <BarChartLineFill size="100" />
              </div>
            </Stack>
          </Col>
        </Row>
        <Row className="justify-content-md-center">
          <Col sm={12}>
            <h2 style={{ padding: "60px 50px" }}>Icon Colours</h2>
          </Col>
        </Row>
        <Row className="justify-content-md-center">
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div
                style={{
                  height: "150px",
                  paddingTop: "20px",
                }}
              >
                <BarChartLineFill size="100" color="#ee66ff" />
              </div>
            </Stack>
          </Col>
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div
                style={{
                  height: "150px",
                  paddingTop: "20px",
                }}
              >
                <BookmarkStarFill size="100" color="blue" />
              </div>
            </Stack>
          </Col>
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div
                style={{
                  height: "150px",
                  paddingTop: "20px",
                }}
              >
                <Activity size="100" color="red" />
              </div>
            </Stack>
          </Col>
        </Row>
        <Row className="justify-content-md-center">
          <Col sm={12}>
            <h2 style={{ padding: "60px 50px" }}>Icon Hover Colour</h2>
          </Col>
        </Row>
        <Row className="justify-content-md-center">
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div className="menu-icon">
                <Wifi size="100" className="wifi" />
              </div>
            </Stack>
          </Col>
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div className="menu-icon">
                <UpcScan size="100" className="scan" />
              </div>
            </Stack>
          </Col>
          <Col xs lg="2">
            <Stack gap={0} className="bg-light mx-auto my-auto">
              <div className="menu-icon">
                <BatteryFull size="100" className="battery" />
              </div>
            </Stack>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;

And the App.css file is this:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.menu-icon {
  height: 150px;
  padding-top: 20px;
}

.menu-icon:hover {
  color: orangered;
}

.wifi {
  color: lightblue;
}

.wifi:hover {
  color: darkblue;
}