Bootstrap icons — Overview
Tags: bootstrap, html
Published: 2020-01-03 05:42:26

---

firstPublishedAt: 1577384097526
latestPublishedAt: 1577457244036
slug: bootstrap-icons-overview
title: Bootstrap icons — Overview

---

#####[#bootstrap](https://dev.to/t/bootstrap) [#html](https://dev.to/t/html) 

![Bootstrap icons as seen on [http://icons.getbootstrap.com/](http://icons.getbootstrap.com/)](https://cdn-images-1.medium.com/max/2468/1*__FLgbyRXxBNwwps3yjV1w.png)

[Bootstrap](https://getbootstrap.com/) is a large and complex frontend library which we all fancy having some powerful functionality and customization built-in. Occasionally though, when you need to have icons in your web projects; you go straight to[ Font-awesome](https://www.fontawesome.com/) or [Glyphicons](https://getbootstrap.com/docs/3.3/components/) (Bootstrap v3). But developers and designers often felt constricted to the fact that they have to rely on some other third party library for the icons having to pay for icons they desire. This just didn’t seem right for any of us.

Fast forward 2019, gone are the days when we had to choose between [Font-awesome](https://www.fontawesome.com/) or [Glyphicons](https://getbootstrap.com/docs/3.3/components/) (Bootstrap v3), For the first time ever, [Bootstrap](https://getbootstrap.com/) has its own icon library, custom designed and built for its components… (`navbars`, `button`, `cards`, and more).

You can Track latest releases on Github [here](https://github.com/twbs/icons/releases/), also you can checkout Bootstrap icons [documentation](https://icons.getbootstrap.com/).

---

# Getting Started

# With npm

```
`npm install bootstrap-icons`
```

# Download

Download the project from [here](https://github.com/twbs/icons/releases/), and from the `icons` folder and directly copy icons SVGs which you require in your project.

# Usage

Choose how you would like to integrate Bootstrap icons in your web application.

# External image

Use directly from the project directory and reference them like normal images with the `<img>` element.

Code:

```
`<img src="/assets/img/bootstrap.svg" width="64" height="64" title="Bootstrap">`
```

Preview:

![bootstrap.svg](https://cdn-images-1.medium.com/max/186/1*rh5okfViVbpCQFAkzzuCxg.png)

# 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 class="bi bi-chevron-right" width="64" height="64" 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" clip-rule="evenodd"/>
</svg>`
```

Preview:

![chevron-right.svg](https://cdn-images-1.medium.com/max/154/1*YZk5_5XFCm1W9fQ_m998aw.png)

# As 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: "";
                              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
                              background-repeat: no-repeat;
                              background-size: 1rem 1rem;
                            }`
```

Preview:

![image.svg](https://cdn-images-1.medium.com/max/184/1*1BMRBpqnP2FacIeCVNVVpg.png)

---

# Styling

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

# Using bootstrap css classes

Code:

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

`                              ...`

`</svg>`
```

Preview:

![`alert-triangle.svg stylized with bootstrap class`](https://cdn-images-1.medium.com/max/178/1*Vr2CvOtaOoNgi1Dvo5e_hg.png)

# Using custom css classes

Code:

```
`.my-custom-css-class{
                      color:green;
                    }`
```

Preview:

![`alert-triangle.svg stylized with custom css`](https://cdn-images-1.medium.com/max/174/1*D3E5IizZSrXXmkt3ruScIg.png)

# Using Style Attribute

Code:

```
`style="color:blue;"`
```

Preview:

![stylized `alert-triangle.svg`](https://cdn-images-1.medium.com/max/168/1*C72UxZhVkiRqyLdDQdNl0Q.png)

**Original article on**: [https://blog.kushalbhalaik.xyz/bootstrap-icons-overview/](https://blog.kushalbhalaik.xyz/bootstrap-icons-overview/)