Bootstrap Icons

What Bootstrap Icons is

Bootstrap Icons is a free icon library for adding icons to web projects, whether or not they use Bootstrap. The library contains more than 2,000 icons and offers them as SVGs, an SVG sprite, and web fonts. Developers can install it with npm or Composer, or download it from GitHub releases. Documentation describes embedding SVG in HTML, using the sprite or SVG files as images, and using icon fonts, Sass, or CSS. The icon font stylesheet can also be loaded from jsDelivr. Icon colors can be changed with Bootstrap text classes or custom CSS; icon fonts can be styled for size and color. The homepage links to an option to open the library in Figma. For accessibility, decorative icons should be hidden from assistive technology, while meaningful icons need a text alternative. The GitHub repository lists an MIT license. One documented caveat is that Chrome has an issue with SVG sprite references across domains. Bootstrap Icons is available on the web, and the repository lists GitHub issues for support.

Who it suits

It suits developers who need a free icon set for web projects, with or without Bootstrap. Its SVG, sprite, and web-font formats offer several ways to add icons.

Getting started

1. Open the Bootstrap Icons website.
2. Choose a package install through npm or Composer, download a release from GitHub, or use the documented jsDelivr stylesheet.
3. Select an integration method: inline SVG, SVG sprite, SVG image, icon font, Sass, or CSS.
4. Set icon color with the documented classes or CSS options; set font size for icon fonts.
5. Use aria-hidden="true" for decorative icons, or provide a text alternative for meaningful icons.

Verdict

Bootstrap Icons offers several documented ways to add and style icons in web projects. Check the Chrome sprite-reference caveat if your implementation uses SVG sprites across domains.