Bootstrap Icons Font

An icon font library including 1000+ icons, based on Bootstrap Icons, generated by IcoMoon.

Install

Bootstrap Icons Font is published to npm. You can install it via command line.

Install with npm:

npm install bootstrap-icons-font

Install with yarn:

yarn add bootstrap-icons-font

Usage

Basic Icons

The Bootstrap Icons Font is designed to be used with inline elements, i and span are recommended.

<i class="bi-gear"></i>
<span class="bi-gear-fill"></span>

Icon Sizes

We provide some useful utilities to set font sizes:

• .bi--xs : font size is 0.5em
• .bi--sm : font size is 0.75em
• .bi--md : font size is 1em
• .bi--lg : font size is 1.25em
• .bi--xl : font size is 1.5em
• .bi--2xl : font size is 2em
• .bi--3xl : font size is 2.5em
• .bi--4xl : font size is 3em
• .bi--5xl : font size is 3.5em
• .bi--6xl : font size is 4em
• .bi--7xl : font size is 4.5em
• .bi--8xl : font size is 5em

Examples:

<i class="bi-gear-fill bi--lg"></i>
<i class="bi-gear-fill bi--2xl"></i>

Animated Icons

You can use the bi--spin class to get any icon to rotate.

<i class="bi-gear bi--spin"></i>

Rotated Icons

You can use the bi--rotate-* class to rotate icons.

<i class="bi-bootstrap bi--rotate-45"></i>
<i class="bi-bootstrap bi--rotate-90"></i>
<i class="bi-bootstrap bi--rotate-135"></i>
<i class="bi-bootstrap bi--rotate-180"></i>
<i class="bi-bootstrap bi--rotate-225"></i>
<i class="bi-bootstrap bi--rotate-270"></i>
<i class="bi-bootstrap bi--rotate-315"></i>

Flipped Icons

You can use the bi--flip-* class to flip icons.

<i class="bi-bootstrap bi--flip-horizontal"></i>
<i class="bi-bootstrap bi--flip-vertical"></i>

Icons

License

MIT

Thanks

Thank Bootstrap team for providing us the great icons.