Friday, September 26, 2025
HomeLanguagesHow to Add Icon in NavBar using React-Bootstrap ?

How to Add Icon in NavBar using React-Bootstrap ?

This article will show you how to add an icon in the navigation bar using React-Bootstrap. We will use React-Bootstrap because it makes it easy to use reusable components without implementing them.

Prerequisites

Creating React App and Installing Module

Step 1: Create a React application using the following command

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Now install React-bootstrap and bootstrap

npm install react-bootstrap bootstrap

Step 4: Add Bootstrap CSS to index.js

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure

Screenshot-2023-10-12-093724

Project Structure

The updated dependencies in package.json will look like this:

{
"name": "iconinnavbar",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}

Example: Now write down the following code in App.js file. Here App is our default component where we have written our code.

Javascript




// App.js File
 
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import gfglogo from "./neveropen.svg";
import "bootstrap/dist/css/bootstrap.min.css";
 
function App() {
    return (
        <div>
            <Navbar collapseOnSelect expand="lg"
                className="bg-info">
                <Container>
                    <Navbar.Brand href="#home">
                        <img
                            src={gfglogo}
                            width="50"
                            height="50"
                            className="d-inline-block align-top"
                            alt="React Bootstrap logo"
                        />
                    </Navbar.Brand>
                    <Navbar.Toggle
                        aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="me-auto">
                            <Nav.Link href="#DataStructures">
                                Data Structures
                            </Nav.Link>
                            <Nav.Link
                                href="#CompetitiveProgramming">
                                Competitive Programming
                            </Nav.Link>
                        </Nav>
                        <Nav>
                            <Nav.Link href="#contactus">
                                Contact Us
                            </Nav.Link>
                            <Nav.Link eventKey={2}
                                href="#community">
                                Community
                            </Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </div>
    );
}
 
export default App;


Steps To Run Application

Step: Run the application using following command from root directory of Application

npm start

Output: Now open the browser and type the ‘http://localhost:3000/’

navbaricon

Navbar with Icon

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32320 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6683 POSTS0 COMMENTS
Nicole Veronica
11854 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11910 POSTS0 COMMENTS
Shaida Kate Naidoo
6795 POSTS0 COMMENTS
Ted Musemwa
7071 POSTS0 COMMENTS
Thapelo Manthata
6755 POSTS0 COMMENTS
Umr Jansen
6762 POSTS0 COMMENTS