Bootstrap Icons

Bootstrap Icons is a free library of over 2000 SVG icons, made by the Bootstrap team. It is not part of the main Bootstrap file, so you must add it separately. The icons are sharp at any size and have the color of the text.

Add Bootstrap Icons

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

You can also install it with npm install bootstrap-icons, or download the files, or copy single SVG files from icons.getbootstrap.com.

Use an icon font

<i class="bi bi-heart-fill text-danger"></i>
<i class="bi bi-house"></i>
<i class="bi bi-search"></i>
<i class="bi bi-gear-fill"></i>
<i class="bi bi-envelope"></i>
<i class="bi bi-cloud-download"></i>

The syntax is <i class="bi bi-NAME"></i>. Find the names on the website of Bootstrap Icons.

Size and color

The icon is a font, so it follows the font size and the color of the text. Use font size and color classes.

<i class="bi bi-star-fill text-warning" style="font-size: 1rem"></i>
<i class="bi bi-star-fill text-warning fs-3"></i>
<i class="bi bi-star-fill text-warning" style="font-size: 3rem"></i>

Icons in buttons, alerts and lists

<button class="btn btn-primary mb-2"><i class="bi bi-download me-1"></i> Download</button>
<button class="btn btn-outline-danger mb-2"><i class="bi bi-trash"></i> Delete</button>
<ul class="list-group">
  <li class="list-group-item"><i class="bi bi-check-circle-fill text-success me-2"></i>Task done</li>
  <li class="list-group-item"><i class="bi bi-x-circle-fill text-danger me-2"></i>Task failed</li>
</ul>

Accessibility

• If the icon is only decoration (the button has a text), add aria-hidden="true".
• If the icon alone is the button, add a text for screen readers: aria-label="Delete" or a .visually-hidden text.

<button class="btn btn-outline-danger" aria-label="Delete">
  <i class="bi bi-trash" aria-hidden="true"></i>
</button>

Check that the icon font is loaded

<i class="bi bi-alarm" id="ic"></i>

await document.fonts.ready;
const style = getComputedStyle(document.getElementById('ic'), '::before');
console.log('font family of the icon: ' + style.fontFamily);
console.log('the icon has a glyph: ' + (style.content !== 'none' && style.content !== 'normal'));

Inline SVG

You can also use the SVG files. It is the best for performance when you need only a few icons, because there is no font file to download.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16" aria-hidden="true">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15"/>
</svg>

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.