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.
Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.
Install Bootstrap Icons via command line with npm.
npm install bootstrap-icons
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
.
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>
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>
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;
}
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>
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.