Documentation v1.0.4

Preview Purchase

Overview

Exclusive 400+ high quality vector SVG icon set by Keenthemes. Use them as image or inline SVG element in combination with any Good 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="currentColor"/>
</svg></span>
<!--end::Svg 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>

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="currentColor"/>
</svg></span>
<!--end::Svg Icon-->

Icons Listing

Maps

Abstract

Ecommerce

Technology

General

Art

Electronics

Social

Layouts

Medicine

Files

Finance

Coding

Arrows

Graphs

Text

Communication

Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now