Bootstrap Icons

Icons are not part of Bootstrap itself. The project has a separate free set, Bootstrap Icons — more than two thousand icons in one style. They are loaded as a font: an icon is an empty tag with a class, and its color and size are set the same way as for text.

Adding the set

With a CDN add one more <link> line next to the Bootstrap styles:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 
<i class="bi bi-check-circle"></i> Done

A check mark in a circle appears before the word "Done". In a Vite project install the icons with npm install bootstrap-icons and load them in src/main.js with import 'bootstrap-icons/font/bootstrap-icons.css';.

Inserting an icon

Every icon needs two classes: the common bi and the icon name bi-{name}. Look the names up at icons.getbootstrap.com.

Many icons have a filled variant ending in -fill.

Size and color

An icon is a font character, so text utilities apply: fs-* for size and text-{color} for color.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 
<i class="bi bi-lightning-charge fs-1 text-primary" aria-hidden="true"></i>
<i class="bi bi-shield-check fs-1 text-success" aria-hidden="true"></i>
<i class="bi bi-star-fill fs-1 text-warning" aria-hidden="true"></i>

Three large icons in different colors — these go above the feature cards on the landing page.

Icons in buttons and menus

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
 
<button type="button" class="btn btn-primary">
  <i class="bi bi-plus-lg" aria-hidden="true"></i> New task
</button>
<button type="button" class="btn btn-outline-danger" aria-label="Delete">
  <i class="bi bi-trash" aria-hidden="true"></i>
</button>

The first button is an icon plus text, the second only a trash can icon. In the admin dashboard sidebar icons go before each item: bi-speedometer2 for the overview, bi-people for users, bi-gear for settings.

Common mistake

Leaving an icon-only button without text. A screen reader does not know what a trash can means and just says "button". Give the icon itself aria-hidden="true" and the button an aria-label with words: aria-label="Delete".