Logo Logo

Documentation v1.1.1

Preview Purchase
Light
Dark
System

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

ecm010.svg
Use as Img Or inline SVG
ecm011.svg
Use as Img Or inline SVG
ecm006.svg
Use as Img Or inline SVG
ecm001.svg
Use as Img Or inline SVG
ecm002.svg
Use as Img Or inline SVG
ecm004.svg
Use as Img Or inline SVG
ecm009.svg
Use as Img Or inline SVG
ecm007.svg
Use as Img Or inline SVG
ecm003.svg
Use as Img Or inline SVG
ecm008.svg
Use as Img Or inline SVG
ecm005.svg
Use as Img Or inline SVG

Layouts

lay009.svg
Use as Img Or inline SVG
lay005.svg
Use as Img Or inline SVG
lay002.svg
Use as Img Or inline SVG
lay001.svg
Use as Img Or inline SVG
lay006.svg
Use as Img Or inline SVG
lay003.svg
Use as Img Or inline SVG
lay007.svg
Use as Img Or inline SVG
lay008.svg
Use as Img Or inline SVG
lay010.svg
Use as Img Or inline SVG
lay004.svg
Use as Img Or inline SVG

Communication

com009.svg
Use as Img Or inline SVG
com007.svg
Use as Img Or inline SVG
com008.svg
Use as Img Or inline SVG
com013.svg
Use as Img Or inline SVG
com012.svg
Use as Img Or inline SVG
com014.svg
Use as Img Or inline SVG
com002.svg
Use as Img Or inline SVG
com005.svg
Use as Img Or inline SVG
com011.svg
Use as Img Or inline SVG
com006.svg
Use as Img Or inline SVG
com003.svg
Use as Img Or inline SVG
com001.svg
Use as Img Or inline SVG
com004.svg
Use as Img Or inline SVG
com010.svg
Use as Img Or inline SVG

General

gen008.svg
Use as Img Or inline SVG
gen005.svg
Use as Img Or inline SVG
gen006.svg
Use as Img Or inline SVG
gen010.svg
Use as Img Or inline SVG
gen035.svg
Use as Img Or inline SVG
gen053.svg
Use as Img Or inline SVG
gen016.svg
Use as Img Or inline SVG
gen004.svg
Use as Img Or inline SVG
gen028.svg
Use as Img Or inline SVG
gen059.svg
Use as Img Or inline SVG
gen012.svg
Use as Img Or inline SVG
gen018.svg
Use as Img Or inline SVG
gen051.svg
Use as Img Or inline SVG
gen027.svg
Use as Img Or inline SVG
gen034.svg
Use as Img Or inline SVG
gen043.svg
Use as Img Or inline SVG
gen011.svg
Use as Img Or inline SVG
gen041.svg
Use as Img Or inline SVG
gen007.svg
Use as Img Or inline SVG
gen032.svg
Use as Img Or inline SVG
gen039.svg
Use as Img Or inline SVG
gen023.svg
Use as Img Or inline SVG
gen036.svg
Use as Img Or inline SVG
gen017.svg
Use as Img Or inline SVG
gen002.svg
Use as Img Or inline SVG
gen044.svg
Use as Img Or inline SVG
gen014.svg
Use as Img Or inline SVG
gen045.svg
Use as Img Or inline SVG
gen030.svg
Use as Img Or inline SVG
gen060.svg
Use as Img Or inline SVG
gen026.svg
Use as Img Or inline SVG
gen037.svg
Use as Img Or inline SVG
gen061.svg
Use as Img Or inline SVG
gen048.svg
Use as Img Or inline SVG
gen015.svg
Use as Img Or inline SVG
gen021.svg
Use as Img Or inline SVG
gen020.svg
Use as Img Or inline SVG
gen057.svg
Use as Img Or inline SVG
gen022.svg
Use as Img Or inline SVG
gen013.svg
Use as Img Or inline SVG
gen052.svg
Use as Img Or inline SVG
gen050.svg
Use as Img Or inline SVG
gen054.svg
Use as Img Or inline SVG
gen029.svg
Use as Img Or inline SVG
gen025.svg
Use as Img Or inline SVG
gen042.svg
Use as Img Or inline SVG
gen031.svg
Use as Img Or inline SVG
gen040.svg
Use as Img Or inline SVG
gen033.svg
Use as Img Or inline SVG
gen049.svg
Use as Img Or inline SVG
gen056.svg
Use as Img Or inline SVG
gen019.svg
Use as Img Or inline SVG
gen003.svg
Use as Img Or inline SVG
gen038.svg
Use as Img Or inline SVG
gen009.svg
Use as Img Or inline SVG
gen058.svg
Use as Img Or inline SVG
gen062.svg
Use as Img Or inline SVG
gen024.svg
Use as Img Or inline SVG
gen001.svg
Use as Img Or inline SVG
gen047.svg
Use as Img Or inline SVG
gen046.svg
Use as Img Or inline SVG
gen055.svg
Use as Img Or inline SVG

Technology

teh008.svg
Use as Img Or inline SVG
teh010.svg
Use as Img Or inline SVG
teh004.svg
Use as Img Or inline SVG
teh007.svg
Use as Img Or inline SVG
teh005.svg
Use as Img Or inline SVG
teh001.svg
Use as Img Or inline SVG
teh003.svg
Use as Img Or inline SVG
teh009.svg
Use as Img Or inline SVG
teh006.svg
Use as Img Or inline SVG
teh002.svg
Use as Img Or inline SVG

Art

art008.svg
Use as Img Or inline SVG
art001.svg
Use as Img Or inline SVG
art004.svg
Use as Img Or inline SVG
art003.svg
Use as Img Or inline SVG
art006.svg
Use as Img Or inline SVG
art005.svg
Use as Img Or inline SVG
art009.svg
Use as Img Or inline SVG
art007.svg
Use as Img Or inline SVG
art010.svg
Use as Img Or inline SVG
art002.svg
Use as Img Or inline SVG

Text

txt004.svg
Use as Img Or inline SVG
txt011.svg
Use as Img Or inline SVG
txt008.svg
Use as Img Or inline SVG