bootstrap-icons

What is bootstrap-icons?

The bootstrap-icons npm package provides a collection of free, high-quality icons designed to work seamlessly with Bootstrap. These icons can be easily integrated into web projects to enhance the visual appeal and user experience.

What are bootstrap-icons's main functionalities?

Basic Icon Usage

This feature allows you to include any of the available icons in your HTML by using the appropriate class name. The 'bi' class is a prefix for all Bootstrap icons, and 'bi-alarm' specifies the particular icon.

<i class='bi bi-alarm'></i>

Customizing Icon Size

You can easily customize the size of the icons by applying inline styles or CSS classes. In this example, the 'font-size' property is used to set the icon size to 2rem.

<i class='bi bi-alarm' style='font-size: 2rem;'></i>

Using Icons with Buttons

Bootstrap icons can be used within buttons to enhance their visual appeal. This example shows how to include an icon inside a Bootstrap button.

<button class='btn btn-primary'><i class='bi bi-alarm'></i> Alarm</button>

Changing Icon Color

You can change the color of the icons by applying inline styles or CSS classes. In this example, the 'color' property is used to set the icon color to red.

<i class='bi bi-alarm' style='color: red;'></i>

Other packages similar to bootstrap-icons

font-awesome

Font Awesome is a popular icon library that offers a wide range of icons. It provides more icons than bootstrap-icons and includes both free and premium options. Font Awesome also offers more customization options and is widely used in various web projects.

material-icons

Material Icons is a set of icons designed by Google and follows the Material Design guidelines. It offers a large collection of icons that are easy to use and integrate into web projects. Material Icons are particularly popular in projects that follow Material Design principles.

heroicons

Heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. They are designed to be simple and consistent, making them a good alternative to bootstrap-icons for projects that require a clean and modern look.

README

Bootstrap Icons

Official open source SVG icon library for Bootstrap with over 2,000 icons.
Explore Bootstrap Icons »

Bootstrap · Themes · Blog

Install

Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this package—it's up to you and your team to implement. Read our docs for usage instructions.

npm i bootstrap-icons

For those using Packagist, you can also install Bootstrap Icons via Composer:

composer require twbs/bootstrap-icons

Also available in Figma.

Usage

Depending on your setup, you can include Bootstrap Icons in a handful of ways.

• Copy-paste SVGs as embedded HTML
• Reference via <img> element
• Use the SVG sprite
• Include via CSS

See the docs for more information.

Development

Clone the repo, install dependencies, and start the Hugo server locally.

git clone https://github.com/twbs/icons/
cd icons
npm i
npm start

Then open http://localhost:4000 in your browser.

npm scripts

Here are some key scripts you'll use during development. Be sure to look to our package.json or npm run output for a complete list of scripts.

Script	Description
start	Alias for running docs-serve
docs-serve	Starts a local Hugo server
pages	Generates permalink pages for each icon with template Markdown
icons	Processes and optimizes SVGs in icons directory, generates fonts and sprite

Adding SVGs

Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with fill (no stroke). Once a new SVG icon has been added to the icons directory, we use an npm script to:

1. Optimize our SVGs with SVGO.
2. Modify the SVGs source code, removing all attributes before setting new attributes and values in our preferred order.

Use npm run icons to run the script, run npm run pages to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.

Warning: Please exclude any auto-generated files, like font/** and bootstrap-icons.svg from your branch because they cause conflicts, and we generally update the dist files before a release.

Publishing

Documentation is published automatically when a new Git tag is published. See our GitHub Actions and package.json for more information.

License

MIT

Author

@mdo