How to add Bootstrap icons in HTML and CSS

Bootstrap is an open-source framework that enhances on the responsiveness of web pages. Bootstrap icons can be used in an HTML document and CSS can be applied to add various properties to those icons. Bootstrap supports a long list of icons in multiple formats such as SVG’s, web-font, SVG sprite. This article guides you to add bootstrap icons in HTML and CSS.

How to add Bootstrap icons in HTML and CSS

The bootstrap icons can be added in HTML and CSS by using the CDN link of bootstrap-icons. This section will describe both methods to add bootstrap icons in HTML and CSS.

How to add Bootstrap icons using CDN link

The CDN(Content Delivery/Distribution Network) link allows adding the CSS, JS, and jQuery libraries very easily. By dadding the CDN link of bootstrap-icons, you do not need to download and integrate the bootstrap icons with HTML. The upcoming steps will lead you to add CDN links followed by adding Bootstrap icons.

Step 1: Add the CDN link of Bootstrap icons

Bootstrap5 is the latest version of the bootstrap, so to add the CDN link of Bootstrap-icons, copy/paste the following link in the <head> tag.

<link rel="stylesheet" href="">

Step 2: Adding bootstrap icons

To add bootstrap icons, you have to use the following syntax.

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

In the above syntax, the bi-ClassName represents class name of the icons such as bi-search, bi-calendar, bi-facebook, etc.,


This example uses the bootstrap icons class to print the icon of LinkedIn and Thumbs-up.

<p> LinkedIn-Icon: <i class="bi-linkedin"></i> </p>

<p> ThumbsUp-Icon: <i class="bi-hand-thumbs-up-fill"></i> </p>

Two paragraphs are created that prints the LinkedIn icon and thumbs up icon using bi-linkedin and bi-hands-thumbs-up-fill classes of bootstrap-icons.


A picture containing diagram Description automatically generated

The output shows that the LinkedIn icon and thumbs-up icon has been sucessfully integrated into HTML document.


The Bootstrap icons can be added to HTML and CSS by using CDN link of default icons. The default icons support is provided by Bootstrap itself and you have to add the CDN link of bootstrap icons in your HTML document. This descriptive post that will enable you to add bootstrap icons in HTML and CSS. Moreover, you would also learn to set up an environment of bootstrap-icons with HTML and CSS.

About the author

Adnan Shabbir