📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials Bootstrap 5 Bootstrap Icons

Bootstrap Icons

4 min read
Use Bootstrap Icons SVG font: install via npm or CDN and apply with class bi bi-icon-name.

Bootstrap Icons

<!-- Install -->
npm install bootstrap-icons

<!-- Or CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!-- Usage -->
<i class="bi bi-house"></i>
<i class="bi bi-person-fill"></i>
<i class="bi bi-envelope"></i>
<i class="bi bi-github"></i>
<i class="bi bi-star-fill text-warning"></i>

<!-- Sized icons -->
<i class="bi bi-heart" style="font-size: 2rem;"></i>
<i class="bi bi-heart fs-1"></i>

<!-- Icon in button -->
<button class="btn btn-primary">
    <i class="bi bi-plus-circle me-1"></i> Add Item
</button>

<!-- SVG usage (no font needed) -->
<svg class="bi" width="32" height="32" fill="currentColor">
    <use href="bootstrap-icons.svg#heart"/>
</svg>