Bootstrap Icons CDN Latest Version (1.11.3)

<!DOCTYPE html>
<html>
 <head>
 <link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
 />
 </head>
 <body>
 <h1>Bootstrap Icons with Different Colors</h1>
 <div class="container">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 </div>
 <style>
 h1 {
 margin-bottom: 30px;
 font-family: "Arial", sans-serif;
 color: #333;
 }

i {
        font-size: 36px;
        margin: 20px;
      }

.text-primary {
        color: #007bff;
      }

.text-secondary {
        color: #6c757d;
      }

.text-success {
        color: #28a745;
      }

.text-info {
        color: #17a2b8;
      }

.text-warning {
        color: #ffc107;
      }

.text-danger {
        color: #dc3545;
      }

.text-primary:hover,
      .text-secondary:hover,
      .text-success:hover,
      .text-info:hover,
      .text-warning:hover,
      .text-danger:hover {
        transform: scale(1.2);
        transition: transform 0.2s ease-in-out;
      }

.container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }

.container i {
        transition: color 0.3s ease-in-out;
      }

.container i:hover {
 color: #ff6699;
 }
 </style>
 </body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <h1>Bootstrap Icons with Different Colors</h1>
    <div class="container">
      <i class="bi bi-heart text-primary"></i>
      <i class="bi bi-star text-secondary"></i>
      <i class="bi bi-check text-success"></i>
      <i class="bi bi-arrow-up-right text-info"></i>
      <i class="bi bi-file-earmark text-warning"></i>
      <i class="bi bi-search text-danger"></i>
      <i class="bi bi-envelope text-primary"></i>
      <i class="bi bi-person text-secondary"></i>
      <i class="bi bi-calendar text-success"></i>
      <i class="bi bi-gear text-info"></i>
      <i class="bi bi-camera text-warning"></i>
      <i class="bi bi-music-player text-danger"></i>
      <i class="bi bi-basket text-primary"></i>
      <i class="bi bi-book text-secondary"></i>
      <i class="bi bi-credit-card text-success"></i>
      <i class="bi bi-headset text-info"></i>
      <i class="bi bi-people text-warning"></i>
      <i class="bi bi-lightning text-danger"></i>
      <i class="bi bi-cloud text-primary"></i>
      <i class="bi bi-flag text-secondary"></i>
    </div>
    <style>
      h1 {
        margin-bottom: 30px;
        font-family: "Arial", sans-serif;
        color: #333;
      }
​
      i {
        font-size: 36px;
        margin: 20px;
      }
​
      .text-primary {
        color: #007bff;
      }
​
      .text-secondary {
        color: #6c757d;
      }
​
      .text-success {
        color: #28a745;
      }
​
      .text-info {
        color: #17a2b8;
      }
​
      .text-warning {
        color: #ffc107;
      }
​
      .text-danger {
        color: #dc3545;
      }
​
      .text-primary:hover,
      .text-secondary:hover,
      .text-success:hover,
      .text-info:hover,
      .text-warning:hover,
      .text-danger:hover {
        transform: scale(1.2);
        transition: transform 0.2s ease-in-out;
      }
​
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
​
      .container i {
        transition: color 0.3s ease-in-out;
      }
​
      .container i:hover {
        color: #ff6699;
      }
    </style>
  </body>
</html>
​