For the very first time, Bootstrap has its own icon library, custom-designed and built for bootstrap components and documentation.
Bootstrap Icons are designed to figure with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, in order that they scale quickly and simply and may be styled with CSS. While they’re built for Bootstrap, they’ll add any project. They’re open-sourced under the MIT license, so you’re free to download, use, and customize as you need.
How to Install:
Bootstrap icons are published to npm, but they can also be downloaded if needed.
Install Bootstrap Icons via command line with npm.
npm install bootstrap-icons
Usage:
Bootstrap Icons are SVGs. So, you can include in your HTML code in various ways on the basis of the type of your project that you are working on.
- Copy paste SVGs as Embedded HTML
- SVG Sprite with <use> element
- As an External Image
Note: Bootstrap Icons include a width and height of “1 em” by default to allow for easy resizing via font-size.
-
Various ways of usage:
-
Copy paste SVGs as Embedded HTML : 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
=
"64"
height
=
"64"
viewBox
=
"0 0 20 20"
fill
=
"currentColor"
xmlns
=
<
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
>
chevron_rightfilter_noneExample:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Bootstrap Cards</
title
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
" />
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
svg
class
=
"bi bi-chevron-right"
width
=
"64"
height
=
"64"
viewBox
=
"0 0 20 20"
fill
=
"currentColor"
<
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
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
-
SVG Sprite with <use> element: Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., heart is #heart). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming.
Example:
<
svg
class
=
"bi"
width
=
"40"
height
=
"40"
fill
=
"currentColor"
>
<
use
xlink:href
=
"bootstrap-icons.svg#heart-fill"
/>
</
svg
>
<
svg
class
=
"bi"
width
=
"40"
height
=
"40"
fill
=
"currentColor"
>
<
use
xlink:href
=
"bootstrap-icons.svg#toggles"
/>
</
svg
>
<
svg
class
=
"bi"
width
=
"40"
height
=
"40"
fill
=
"currentColor"
>
<
use
xlink:href
=
"bootstrap-icons.svg#shop"
/>
</
svg
>
chevron_rightfilter_noneOutput:
-
As an External Image: Copy the Bootstrap icons SVGs to any directory of your choice and reference them like normal images with the <img> tag.
Example:
<
img
src
=
"/Icons/img/bootstrap.svg"
alt
=
""
width
=
"40"
height
=
"40"
title
=
"Icons"
>
chevron_rightfilter_noneOutput:
- Styling of Icons:
For styling of Icons, consider them same as text. Color can also be changed by using a .text-* class or custom CSS.
Example:
<
svg
class
=
"bi bi-alert-triangle text-success "
width
=
"40"
height
=
"40"
viewBox
=
"0 0 20 20"
fill
=
"currentColor"
.....
</
svg
>
chevron_rightfilter_noneOutput: