Bootstrap 4 2,007 dropped the Glyphicons font, and in August 2020 the team released its own set, Bootstrap Icons 2,007 . Version 1.13.1 has over 2,000 MIT-licensed SVG icons that also work without Bootstrap. Search them at icons.getbootstrap.com (https://icons.getbootstrap.com/ 2,007 ) and install with npm 2,036 install bootstrap-icons.
There are four ways to use an icon: the icon font (one stylesheet, then <i class="bi bi-heart-fill"></i>), inline SVG copied from the site, an SVG sprite (<use href="bootstrap-icons.svg#heart-fill"/>), or an <img> pointing at one SVG file. Font and inline icons inherit color and font-size, so text utilities style them.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<div class="p-3 d-flex align-items-center gap-2 fs-3">
<button class="btn btn-primary"><i class="bi bi-download" aria-hidden="true"></i> Get</button>
<button class="btn btn-outline-danger" aria-label="Delete"><i class="bi bi-trash3"></i></button>
<i class="bi bi-star-fill text-warning"></i> <i class="bi bi-heart-fill text-danger"></i>
<i class="bi bi-github"></i> <i class="bi bi-bootstrap-fill text-primary"></i>
</div>
Hide decorative icons beside visible text with aria-hidden="true", and give an icon-only button an aria-label. The font downloads every glyph even if you show three; on performance-sensitive pages, inline the few SVGs you need.