Bootstrap 5 Icons Cheat Sheet & Reference Table 2024

Bootstrap 5 & 4 Icons List Reference Table

Other cheat sheets available: Bootstrap 5 Cheat Sheet | Bootstrap 4 Cheat Sheet | Flexbox Cheat Sheet | CSS Cheat Sheet | More Resources

Click each column header to sort alphabetically.

Icon Preview	Icon Name	Embed Code	Docs

Sources: Bootstrap Icons GitHub

How to Use SVG in Your CSS

<span class="bi bootstrap-fill"></span>

<style>
.bi {
  display: inline-block;
  position: relative;
  width: 10rem;
  height: 10rem;
}

.bootstrap-fill::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('data:image/svg+xml,<svg class="bi bi-bootstrap-fill" viewBox="0 0 20 20" fill="%237952b3" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.002 2a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V6a4 4 0 00-4-4h-8zm1.06 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.543-2.11H7.063V14zm1.313-4.875V6.658h1.78c.974 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H8.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H8.375v2.725z" clip-rule="evenodd"/></svg>');
}
</style>

Bootstrap 5 Icons List Cheat Sheet Reference Table

Bootstrap 5 & 4 Icons List Reference Table

How to Use SVG in Your CSS

What is Bootstrap?