Icons - Documentation | Front - Multipurpose Responsive Template

Types

Use .icon-* or .icon-soft-* classes to change the visual style of the icon.

Preview
HTML

<span class="icon icon-primary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-primary">
  <i class="bi-house"></i>
</span>

Color variants

Predefined solid color button styles.

Preview
HTML

<span class="icon icon-primary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-secondary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-success">
  <i class="bi-house"></i>
</span>
<span class="icon icon-danger">
  <i class="bi-house"></i>
</span>
<span class="icon icon-warning">
  <i class="bi-house"></i>
</span>
<span class="icon icon-info">
  <i class="bi-house"></i>
</span>
<span class="icon icon-light">
  <i class="bi-house"></i>
</span>
<span class="icon icon-dark">
  <i class="bi-house"></i>
</span>

Soft icons

Use .icon-soft-*

Preview
HTML

<span class="icon icon-soft-primary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-secondary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-success">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-danger">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-warning">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-info">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-light">
  <i class="bi-house"></i>
</span>
<span class="icon icon-soft-dark">
  <i class="bi-house"></i>
</span>

Sizes

Fancy larger or smaller buttons? Add .icon-lg, .icon-sm or .icon-xs for additional sizes.

Preview
HTML

<span class="icon icon-lg icon-primary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-primary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-sm icon-primary">
  <i class="bi-house"></i>
</span>
<span class="icon icon-xs icon-primary">
  <i class="bi-house"></i>
</span>

Circle

Use the .icon-circle modifier class to make icons circled.

Preview
HTML

<span class="icon icon-lg icon-primary icon-circle">
  <i class="bi-house"></i>
</span>
<span class="icon icon-primary icon-circle">
  <i class="bi-house"></i>
</span>
<span class="icon icon-sm icon-primary icon-circle">
  <i class="bi-house"></i>
</span>
<span class="icon icon-xs icon-primary icon-circle">
  <i class="bi-house"></i>
</span>