How to add Bootstrap Icons in Next.js

Dhanasekaran R
3 min readJul 22, 2021

--

How to add Bootstrap Icons in Next.js
How to add Bootstrap Icons in Next.js

Create next-js app:

First, we need to create a Next.js application using npx or yarn according to your choice.

if you already create a Next.js app, then skip this part

Type this command in your terminal or cmd:

npx create-next-app project-name(or)yarn create-next-app project-name

In my case, I create the next app using npx like this

npx create-next-app bootstrap-icon-with-nextjs

Finally, we create out Next.js App

next js app creation
Next.js — The React Framework

We add bootstrap-icons in Next.js in two methods :

bootstrap-icon-added-with-nextjs-app
©bootstrap-icons
  1. Install Bootstrap Icons - including SVGs and icon fonts with npm.
  2. Adding icon fonts stylesheet CDN link in Next.js inside <Head> Tag

Now, We start with a first method
Installing Bootstrap-Icons using npm command. (This is a highly recommended method)

Install Bootstrap Icons:

npm i bootstrap-icons

After installation, we need to import a CSS file in the Next.js custom page pages/_app.js file.

Adding bootstrap-icons CSS in _app.js file
Adding bootstrap icons in _app.js

Important:
The _app.js file render all pages in the websites load the bootstrap-icons CSS

RESULT CODE

Now, We move on to the second method🚶‍♂️

Adding icon fonts stylesheet CDN link in Next.js inside <Head> Tag :

## Bootstrap-Icon CDN Link ##
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
## Import the module in the file ##
import Head from "next/head"
Bootstrap-icon CDN link added in Next.js inside <Head> Tag
Bootstrap-icon CDN link added in Next.js inside <Head> Tag

The Result for both methods:

Screenshot:

Result for My code

Finally, we install Bootstrap-Icons both methods.

I push all the code in the GitHub repository
Repository Link[with two branches for both methods]
for more details read the README.md file in my repo

💡Protip:
Run your Next.js App with diffrent port using this command
npx next -p 4_DIGIT_NUMBER
E.X : npx next -p 1998

If this story really save your time give a clap 👏🏻 for me

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Dhanasekaran R
Dhanasekaran R

Written by Dhanasekaran R

“It’s important to learn and not make the same mistakes, what’s done is done.”

Responses (1)

What are your thoughts?