Overview

Bootstrap Icons is a free, high quality, open source icon library with nearly 1,200 icons. Include them anyway you like SVGs, SVG sprite, or web fonts.

Ugage

Use Bootstrap Icons with a spesific class as explained in the Icons Preview Page:

<i class="bi bi-bookmarks-fill fs-2x"></i>
<i class="bi bi-calendar-check fs-2x"></i>
<i class="bi bi-check2-square fs-2x"></i>
<i class="bi bi-diagram-3 fs-2x"></i>
<i class="bi bi-gear fs-2x "></i>
<i class="bi bi-circle-square fs-2x"></i>
<i class="bi bi-graph-down fs-2x"></i>
<i class="bi bi-vector-pen fs-2x"></i>

Icon Colors

The inline icons can be colored using .text-{color}class that defined with $theme-text-colorsvariable in sass/_variables.scss:

white

primary

secondary

light

success

info

warning

danger

dark

muted

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

<i class="bi bi-droplet-half text-white"></i>
<i class="bi bi-droplet-half text-primary"></i>
<i class="bi bi-droplet-half text-secondary"></i>
<i class="bi bi-droplet-half text-light"></i>
<i class="bi bi-droplet-half text-success"></i>
<i class="bi bi-droplet-half text-info"></i>
<i class="bi bi-droplet-half text-warning"></i>
<i class="bi bi-droplet-half text-danger"></i>
<i class="bi bi-droplet-half text-dark"></i>
<i class="bi bi-droplet-half text-muted"></i>
<i class="bi bi-droplet-half text-gray-100"></i>
<i class="bi bi-droplet-half text-gray-200"></i>
<i class="bi bi-droplet-half text-gray-300"></i>
<i class="bi bi-droplet-half text-gray-400"></i>
<i class="bi bi-droplet-half text-gray-500"></i>
<i class="bi bi-droplet-half text-gray-600"></i>
<i class="bi bi-droplet-half text-gray-700"></i>
<i class="bi bi-droplet-half text-gray-800"></i>
<i class="bi bi-droplet-half text-gray-900"></i>

Icon Sizes

The font icons can be sized using .fs-{size}class that defined with $font-sizesvariable in sass/_variables.scss

Where sizeis one of:

1- sets icon size that equals to <h1>font size
2- sets icon size that equals to <h2>font size
3- sets icon size that equals to <h3>font size
4- sets icon size that equals to <h4>font size
5- sets icon size that equals to <h5>font size
6- sets icon size that equals to <h6>font size
7- sets icon size that equals to <h7>font size
7- sets icon size that equals to 0.95 of $font-size-basewhere $font-size-base: 1rem
8- sets icon size that equals to 0.85 of $font-size-basewhere $font-size-base: 1rem
9- sets icon size that equals to 0.75 of $font-size-basewhere $font-size-base: 1rem
10- sets icon size that equals to 0.5 of $font-size-basewhere $font-size-base: 1rem
base- sets icon size that equals to $font-size-basewhere $font-size-base: 1rem
fluid- sets icon size that equals to 100%
2x- sets icon size that equals to 2 of $font-size-basewhere $font-size-base: 1rem
2qx- sets icon size that equals to 2.25 of $font-size-basewhere $font-size-base: 1rem
2hx- sets icon size that equals to 2.5 of $font-size-basewhere $font-size-base: 1rem
2tx- sets icon size that equals to 2.75 of $font-size-basewhere $font-size-base: 1rem
3x- sets icon size that equals to 3 of $font-size-basewhere $font-size-base: 1rem
3qx- sets icon size that equals to 3.25 of $font-size-basewhere $font-size-base: 1rem
3hx- sets icon size that equals to 3.5 of $font-size-basewhere $font-size-base: 1rem
3tx- sets icon size that equals to 3.75 of $font-size-basewhere $font-size-base: 1rem
4x- sets icon size that equals to 4 of $font-size-basewhere $font-size-base: 1rem
4qx- sets icon size that equals to 4.25 of $font-size-basewhere $font-size-base: 1rem
4hx- sets icon size that equals to 4.5 of $font-size-basewhere $font-size-base: 1rem
4tx- sets icon size that equals to 4.75 of $font-size-basewhere $font-size-base: 1rem
5x- sets icon size that equals to 5 of $font-size-basewhere $font-size-base: 1rem
5qx- sets icon size that equals to 5.25 of $font-size-basewhere $font-size-base: 1rem
5hx- sets icon size that equals to 5.5 of $font-size-basewhere $font-size-base: 1rem
5tx- sets icon size that equals to 5.75 of $font-size-basewhere $font-size-base: 1rem

.fs-5x

.fs-4x

.fs-3x

.fs-2tx

.fs-2hx

.fs-2qx

.fs-2x

.fs-1

.fs-2

.fs-3

.fs-5

.fs-6

<i class="bi bi-droplet-half fs-5x"></i>
<i class="bi bi-droplet-half fs-4x"></i>
<i class="bi bi-droplet-half fs-3x"></i>
<i class="bi bi-droplet-half fs-2tx"></i>
<i class="bi bi-droplet-half fs-2hx"></i>
<i class="bi bi-droplet-half fs-2qx"></i>
<i class="bi bi-droplet-half fs-2x"></i>
<i class="bi bi-droplet-half fs-1"></i>
<i class="bi bi-droplet-half fs-2"></i>
<i class="bi bi-droplet-half fs-3"></i>
<i class="bi bi-droplet-half fs-5"></i>
<i class="bi bi-droplet-half fs-6"></i>