Bootstrap Icons is an open-source icon library designed for Bootstrap but can be used in any project, regardless of the framework.
It provides 1,800+ high-quality, scalable icons available in both **SVG** and **font-based** formats.
These icons can be customized using **CSS classes**, making them highly flexible for various design needs.
The library includes icons for common UI elements like **navigation, alerts, social media, business, and more**, ensuring seamless integration into modern web applications.
You can use Bootstrap Icons via **CDN, npm, or manually downloading SVG files**.
Install Bootstrap Icons via npm in your project root directory.
npm install bootstrap-icons
import CSS to your icons.scss
@import 'bootstrap-icons/font/bootstrap-icons.css';
Include Bootstrap Icons from the official CDN:
<!-- CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
Use Bootstrap Icons like this:
<body> <i class="bi bi-volume-up"></i> <i class="bi bi-x"></i> <i class="bi bi-list"></i> <i class="bi bi-arrow-clockwise"></i> <i class="bi bi-arrows-move"></i> </body>
For more icons, see the official documentation.
