Documentation v1.1.5

Preview

Overview

Exclusive 400+ high quality vector SVG icon set by Keenthemes. Use them as image or inline SVG element in combination with any Craft elements.

Image Usage

Use svg icons as image with <img> tag as shown below:
<img src="assets/media/icons/duotune/abstract/abs001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/arrows/arr001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/art/art001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/coding/cod001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/communication/com001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/ecommerce/ecm001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/electronics/elc001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/files/fil001.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotune/finance/fin001.svg" class="h-40px me-10"/>

Inline Usage

Use svg icons as inline svg element in order to customize the icon size and color via CSS:
<!--begin::Svg Icon | path: icons/duotune/abstract/abs010.svg-->
<span class="svg-icon svg-icon-3x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7V17H7V7H17ZM20 3H4C3.4 3 3 3.4 3 4V20C3 20.6 3.4 21 4 21H20C20.6 21 21 20.6 21 20V4C21 3.4 20.6 3 20 3Z" fill="currentColor"/>
</svg>
</span>
<!--end::Svg Icon-->

Colors

The inline icons can be colored using .svg-icon-{color} class that defined with $theme-text-colors variable in sass/_variables.scss:
white
primary
secondary
light
success
info
warning
danger
dark
muted
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
<span class="svg-icon svg-icon-2x svg-icon-white"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-primary"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-secondary"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-light"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-success"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-info"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-warning"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-danger"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-dark"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-muted"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-100"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-200"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-300"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-400"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-500"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-600"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-700"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-800"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-900"><svg>...</svg></span>

Sizes

The inline icons can be sized using .svg-icon-{size} class that defined with $font-sizes variable in sass/_variables.scss
Where size is one of:
  • 1 - sets icon size that equals to <h1> font size
  • 2 - sets icon size that equals to <h2> font size
  • 3 - sets icon size that equals to <h3> font size
  • 4 - sets icon size that equals to <h4> font size
  • 5 - sets icon size that equals to <h5> font size
  • 6 - sets icon size that equals to <h6> font size
  • 7 - sets icon size that equals to <h7> font size
  • 7 - sets icon size that equals to 0.95 of $font-size-base where $font-size-base: 1rem
  • 8 - sets icon size that equals to 0.85 of $font-size-base where $font-size-base: 1rem
  • 9 - sets icon size that equals to 0.75 of $font-size-base where $font-size-base: 1rem
  • 10 - sets icon size that equals to 0.5 of $font-size-base where $font-size-base: 1rem
  • base - sets icon size that equals to $font-size-base where $font-size-base: 1rem
  • fluid - sets icon size that equals to 100%
  • 2x - sets icon size that equals to 2 of $font-size-base where $font-size-base: 1rem
  • 2qx - sets icon size that equals to 2.25 of $font-size-base where $font-size-base: 1rem
  • 2hx - sets icon size that equals to 2.5 of $font-size-base where $font-size-base: 1rem
  • 2tx - sets icon size that equals to 2.75 of $font-size-base where $font-size-base: 1rem
  • 3x - sets icon size that equals to 3 of $font-size-base where $font-size-base: 1rem
  • 3qx - sets icon size that equals to 3.25 of $font-size-base where $font-size-base: 1rem
  • 3hx - sets icon size that equals to 3.5 of $font-size-base where $font-size-base: 1rem
  • 3tx - sets icon size that equals to 3.75 of $font-size-base where $font-size-base: 1rem
  • 4x - sets icon size that equals to 4 of $font-size-base where $font-size-base: 1rem
  • 4qx - sets icon size that equals to 4.25 of $font-size-base where $font-size-base: 1rem
  • 4hx - sets icon size that equals to 4.5 of $font-size-base where $font-size-base: 1rem
  • 4tx - sets icon size that equals to 4.75 of $font-size-base where $font-size-base: 1rem
  • 5x - sets icon size that equals to 5 of $font-size-base where $font-size-base: 1rem
  • 5qx - sets icon size that equals to 5.25 of $font-size-base where $font-size-base: 1rem
  • 5hx - sets icon size that equals to 5.5 of $font-size-base where $font-size-base: 1rem
  • 5tx - sets icon size that equals to 5.75 of $font-size-base where $font-size-base: 1rem
.icon-size-5x
.icon-size-4x
.icon-size-3x
.icon-size-2tx
.icon-size-2hx
.icon-size-2qx
.icon-size-2x
.icon-size-1
.icon-size-2
.icon-size-3
.icon-size-5
.icon-size-6
<span class="svg-icon svg-icon-5x"><svg>...</svg></span>
<span class="svg-icon svg-icon-4x"><svg>...</svg></span>
<span class="svg-icon svg-icon-3x"><svg>...</svg></span>
<span class="svg-icon svg-icon-2tx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2hx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2qx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x"><svg>...</svg></span>
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="svg-icon svg-icon-2"><svg>...</svg></span>
<span class="svg-icon svg-icon-3"><svg>...</svg></span>
<span class="svg-icon svg-icon-5"><svg>...</svg></span>
<span class="svg-icon svg-icon-6"><svg>...</svg></span>
Use Height & Width  classes .w-{size} .h-{size} to set an svg element's height and width explicitly:
.h-20px .w-20px
.h-30px .w-30px
.h-40px .w-40px
.h-50px .w-50px
.h-75px .w-75px
.h-100px .w-100px
<span class="svg-icon"><svg class="h-20px w-20px">...</svg></span>
<span class="svg-icon"><svg class="h-30px w-30px">...</svg></span>
<span class="svg-icon"><svg class="h-40px w-40px">...</svg></span>
<span class="svg-icon"><svg class="h-50px w-50px">...</svg></span>
<span class="svg-icon"><svg class="h-75px w-75px">...</svg></span>
<span class="svg-icon"><svg class="h-100px w-100px">...</svg></span>

Server Side Helper

Svg icons are mostly used as embeded xml element in order to set color and size with CSS. The below PHP function can be used as reference to create a helper function for your server side language that embeds the icon's xml code on demand by just passing the icon path from the assets folder.
<?php
    function getSvgIcon($path, $class = "") {
        $rootPath = "www/site/"; // project path

        $full_path = $rootPath . $path;

        if ( !file_exists($full_path) ) {
            return "<!--SVG file not found: $path-->\n";
        }

        $cls = array("svg-icon");

        if ( !empty($class) ) {
            $cls = array_merge($cls, explode(" ", $class));
        }

        $svg_content = file_get_contents($full_path);

        $output = "<!--begin::Svg Icon | path: $path-->\n";
        $output .= "<span class=\"".implode(" ", $cls) . "\">" . $svg_content . "</span>";
        $output .= "\n<!--end::Svg Icon-->";

        return $output;
    }
?>
Use getSvgIcon function to embed an icon svg code from assets folder:
<?php
    echo getSvgIcon('assets/media/icons/duotune/abstract/abs010.svg', 'svg-icon-2x svg-icon-success');
?>
The HTML output of the above PHP function call will be:
<!--begin::Svg Icon | path: icons/duotune/abstract/abs010.svg-->
<span class="svg-icon svg-icon-2x svg-icon-success"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7V17H7V7H17ZM20 3H4C3.4 3 3 3.4 3 4V20C3 20.6 3.4 21 4 21H20C20.6 21 21 20.6 21 20V4C21 3.4 20.6 3 20 3Z" fill="currentColor"/>
</svg>
</span>
<!--end::Svg Icon-->

Icons Listing

Ecommerce

Layouts

Communication

General

Technology

Art