Add bootstrap icons in React

Today, we will show you how to add bootstrap icons in React application. There are multiple icons libraries to render icons in React application like Font Awesome, Ant Design Icons, Flat Color Icons, etc.

Demo Application

Output - Add bootstrap icons in React - Clue Mediator
Output – Add bootstrap icons in React – Clue Mediator

Add bootstrap icons in React

  1. Project structure
  2. Package dependencies
  3. Add bootstrap icons in component
  4. Output

1. Project structure

Refer to the following project structure for demo application.

  • react-bootstrap-icons
    • node_modules
    • public
      • index.html
    • src
      • App.js
      • index.css
      • index.js
    • package-lock.json
    • package.json
    • README.md

2. Package dependencies

In this example, we have to install the bootstrap-icons npm package. Run the following command to install the bootstrap-icons.

You will find the version of following packages in React application.

react
^18.2.0
bootstrap-icons
^1.10.3

3. Add bootstrap icons in component

First, we have to add the following CSS in React component.

Now, simply add the following HTML tag to load the icon.

4. Output

Let’s combine all code together and see how it looks.

App.js

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *