Bootstrap Icons

Installation Methods

1. CDN

The quickest way to get started is to include the Bootstrap Icons CSS via CDN:

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

2. Package Manager

# npm
npm i bootstrap-icons

# yarn
yarn add bootstrap-icons
                        

3. Download

You can download the entire icon library from the Bootstrap Icons website.

Usage Methods

1. Font Method

After including the CSS, you can use icons with the bi class prefix:

<i class="bi bi-alarm"></i>
<i class="bi bi-archive"></i>
<i class="bi bi-arrow-right-circle"></i>
                        

2. SVG Method

You can use the SVG files directly:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
  <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
  <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>
                        

3. Sprite Method

For better performance, you can use the SVG sprite:

<!-- Reference the sprite file -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="alarm" viewBox="0 0 16 16">
    <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
    <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
  </symbol>
</svg>

<!-- Use the icon -->
<svg class="bi" width="24" height="24">
  <use xlink:href="#alarm"/>
</svg>
                        

Styling Bootstrap Icons

1. Sizing

You can size Bootstrap Icons using font-size or width/height attributes:

<!-- Using font-size with the font method -->
<i class="bi bi-alarm fs-1"></i> <!-- Extra large -->
<i class="bi bi-alarm fs-3"></i> <!-- Large -->
<i class="bi bi-alarm fs-5"></i> <!-- Small -->

<!-- Using width/height with SVG method -->
<svg class="bi bi-alarm" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">...</svg>
<svg class="bi bi-alarm" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">...</svg>
<svg class="bi bi-alarm" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">...</svg>
                        

2. Colors

Bootstrap Icons inherit the text color by default, but you can change it using text color utilities:

<i class="bi bi-alarm text-primary"></i>
<i class="bi bi-alarm text-success"></i>
<i class="bi bi-alarm text-danger"></i>
<i class="bi bi-alarm text-warning"></i>
<i class="bi bi-alarm text-info"></i>

<!-- For SVGs, use the fill attribute or CSS -->
<svg class="bi bi-alarm" fill="#0d6efd" width="32" height="32" viewBox="0 0 16 16">...</svg>
                        

Common Use Cases

1. Icons in Buttons

<button class="btn btn-primary">
  <i class="bi bi-cloud-download me-2"></i> Download
</button>

<button class="btn btn-success">
  <i class="bi bi-check-circle me-2"></i> Confirm
</button>
                        

2. Icons in Form Controls

<div class="input-group mb-3">
  <span class="input-group-text">
    <i class="bi bi-search"></i>
  </span>
  <input type="text" class="form-control" placeholder="Search...">
</div>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput"><i class="bi bi-envelope me-2"></i>Email address</label>
</div>
                        

3. Icons in Navigation

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#"><i class="bi bi-house me-2"></i>Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-person me-2"></i>Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-gear me-2"></i>Settings</a>
  </li>
</ul>
                        

Advanced Techniques

1. Animated Icons

You can animate Bootstrap Icons using CSS:

<style>
  .icon-spin {
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .icon-pulse {
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
</style>

<i class="bi bi-arrow-repeat icon-spin fs-3"></i>
<i class="bi bi-heart-fill text-danger icon-pulse fs-3"></i>
                        

2. Custom Icon Stacks

Create custom icon combinations by stacking icons:

<span class="position-relative d-inline-block" style="width: 3rem; height: 3rem;">
  <i class="bi bi-circle-fill text-primary fs-1 position-absolute top-0 start-0"></i>
  <i class="bi bi-envelope-fill text-white fs-3 position-absolute top-50 start-50 translate-middle"></i>
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    8+
    <span class="visually-hidden">unread messages</span>
  </span>
</span>
                        

3. Dynamic Icons with JavaScript

Change icons dynamically based on state:

<button class="btn btn-primary" id="toggleButton">
  <i class="bi bi-play-fill" id="toggleIcon"></i>
  <span id="toggleText">Play</span>
</button>

<script>
  document.getElementById('toggleButton').addEventListener('click', function() {
    const icon = document.getElementById('toggleIcon');
    const text = document.getElementById('toggleText');
    
    if (icon.classList.contains('bi-play-fill')) {
      icon.classList.replace('bi-play-fill', 'bi-pause-fill');
      text.textContent = 'Pause';
    } else {
      icon.classList.replace('bi-pause-fill', 'bi-play-fill');
      text.textContent = 'Play';
    }
  });
</script>