What is the icons library in Bootstrap 5?

Overview

Bootstrap has created its icon library made for Bootstrap components and documentation. To see how Bootstrap components work, Bootstrap icons are used to change form control into navigation. Bootstrap icons are SVGs that are simple, agile, and designed with CSS. These icons can be easily placed in an HTML file to describe the given code.

Syntax

Bootstrap icons are added with the <i> tag and the bi-* icon class. It has the following syntax:

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

    // If we have to add icons through font CSS, then its syntax would be:

 <i class="fa fa-class name"></i>

Explanation

  • HTML
The bootstrap icons link is installed in the above code to show different icons in HTML code.
  • Line 15: We use a cart icon in the class bi bi-cart.
  • Line 16: We use a star icon in the class bi bi-star.
  • Line 17: We use an HD icon in the class bi bi-badge-hd.
  • Line 21: We use a question mark icon in the font class.
  • Line 23: We use the font class to show the google icon with a button under the div class.
Note: Bootstrap has its library icons that can be installed from nmp (Node package manager contains packages of the node) using the npm i bootstrap-icons command. However, there are many methods to add icons in code like CSS and SVGs, using the CDN (Content delivery network for the fast delivery of internet content) link of Bootstrap icons.
Free Resources
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)