Bootstrap Icons are a powerful and versatile set of SVG-based icons, built to work seamlessly with the Bootstrap framework. They are lightweight, customizable, and perfect for modern web development projects.
In this guide, you’ll learn how to use Bootstrap Icons efficiently with setup instructions, usage tips, and a cheat sheet to supercharge your design projects.
Step 1: Adding Bootstrap Icons to Your Project
Bootstrap Icons can be added via a CDN or by downloading them.
Using CDN
Add the following <link> tag to the <head> of your HTML file:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">Download Locally
Visit the official Bootstrap Icons page to download the complete library, and include the files in your project.
Using NPM
npm i bootstrap-iconsStep 2: Bootstrap Icons Usage
To use an icon, add the appropriate class to an <i> or <span> tag. For example:
<i class="bi bi-alarm"></i>Here’s a table of commonly used icons:
| Icon Name | Code | Preview |
|---|---|---|
| Alarm | <i class="bi bi-alarm"></i> |  |
| Heart | <i class="bi bi-heart"></i> |  |
| Search | <i class="bi bi-search"></i> |  |
| Cart (Filled) | <i class="bi bi-cart-fill"></i> |  |
| Trash (Delete) | <i class="bi bi-trash"></i> |  |
| Person (User) | <i class="bi bi-person"></i> |  |
| Bell (Notification) | <i class="bi bi-bell"></i> |  |
| Star | <i class="bi bi-star"></i> |  |
Step 3: Customizing Bootstrap Icons
Icons can be styled with CSS for color, size, and hover effects.
Change Size
<i class="bi bi-heart" style="font-size: 2rem;"></i>Change Color
<i class="bi bi-star" style="color: gold;"></i>Hover Effect
<i class="bi bi-bell" style="transition: 0.3s;" onmouseover="this.style.color='blue'"></i>Align Icons with Text
<i class="bi bi-check-circle me-2"></i> SuccessStep 4: Advanced Use Cases
Bootstrap Icons can be used in various contexts, such as buttons, navigation, or notifications.
Button with Icon
<button class="btn btn-primary">
<i class="bi bi-cart-fill me-2"></i> Add to Cart
</button>Social Media Links
<a href="#" class="text-primary"><i class="bi bi-facebook"></i></a><br><a href="#" class="text-info"><i class="bi bi-twitter"></i></a><br><a href="#" class="text-danger"><i class="bi bi-instagram"></i></a>Notification Badge
<span class="position-relative">
<i class="bi bi-bell"></i>
<span class="position-absolute top-0 start-100 translate-middle badge bg-danger">3</span>
</span>Step 5: Bootstrap Icons for Responsive Design
Bootstrap Icons scale beautifully on any device. Use the following size classes for quick adjustments:
| Class | Size | Example Code |
|---|---|---|
.bi | 1rem | <i class="bi bi-alarm"></i> |
.bi-lg | 1.5rem | <i class="bi bi-alarm bi-lg"></i> |
.bi-2x | 2rem | <i class="bi bi-alarm bi-2x"></i> |
Explore the Full Library
The Bootstrap Icons Library contains over 2,000 free icons, organized into business, communication, media, and more categories. These icons are constantly updated, making them a future-proof choice for any project.
Final Thoughts
Bootstrap Icons simplify adding scalable, professional-looking icons to your web projects. Whether you’re building a blog, an e-commerce site, or a dashboard, these icons will elevate your design. Bookmark this cheat sheet and start using Bootstrap Icons today!
For more tips, explore our article library on makemychance.com!
