Logo

Documentation v1.0.11

  • Icons
  • Duotune Exclusive
Preview Purchase
Light
Dark

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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<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="black"/>
</svg></span>
<!--end::Svg Icon-->

Icon Colors

The inline icons can be colored using .svg-icon-{color}class that defined with $theme-text-colorsvariable 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>

Icon Sizes

The inline icons can be sized using .svg-icon-{size}class that defined with $font-sizesvariable in sass/_variables.scss
Where sizeis 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-basewhere $font-size-base: 1rem
  • 8- sets icon size that equals to 0.85 of $font-size-basewhere $font-size-base: 1rem
  • 9- sets icon size that equals to 0.75 of $font-size-basewhere $font-size-base: 1rem
  • 10- sets icon size that equals to 0.5 of $font-size-basewhere $font-size-base: 1rem
  • base- sets icon size that equals to $font-size-basewhere $font-size-base: 1rem
  • fluid- sets icon size that equals to 100%
  • 2x- sets icon size that equals to 2 of $font-size-basewhere $font-size-base: 1rem
  • 2qx- sets icon size that equals to 2.25 of $font-size-basewhere $font-size-base: 1rem
  • 2hx- sets icon size that equals to 2.5 of $font-size-basewhere $font-size-base: 1rem
  • 2tx- sets icon size that equals to 2.75 of $font-size-basewhere $font-size-base: 1rem
  • 3x- sets icon size that equals to 3 of $font-size-basewhere $font-size-base: 1rem
  • 3qx- sets icon size that equals to 3.25 of $font-size-basewhere $font-size-base: 1rem
  • 3hx- sets icon size that equals to 3.5 of $font-size-basewhere $font-size-base: 1rem
  • 3tx- sets icon size that equals to 3.75 of $font-size-basewhere $font-size-base: 1rem
  • 4x- sets icon size that equals to 4 of $font-size-basewhere $font-size-base: 1rem
  • 4qx- sets icon size that equals to 4.25 of $font-size-basewhere $font-size-base: 1rem
  • 4hx- sets icon size that equals to 4.5 of $font-size-basewhere $font-size-base: 1rem
  • 4tx- sets icon size that equals to 4.75 of $font-size-basewhere $font-size-base: 1rem
  • 5x- sets icon size that equals to 5 of $font-size-basewhere $font-size-base: 1rem
  • 5qx- sets icon size that equals to 5.25 of $font-size-basewhere $font-size-base: 1rem
  • 5hx- sets icon size that equals to 5.5 of $font-size-basewhere $font-size-base: 1rem
  • 5tx- sets icon size that equals to 5.75 of $font-size-basewhere $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, $iconClass = "", $svgClass = "") {
        $full_path = $path;
        if ( ! file_exists($path)) {
            return "<!-- SVG file not found: ".$path." -->";
        }

        $svg_content = file_get_contents($path);

        $dom = new DOMDocument();
        $dom->loadXML($svg_content);

        // remove unwanted comments
        $xpath = new DOMXPath($dom);
        foreach ($xpath->query("//comment()") as $comment) {
            $comment->parentNode->removeChild($comment);
        }

        // add class to svg
        if ( ! empty($svgClass)) {
            foreach ($dom->getElementsByTagName("svg") as $element) {
                $element->setAttribute("class", $svgClass);
            }
        }

        // remove unwanted tags
        $title = $dom->getElementsByTagName("title");
        if ($title["length"]) {
            $dom->documentElement->removeChild($title[0]);
        }

        $desc = $dom->getElementsByTagName("desc");
        if ($desc["length"]) {
            $dom->documentElement->removeChild($desc[0]);
        }

        $defs = $dom->getElementsByTagName("defs");
        if ($defs["length"]) {
            $dom->documentElement->removeChild($defs[0]);
        }

        // remove unwanted id attribute in g tag
        $g =  $dom->getElementsByTagName("g");
        foreach ($g as $el) {
            $el->removeAttribute("id");
        }

        $mask =  $dom->getElementsByTagName("mask");
        foreach ($mask as $el) {
            $el->removeAttribute("id");
        }

        $rect =  $dom->getElementsByTagName("rect");
        foreach ($rect as $el) {
            $el->removeAttribute("id");
        }

        $path =  $dom->getElementsByTagName("path");
        foreach ($path as $el) {
            $el->removeAttribute("id");
        }

        $circle =  $dom->getElementsByTagName("circle");
        foreach ($circle as $el) {
            $el->removeAttribute("id");
        }
        
        $use =  $dom->getElementsByTagName("use");
        foreach ($use as $el) {
            $el->removeAttribute("id");
        }

        $polygon =  $dom->getElementsByTagName("polygon");
        foreach ($polygon as $el) {
            $el->removeAttribute("id");
        }
        
        $ellipse =  $dom->getElementsByTagName("ellipse");
        foreach ($ellipse as $el) {
            $el->removeAttribute("id");
        }

        $string = $dom->saveXML($dom->documentElement);

        // remove empty lines
        $string = preg_replace("/(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+/", "\n", $string);

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

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

        return "<span class="" . implode(" ", $cls) . "">" . $string . "</span>";
    }
?>
Use getSvgIconfunction to embed an icon svg code from assetsfolder:
<?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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<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="black"/>
</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
gen026.svg
Use as Img Or inline SVG
gen037.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
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
txt008.svg
Use as Img Or inline SVG
txt002.svg
Use as Img Or inline SVG
txt001.svg
Use as Img Or inline SVG
txt005.svg
Use as Img Or inline SVG
txt009.svg
Use as Img Or inline SVG
txt003.svg
Use as Img Or inline SVG
txt006.svg
Use as Img Or inline SVG
txt010.svg
Use as Img Or inline SVG
txt007.svg
Use as Img Or inline SVG

Abstract

abs048.svg
Use as Img Or inline SVG
abs011.svg
Use as Img Or inline SVG
abs043.svg
Use as Img Or inline SVG
abs039.svg
Use as Img Or inline SVG
abs003.svg
Use as Img Or inline SVG
abs042.svg
Use as Img Or inline SVG
abs032.svg
Use as Img Or inline SVG
abs027.svg
Use as Img Or inline SVG
abs034.svg
Use as Img Or inline SVG
abs015.svg
Use as Img Or inline SVG
abs001.svg
Use as Img Or inline SVG
abs052.svg
Use as Img Or inline SVG
abs031.svg
Use as Img Or inline SVG
abs049.svg
Use as Img Or inline SVG
abs041.svg
Use as Img Or inline SVG
abs002.svg
Use as Img Or inline SVG
abs033.svg
Use as Img Or inline SVG
abs010.svg
Use as Img Or inline SVG
abs009.svg
Use as Img Or inline SVG
abs035.svg
Use as Img Or inline SVG
abs019.svg
Use as Img Or inline SVG
abs022.svg
Use as Img Or inline SVG
abs020.svg
Use as Img Or inline SVG
abs037.svg
Use as Img Or inline SVG
abs038.svg
Use as Img Or inline SVG
abs029.svg
Use as Img Or inline SVG
abs013.svg
Use as Img Or inline SVG
abs016.svg
Use as Img Or inline SVG
abs005.svg
Use as Img Or inline SVG
abs024.svg
Use as Img Or inline SVG