Icons

Landkit only

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

<div class="icon">
  @@include("../assets/img/icons/duotone-icons/Clothes/T-Shirt.svg")
</div>

Colors

You can style the icons by using Bootstrap text utilities.

<div class="icon text-primary">
  @@include("assets/img/icons/duotone-icons/Communication/Chat#5.svg")
</div>

<div class="icon text-success">
  @@include("assets/img/icons/duotone-icons/General/Duplicate.svg")
</div>

<div class="icon text-body">
  @@include("assets/img/icons/duotone-icons/Files/Pictures#1.svg")
</div>

Sizing

Using Bootstrap’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">
  @@include("assets/img/icons/duotone-icons/Communication/Chat#5.svg")
</div>

<div class="icon icon-lg text-primary">
  @@include("assets/img/icons/duotone-icons/Communication/Chat#5.svg")
</div>

<div class="icon text-primary">
  @@include("assets/img/icons/duotone-icons/Communication/Chat#5.svg")
</div>

<div class="icon icon-sm text-primary">
  @@include("assets/img/icons/duotone-icons/Communication/Chat#5.svg")
</div>

<div class="icon icon-xs text-primary">
  @@include("assets/img/icons/duotone-icons/Communication/Chat#5.svg")
</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