Bootstrap Icons
Official open source SVG icon library for Bootstrap.
Explore Bootstrap Icons »
Bootstrap
·
Themes
·
Blog
## 1,300+ icons
[](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
[](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)