Icons

Theme comes with two icon sets and an Icon component to easily control their colouring and sizing. 

<div class="icon">
  {{> clothes/t-shirt}}
</div>

Colors

You can style the icons by using Theme text utilities. 

<div class="icon text-primary">
  {{> communication/chat-5}}
</div>

<div class="icon text-success">
  {{> general/duplicate}}
</div>

<div class="icon text-body">
  {{> files/pictures-1}}
</div>

Sizing

Using Theme’s typical naming structure, you can create a standard icon, or scale it up to different sizes based on what’s needed. 

<div class="icon icon-xl text-primary">
  {{> communication/chat-5}}
</div>

<div class="icon icon-lg text-primary">
  {{> communication/chat-5}}
</div>

<div class="icon text-primary">
  {{> communication/chat-5}}
</div>

<div class="icon icon-sm text-primary">
  {{> communication/chat-5}}
</div>

<div class="icon icon-xs text-primary">
  {{> communication/chat-5}}
</div>

Feather icons

Simply beautiful icons powered by the Feather icons.

Plugin documentation 

<span class="fe fe-home"></span>
<span class="fe fe-file"></span>
<span class="fe fe-user"></span>
<span class="fe fe-layout"></span>
<span class="fe fe-briefcase"></span>

Circle

Create a circle variation of a feather icon by wrapping it inside an .icon-circle container. 

<div class="icon-circle bg-primary text-white">
  <i class="fe fe-arrow-down"></i>
</div>
Jump to