How to use bootstrap icons in React project

There are a few ways to go about it but I found this way to be the easiest and simple. First of all, download the package and add it to your dependencies.

npm i bootstrap-icons --save

Then add this line to your styles.css file at the top of your index.js file

import 'bootstrap-icons/font/bootstrap-icons.css';

Now, whenever you write an HTML with i tag with the bi code like below, you’ll see the icon appear!

<i class="bi bi-house"></i>

For example, go to https://icons.getbootstrap.com/icons/house/ we can see the code to the right that the code snippet is indeed “bi bi-house” for the house icon.