Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project
Tags: tutorial, frontend, developement, bootstrap5
Published: 2022-09-14 13:40:43

---
title: Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["tutorial", "frontend", "developement", "Bootstrap5"]
canonical_url: https://www.devwares.com/blog//how-to-add-icons-to-your-bootstrap-5-project/
---

Bootstrap 5 Icons are small pictures or symbols representing a piece of information or content on a website. Icons can also link to different parts of the web page or a different website entirely (e.g., social media icons on a website usually link to the company's social media account, brand, or person).

Bootstrap 5 Icons can also be entirely decorative and be implemented to complement the overall look or aesthetic of a website. Either way, icons have become a more prominent feature in modern-day websites. It has become almost impossible to see a website without one.

## Table Of Contents

- What are we building?
- Prerequisites
- What is Contrast and why?
- Creating our Bootstrap 5 Sidebar
- The Default Icons
- Border Icons
- Spin Icons
- Pull Icons
- Pulse Icons
- Rotate Icons
- Size Variations
- Conclusion
- Resources

## What are we building?

In this article, we will walk through adding icons in your HTML project using [Contrast bootstrap 5 library](https://www.devwares.com/product/bootstrap-contrast/).

## Prerequisites

To make the most of this article, it is essential that you have the following:

- A basic understanding of HTML.
- A basic understanding of CSS.

## What is Contrast bootstrap 5 and why?

[Contrast](https://www.devwares.com/product/bootstrap-contrast/) or Contrast Bootstrap 5 is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps. With predefined styles, you can now create web pages faster than ever without having to write any code

## Adding the Bootstrap 5 UI library CDN

The Contrast Bootstrap 5 UI kit allows us to use predefined styles, accessed with the contrast library class names. To use these styles in our HTML project, we need to install [the Contrast Bootstrap 5 library](https://www.devwares.com/product/bootstrap-admin-contrast/) by adding the CDNs.

We include the CSS CDN responsible for the Bootstrap styling in the `<head>` in our HTML file.

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />

```

After including the CSS CDN, we include the JavaScript CDN links at the bottom of our project in the `<body>`. We do this because we want the components to load before adding the interactive functionality, that JavaScript gives us.

```
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>

```

After adding both the CSS and JavaScript CDNs, our HTML file should look like this.

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
  </body>
</html>

```

## Using Bootstrap 5 Icons

**The Default Icons**

We use the `i` element to add icons in our project.

```
<i class="fa fa-book"></i>
<i class="fa fa-user"></i>
<i class="fa fa-check"></i>
<i class="fa fa-times"></i>
<i class="fa fa-home"></i>
<i class="fa fa-book"></i>
<i class="fa fa-lock"></i>

```

The second class indicates what small picture we want on our icon.

Creating Default Icons would look like this on your browser:

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/default-icons.PNG)

**Border Icons**

Use the `icon-border` to give your icons a border.

```
<i class="fa fa-book icon-border"></i>
<i class="fa fa-user icon-border"></i>
<i class="fa fa-check icon-border"></i>
<i class="fa fa-times icon-border"></i>
<i class="fa fa-home icon-border"></i>
<i class="fa fa-book icon-border"></i>
<i class="fa fa-lock icon-border"></i>

```

Our border icons should look like this:

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/border-icons.PNG).

**Spin Icons**

To spin your bootstrap 5 icons, use the `icon-spin` class.

```
<i class="fa fa-book icon-spin"></i>
<i class="fa fa-user icon-spin"></i>
<i class="fa fa-check icon-spin"></i>
<i class="fa fa-times icon-spin"></i>
<i class="fa fa-home icon-spin"></i>
<i class="fa fa-book icon-spin"></i>
<i class="fa fa-lock icon-spin"></i>

```

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/spinicon.gif)

**Pull Icons**

To flip your icons to its mirror image, give your the class of `icon-pull`.

```
<i class="fa fa-book icon-pull"></i>

```

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/pull-icons.PNG)

**Pulse Icons**

The `icon-pulse` to spin your icons a little faster.

```
<i class="fa fa-book icon-pulse"></i>
<i class="fa fa-user icon-pulse"></i>
<i class="fa fa-check icon-pulse"></i>
<i class="fa fa-times icon-pulse"></i>
<i class="fa fa-home icon-pulse"></i>
<i class="fa fa-book icon-pulse"></i>
<i class="fa fa-lock icon-pulse"></i>

```

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/pulseicon.gif)

**Rotate Icons**

To rotate your icon 360 degrees, use the `icon-rotate` class.

```
<i class="fa fa-user icon-rotate"></i> <i class="fa fa-check icon-rotate"></i>

```

After adding the class we should see this.

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/rotate-icons.PNG)

**Size Variations**

With the Bootstrap 5 UI kit, we can specify what size of icons we want.

There are three different sizes variations of the bootstrap icons:

- the small size, is indicated by the `icon-sm` class.
- the medium size, which is also the default value, `icon`.
- the large size, is indicated by the `icon-lg` class.

```
<i class="fa fa-user icon-lg"></i>
<i class="fa fa-user icon"></i>
<i class="fa fa-user icon-sm"></i>

```

![Bootstrap 5 Icons](https://www.devwares.com/blog/images/icon-sizing.PNG)

## Conclusion

This article discussed what Bootstrap 5 icons are and why you would need one on your web page. Next, we included the Contrast Bootstrap 5 CDN in our HTML page and finally added icons in our HTML project using the different predefined styles available from Bootstrap 5 UI kit.