• Stars
    star
    7,211
  • Rank 5,227 (Top 0.2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 19 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Official open source SVG icon library for Bootstrap.

Bootstrap logo

Bootstrap Icons

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

Bootstrap · Themes · Blog

Bootstrap Icons preview

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

Build Status npm version

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

More Repositories

1

bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
JavaScript
167,558
star
2

ratchet

Build mobile apps with simple HTML, CSS, and JavaScript components.
CSS
14,596
star
3

bootstrap-sass

Official Sass port of Bootstrap 2 and 3.
SCSS
12,614
star
4

rfs

✩ Automates responsive resizing ✩
CSS
3,285
star
5

bootlint

HTML linter for Bootstrap projects
JavaScript
2,398
star
6

bootstrap-rubygem

Bootstrap rubygem for Rails / Sprockets / Hanami / etc
SCSS
2,003
star
7

bootstrap-npm-starter

Starter template for new building with Bootstrap 4 in npm projects.
HTML
1,225
star
8

bootstrap-expo

Beautiful and inspiring uses of Bootstrap.
SCSS
476
star
9

examples

Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!
HTML
297
star
10

blog

Official blog for Bootstrap.
HTML
227
star
11

bootstrap-server

The node server that powers the bootstrap customize page (no longer maintained).
JavaScript
177
star
12

stylelint-config-twbs-bootstrap

Stylelint config for Bootstrap
JavaScript
139
star
13

no-carrier

Tool to auto-close old GitHub issues that were abandoned by their reporter
Scala
132
star
14

release

Bootstrap Release Working Group
111
star
15

rorschach

Bootstrap pull request sanity checker bot
Scala
105
star
16

mq4-hover-shim

A shim for the Media Queries Level 4 `hover` media feature
JavaScript
97
star
17

grunt-bootlint

A Grunt wrapper for Bootlint, the HTML linter for Bootstrap projects
JavaScript
65
star
18

savage

Service to safely run Travis CI tests with heightened permissions on pull requests
Scala
45
star
19

bootstrap-npm

Demo for how to include, customize, and compile Bootstrap's Sass/CSS with npm.
HTML
32
star
20

grunt-css-flip

UNMAINTAINED Grunt plugin for Twitter's css-flip.
JavaScript
23
star
21

gruntworker

Periodically grabs changes, runs build scripts, and pushes built changes back to the Bootstrap git repo
Python
19
star
22

bootlint-server

JavaScript
6
star
23

.github

6
star