Bootstrap Icons – CSS Variables

A 100% pure CSS icon implementation of Bootstrap Icons using CSS custom properties and SVG masks.

No JavaScript, dependencies, SVGs or webfonts needed!
Accessible, fast and easy-to-use
Includes all 2078 icons
Icons can be colored any color by setting a color:
Icon can be sized any size by setting height and width of the div (the icon scales to fit using mask-size: contain;)

How to use

Include the stylesheet:

<link rel="stylesheet" href="bootstrap-icons.min.css">

Each icon is exposed as a CSS variable --bi-<name> whose value is a url("data:image/svg+xml;utf8,...") data URI.

CSS classes

<i class="bi bi-0-circle"></i>
 <i class="bi bi-heart"></i>
 <i class="bi bi-star-fill" style="color: #ffd700"></i>
 <i class="bi bi-cpu" style="height: 2rem; width: 2rem"></i>

Icons inherit color and default to 1rem. Resize with width and height.

As CSS variables anyway you like

.my-banner {
  background-color: hotpink;
  display: inline-block;
  height: 3rem;
  mask-image: var(--bi-heart);
  mask-repeat: repeat;
  mask-size: 32px 32px;
  width: 640px;
}

Browser compatibility: mask-image is supported unprefixed in all modern browsers (Chrome 120, Safari 15.4, Firefox 53 — caniuse). To widen support further (Safari 4.0+, Opera), you could use Autoprefixer to automatically add -webkit-mask-image alongside mask-image. Because this uses CSS variables, the same variables are referenced from :root without increasing filesize much. Neat!

Icon gallery

Loading…

Filter by name: