Home » React JS » Using React Bootstrap icons

Using React Bootstrap icons

By Emily

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 a React Bootstrap icon in your React app you’ll need to install bootstrap and install react-bootstrap-icons. Read on for details of each of these steps, and examples of how to change the react-bootstrap-icon color and size.

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 the react-bootstrap-icons 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 a React Bootstrap icon

The whole library of Bootstrap 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:

Search the react bootstrap icons library

You need to import each icon from the installed react-bootstrap-icons package individually by using it’s name. 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 react-bootstrap-icons 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 color, or size – read on to find out how to change the color or size of the icons.

Change the React Bootstrap Icon size and color

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

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

Change the hover color of a React Bootstrap icon

In order to change the color 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 color on hover

Download the full source code

The code for using all these icons using the react-bootstrap-icons package is in my git repo.