If used correctly, may improve visual interest and grab users' attention.

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.

You may copy the embedded code from the official Bootstrap icons page.


Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., smile is #emoji-smile).

This is because SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming with a .text-* class or custom CSS such as .icon-*.