Use Bootstrap icons with NPM

Question

Additional 28 June 2021

after import using NPM you can import CSS file to react with :

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

and use like this :

<i className="icon bi-envelope"></i>

if you only want to use the bootstrap-icons.svg from node_modules, you can copy it manually or with webpack. If you copy in root folder, you can use like this :

<svg class="bi" width="32" height="32" fill="currentColor">
     <use xlink:href="bootstrap-icons.svg#bootstrap"/>
</svg>

If you copy in icons folder :

<svg class="bi" width="32" height="32" fill="currentColor">
     <use xlink:href="icons/bootstrap-icons.svg#bootstrap"/>
</svg>

or copy the icons/*.svg for use only icon what you need, and you can use it like this :

<img src="bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

Are bootstrap icons really free?

yes, bootstrap icons is free https://github.com/twbs/icons/blob/main/LICENSE.md

Should you mention them in the project?

you need to including copyright notice in your project. its enough, but if you want to mention it, create about page and included all software you use there that would be super nice.

note : Oct 2020

Leave a Comment Cancel reply