Bootstrap are icons are free and opensource library with more than 1000 icons. It provides SVG and web fonts to add into applications.

These can be used with or without bootstrap css.

This course covers complete bootstrap icons with css class. It also includes how to include bootstrap icons in html and javascript applications.

Latest version is 1.72 with more than 1500 free icons.

It provides icon asset kit to use in web and desktops applications.

We can cover the following things

  • What is bootstrap icons?

What is bootstrap Icons?

Bootstrap icons are open source free high quality icon library

It is one of popular icon library with star ratings in Github Bootstrap icons are used with or without bootstrap css. We can add svg, SVG spring and web fonts to any html pag

Bootstrap icon advantages

Bootstrap icons are high quality icons which provides multiple ways to integrate into application using web fonts, svg, svg sprite and image .

  • Open source high quality icons
  • Easy and simple to use
  • Loading time is very good as including single one CSS file in application
  • Icons can be customized using CSS styles

How to use bootstrap icons?

bootstrap icons with inline elements or css styles

Where can find bootstrap icons?

Bootstrap has different versions

Bootstrap v3 has glyphicons icons

How to use bootstrap icons in an Application

using webfonts


svg sprite


Is it possible to @import bootstrap icons in the scss file?

Bootstrap icons shipped with npm and cdn as css link.

Here is bootstrap css path in bootstrap icons node_modules


It is possible to import css path into SASS or SCS files using css @import

@import "~bootstrap-icons/font/bootstrap-icons.css";

~ represents an folder node_modules in application Application can be Angular , React and Vuejs

The same can be write as follows

@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";