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 docsfor usage instructions.

npm i bootstrap-icons

For thoseusing 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 /twbs/icons/
cdicons
npm i
npm start

Then openhttp://localhost:4000in your browser.

npm scripts

Here are some key scripts you'll use during development. Be sure to look to ourpackage.jsonornpm runoutput for a complete list of scripts.

Script	Description
start	Alias for runningdocs-serve
docs-serve	Starts a local Hugo server
pages	Generates permalink pages for each icon with template Markdown
icons	Processes and optimizes SVGs iniconsdirectory, 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 withfill(no stroke). Once a new SVG icon has been added to theiconsdirectory, 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.

Usenpm run iconsto run the script, runnpm run pagesto build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.

Warning:Please exclude any auto-generated files, likefont/**andbootstrap-icons.svgfrom 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 ourGitHub Actionsandpackage.jsonfor more information.

License

MIT

Author

@mdo