Exclusive SVG Set

Guidance and suggestions for using our exclusive SVG set of icon libraries.

Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they're built for Bootstrap, they'll work in any project.

Icons

Alt
App
At
Bag
Box
Bug
Cpu
Cup
Dot
Egg
Eye
Gem
Geo
Hdd
Hr
Key
Map
Mic
Nut
Pen
Pip
Rss
Sim
Sun
Tag
Tv
Upc
Vr
X

Install

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

npm

Install Bootstrap Icons via command line with npm.

              
                npm install bootstrap-icons
              
            

Usage

Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. Bootstrap Icons include a width and height of 1em by default to allow for easy resizing via font-size.

Embedded

Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height.

                    
                      <svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>
                    
                  

Sprite

Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., toggles is #toggles). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming.

                    
                      <svg class="bi" width="32" height="32" fill="currentColor">
                        <use xlink:href="../assets/vendor/bootstrap-icons/bootstrap-icons.svg#heart-fill"/>
                      </svg>
                      <svg class="bi" width="32" height="32" fill="currentColor">
                        <use xlink:href="../assets/vendor/bootstrap-icons/bootstrap-icons.svg#toggles"/>
                      </svg>
                      <svg class="bi" width="32" height="32" fill="currentColor">
                        <use xlink:href="../assets/vendor/bootstrap-icons/bootstrap-icons.svg#shop"/>
                      </svg>
                    
                  

CSS

You can also use the SVG within your CSS (be sure to escape any characters, such as # to %23 when specifying hex color values). When no dimensions are specified via width and height on the <svg>, the icon will fill the available space.

The viewBox attribute is required if you wish to resize icons with background-size. Note that the xmlns attribute is required.

              
                .bi::before {
                  display: inline-block;
                  content: "";
                  background-image: url("data:image/svg+xml,");
                  background-repeat: no-repeat;
                  background-size: 1rem 1rem;
                }
              
            

Styling

Color can be changed by setting a .text-* class or custom CSS:

                    
                      <svg class="bi bi-alert-triangle text-success" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        ...
                      </svg>
                    
                  

Working with SVGs

SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven’t included these attributes and workarounds in our code.

  • Focus handling is broken in Internet Explorer and Edge. When embedding your SVGs, add focusable="false" to the <svg> element. Learn more on Stack Overflow.

  • Browsers inconsistently announce SVGs as <img> tags with voice assistance. Include role="img" when possible to avoid any issues. See this article for details.

  • Safari skips aria-label when used non-focusable SVGs. As such, use aria-hidden="true" when embedding the <svg> file and use CSS to visually hide an equivalent label. More details here.

Found another issue with SVGs we should note? Please open an issue to share details.