Icon

Bootstrap 5 Icon

Bootstrap 5 Icons are representative symbols or images that can serve as a link, provide information, or simply be aesthetic.

The Contrast Bootstrap 5 Icon component allows you to incorporate brand icons (such as Twitter, Facebook, and Stack Overflow) in your project with predefined styles. However, only pro users have access to this feature. You can learn more on How to add Icons to your Bootstrap 5 Project

Default Icons

HTML

html

<button type="button" class="btn btn-primary">
  <i class="fa fa-book"></i>
  <span> Click me </span>
</button>
<button type="button" class="btn btn-secondary">
  <i class="fa fa-user"></i>
  <span>Click me </span>
</button>
<button type="button" class="btn btn-success">
  <i class="fa fa-check"></i>
  <span> Click me </span>
</button>
<button type="button" class="btn btn-danger">
  <i class="fa fa-times"></i>
  <span> Click me </span>
</button>
<button type="button" class="btn btn-dark">
  <i class="fa fa-home"></i>
  <span> Click me </span>
</button>
<button type="button" class="btn btn-info">
  <i class="fa fa-book"></i>
  <span> Click me </span>
</button>
<button type="button" class="btn btn-outline-warning">
  <i class="fa fa-lock"></i>
  <span> Click me </span>
</button>

Border Icons

To give your icons a border, use the icon-border property.

HTML

html

<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>

Spin Icons

Use the icon-spin class to spin your Contrast Bootstrap 5 icons.

HTML

html

<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>

Pull Icons

HTML

html

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

Pulse Icons

To make your icons spin a little quicker, use the icon-pulse class.

HTML

html

<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>

Rotate Icons

HTML

html

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

Sizes

Use the icon class, then append the size code to determine how small or huge you want your icon to be (lg for large, and sm for small). The size is set to medium by default.

HTML

html

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

Adding Icons is simple with the bootstrap 5 UI kit. You can check out

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Forms

Footer