My favorite collection of icons, used by this site.

Usage

Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. We recommend using a width: 1em (and optionally height: 1em) for easy resizing via font-size.


Embedded

Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height.

Sprite

Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., toggles is #toggles). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming.


External image

Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the <img> element.


Icon font

Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., <i class="bi-alarm-clock"></i>).

Use font-size and color to change the icon appearance.


CSS

You can also use the SVG within your CSS (be sure to escape any characters, such as # to %23 when specifying hex color values). When no dimensions are specified via width and height on the <svg>, the icon will fill the available space.

The viewBox attribute is required if you wish to resize icons with background-size. Note that the xmlns attribute is required.


Styling

Color can be changed by setting a .text-* class or custom CSS:


Accessibility

If the icons are not purely decorative, make sure you provide an appropriate text alternative. Depending on which method you’re using to add the icons, and where you’re using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches.