Bootstrap logo

Bootstrap Icons

Official open source SVG icon library for Bootstrap.
Explore Bootstrap Icons »

Bootstrap · Themes · Blog

## 1,300+ icons [![Bootstrap Icons full set](https://github.com/twbs/icons/blob/main/.github/preview.png)](https://icons.getbootstrap.com) [Also available in Figma.](https://www.figma.com/file/YjjMzXhECL1MIb6Qlm7VJO/Bootstrap-Icons-v1.4.1) ## 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](https://icons.getbootstrap.com/) for usage instructions. ```shell npm i bootstrap-icons ``` ## Usage Depending on your setup, you can include Bootstrap Icons in a handful of ways. - Copy-paste SVGs as embedded HTML - Reference via `` element - Use the SVG sprite - Include via CSS [See the docs for more information.](https://icons.getbootstrap.com/#usage) ## Development [![Build Status](https://github.com/twbs/icons/workflows/Tests/badge.svg)](https://github.com/twbs/icons/actions?workflow=Tests) Clone the repo, install dependencies, and start the Hugo server locally. ```shell 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` 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 | ## Adding SVGs Once a new SVG icon has been added to the `icons` directory, you'll need to optimize them. An npm script is used to: 1. Optimize our SVGs with SVGO. 2. Modify the SVGs source HTML, 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. ## Publishing Documentation is published automatically when a new Git tag is published. See our [GitHub Actions](https://github.com/twbs/icons/tree/main/.github/workflows) and [`package.json`](https://github.com/twbs/icons/blob/main/package.json) for more information. ## License MIT ## Author [@mdo](https://github.com/mdo)