twbs/icons

Official open source SVG icon library for Bootstrap.


repo name	twbs/icons
repo link	https://github.com/twbs/icons
homepage	https://icons.getbootstrap.com/
language	JavaScript
size (curr.)	10188 kB
stars (curr.)	3528
created	2019-07-25
license	MIT License

1,100+ icons

Also available in Figma.

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 --save

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 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:

Optimize our SVGs with SVGO.
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.