Icons

Goodkit Exclusive

Goodkit comes with two icon sets and an Icon component to easily control their coloring and sizing.

Duotone

Two-tone icons easily included as SVG elements. Hover any icon to get the icon's path from the Duotone folder.

<div class="icon">
  @@include("../partials/icons/duotone-icons/Clothes/Brassiere.svg")
</div>

Colors

You can style the icons by using Bootstrap text utilities.

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

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

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

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

<div class="icon text-info">
  @@include("../partials/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. .icon-auto stands for 1em.

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

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

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

Feather icons

Simply beautiful icons powered by the Feather icons.

Plugin documentation

<span class="fe fe-activity"></span>