Bootstrap Icons

Free, high quality, open source icon library with over 1,300 icons.

Include them anyway you like—SVGs, SVG sprite, or web fonts.

To use Bootstrap new icons, add this cdn in html file inside head tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

Bootstrap new icons

Code

<!Doctype html>
<html>
<head>
   <title>Bootstrap new icons</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
   <style>
   i{font-size: 50px}
   </style>
</head>
<body>
   <h1 align="center">Bootstrap new icons</h1>

   <i class="bi-heart-fill"></i>
   <i class="bi-bag-fill"></i>
   <i class="bi-moon-fill"></i>
   <i class="bi-umbrella-fill"></i>

</body>
</html>

Sizing icons

Code

<!Doctype html>
<html>
<head>
   <title>Sizing bootstrap icons</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
   <style>
   .bi-18 { font-size: 18px }
   .bi-24 { font-size: 24px }
   .bi-36 { font-size: 36px }
   .bi-48 { font-size: 48px }
   </style>
</head>
<body>
   <h1 align="center">Sizing bootstrap icons</h1>

   <p>
	   <i class="bi-heart-fill bi-18"></i>
	   <i class="bi-heart-fill bi-24"></i>
	   <i class="bi-heart-fill bi-36"></i>
	   <i class="bi-heart-fill bi-48"></i>
	</p>

</body>
</html>

Coloring icons

Code

<!Doctype html>
<html>
<head>
   <title>Coloring bootstrap icons</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
   <style>
	.bi-18 { font-size: 18px }
	.bi-24 { font-size: 24px }
	.bi-36 { font-size: 36px }
	.bi-48 { font-size: 48px }
	/* coloring */
	.red { color: red }
	.blue { color: blue }
	.green { color: green }
	.orange { color: orange }
   </style>
</head>
<body>
   <h1 align="center">Coloring bootstrap icons</h1>

   <p>
	   <i class="bi-heart-fill bi-18 red"></i>
	   <i class="bi-heart-fill bi-24 blue"></i>
	   <i class="bi-heart-fill bi-36 green"></i>
	   <i class="bi-heart-fill bi-48 orange"></i>
	</p>

</body>
</html>

Usages

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.

Code

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
	<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>

External image

Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the <img> element.

Code

<img src="https://icons.getbootstrap.com/assets/img/bootstrap.svg" alt="Bootstrap" width="50" height="50">

Icon font

Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., <i class="bi-alarm-clock"></i>).

Code

<i class="bi-alarm-clock"></i>

Use font-size and color to change the icon appearance.

Code

<i class="bi-alarm" style="font-size: 3rem; color: cornflowerblue"></i>

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.

Code

.bi::before {
	display: inline-block;
	content: "";
	vertical-align: -.125em;
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
	background-repeat: no-repeat;
	background-size: 1rem 1rem;
}

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

Styling icons

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

Code

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

Bootstrap Icons

More icons