How to use Bootstrap Icons in React ?

Last Updated : 27 Mar, 2024

React is a free library for making websites look and feel cool. With React, your websites can be super interactive and lively. It’s great for making modern websites where everything happens on one page. The best part is that you can build and reuse different parts of your webpage, making it easy to update and organize stuff without the whole page refreshing. It’s like having building blocks for your website that you can rearrange anytime.

What is bootstrap?

Developed using HTML, CSS, and JavaScript, Bootstrap is the most widely used framework for creating mobile-friendly and responsive websites.
You may download and use it for free.
This front-end framework facilitates quicker and simpler web development.
Typography, forms, buttons, tables, navigation, modals, picture carousels, and many other design templates are included. These are based on HTML and CSS.
JavaScript plugins are also supported by it.
It makes it easier for you to produce responsive designs.

What is a bootstrap icon?

Typically used in online and mobile applications, bootstrap icons are vector-based graphics.
A mix of HTML, CSS, and JavaScript is used to produce the icons.
This saves developers the time and effort of having to start from scratch when adding graphics to their applications.

Steps to Create the React App and Installing Module:

Step 1: Create a new React.js project and install the required dependencies:-

npx create-react-app my-react-app

Step 2: Navigate to the root directory of your project using the following command.

cd my-react-app

Step 3: Install the required packages in your project using the following command.

npm install bootstrap bootstrap-icons

The updated dependencies in package.json file of frontend will look like:

"dependencies": {
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 4: Import bootstrap icon in app.js file

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

Example: Below is an example of adding bootstrap icons in react.

JavaScript

import logo from "./logo.svg";
import "./App.css";
import "bootstrap-icons/font/bootstrap-icons.css";

function App() {
  return (
    <div className="App">
      <i class="bi bi-airplane-engines-fill"></i>
    </div>
  );
}

export default App;