Logo Logo

Documentation v8.0.38

  • Icons
  • Duotune Exclusive
Preview Downloads Purchase

Overview

Exclusive 400+ high quality vector SVG icon set by Keenthemes. Use them as image or inline SVG element in combination with any Metronic 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

Abstract

abs001.svg
Use as Img Or inline SVG
abs002.svg
Use as Img Or inline SVG
abs003.svg
Use as Img Or inline SVG
abs004.svg
Use as Img Or inline SVG
abs005.svg
Use as Img Or inline SVG
abs006.svg
Use as Img Or inline SVG
abs007.svg
Use as Img Or inline SVG
abs008.svg
Use as Img Or inline SVG
abs009.svg
Use as Img Or inline SVG
abs010.svg
Use as Img Or inline SVG
abs011.svg
Use as Img Or inline SVG
abs012.svg
Use as Img Or inline SVG
abs013.svg
Use as Img Or inline SVG
abs014.svg
Use as Img Or inline SVG
abs015.svg
Use as Img Or inline SVG
abs016.svg
Use as Img Or inline SVG
abs017.svg
Use as Img Or inline SVG
abs018.svg
Use as Img Or inline SVG
abs019.svg
Use as Img Or inline SVG
abs020.svg
Use as Img Or inline SVG
abs021.svg
Use as Img Or inline SVG
abs022.svg
Use as Img Or inline SVG
abs023.svg
Use as Img Or inline SVG
abs024.svg
Use as Img Or inline SVG
abs025.svg
Use as Img Or inline SVG
abs026.svg
Use as Img Or inline SVG
abs027.svg
Use as Img Or inline SVG
abs028.svg
Use as Img Or inline SVG
abs029.svg
Use as Img Or inline SVG
abs030.svg
Use as Img Or inline SVG
abs031.svg
Use as Img Or inline SVG
abs032.svg
Use as Img Or inline SVG
abs033.svg
Use as Img Or inline SVG
abs034.svg
Use as Img Or inline SVG
abs035.svg
Use as Img Or inline SVG
abs036.svg
Use as Img Or inline SVG
abs037.svg
Use as Img Or inline SVG
abs038.svg
Use as Img Or inline SVG
abs039.svg
Use as Img Or inline SVG
abs040.svg
Use as Img Or inline SVG
abs041.svg
Use as Img Or inline SVG
abs042.svg
Use as Img Or inline SVG
abs043.svg
Use as Img Or inline SVG
abs044.svg
Use as Img Or inline SVG
abs045.svg
Use as Img Or inline SVG
abs046.svg
Use as Img Or inline SVG
abs047.svg
Use as Img Or inline SVG
abs048.svg
Use as Img Or inline SVG
abs049.svg
Use as Img Or inline SVG
abs050.svg
Use as Img Or inline SVG
abs051.svg
Use as Img Or inline SVG
abs052.svg
Use as Img Or inline SVG

Arrows

arr001.svg
Use as Img Or inline SVG
arr002.svg
Use as Img Or inline SVG
arr003.svg
Use as Img Or inline SVG
arr004.svg
Use as Img Or inline SVG
arr005.svg
Use as Img Or inline SVG
arr006.svg
Use as Img Or inline SVG
arr007.svg
Use as Img Or inline SVG
arr008.svg
Use as Img Or inline SVG
arr009.svg
Use as Img Or inline SVG
arr010.svg
Use as Img Or inline SVG
arr011.svg
Use as Img Or inline SVG
arr012.svg
Use as Img Or inline SVG
arr013.svg
Use as Img Or inline SVG
arr014.svg
Use as Img Or inline SVG
arr015.svg
Use as Img Or inline SVG
arr016.svg
Use as Img Or inline SVG
arr017.svg
Use as Img Or inline SVG
arr018.svg
Use as Img Or inline SVG
arr019.svg
Use as Img Or inline SVG
arr020.svg
Use as Img Or inline SVG
arr021.svg
Use as Img Or inline SVG
arr022.svg
Use as Img Or inline SVG
arr023.svg
Use as Img Or inline SVG
arr024.svg
Use as Img Or inline SVG
arr025.svg
Use as Img Or inline SVG
arr026.svg
Use as Img Or inline SVG
arr027.svg
Use as Img Or inline SVG
arr028.svg
Use as Img Or inline SVG
arr029.svg
Use as Img Or inline SVG
arr030.svg
Use as Img Or inline SVG
arr031.svg
Use as Img Or inline SVG
arr032.svg
Use as Img Or inline SVG
arr033.svg
Use as Img Or inline SVG
arr034.svg
Use as Img Or inline SVG
arr035.svg
Use as Img Or inline SVG
arr036.svg
Use as Img Or inline SVG
arr037.svg
Use as Img Or inline SVG
arr038.svg
Use as Img Or inline SVG
arr039.svg
Use as Img Or inline SVG
arr040.svg
Use as Img Or inline SVG
arr041.svg
Use as Img Or inline SVG
arr042.svg
Use as Img Or inline SVG
arr043.svg
Use as Img Or inline SVG
arr044.svg
Use as Img Or inline SVG
arr045.svg
Use as Img Or inline SVG
arr046.svg
Use as Img Or inline SVG
arr047.svg
Use as Img Or inline SVG
arr048.svg
Use as Img Or inline SVG
arr049.svg
Use as Img Or inline SVG
arr050.svg
Use as Img Or inline SVG
arr051.svg
Use as Img Or inline SVG
arr052.svg
Use as Img Or inline SVG
arr053.svg
Use as Img Or inline SVG
arr054.svg
Use as Img Or inline SVG
arr055.svg
Use as Img Or inline SVG
arr056.svg
Use as Img Or inline SVG
arr057.svg
Use as Img Or inline SVG
arr058.svg
Use as Img Or inline SVG
arr059.svg
Use as Img Or inline SVG
arr060.svg
Use as Img Or inline SVG
arr061.svg
Use as Img Or inline SVG
arr062.svg
Use as Img Or inline SVG
arr063.svg
Use as Img Or inline SVG
arr064.svg
Use as Img Or inline SVG
arr065.svg
Use as Img Or inline SVG
arr066.svg
Use as Img Or inline SVG
arr067.svg
Use as Img Or inline SVG
arr068.svg
Use as Img Or inline SVG
arr069.svg
Use as Img Or inline SVG
arr070.svg
Use as Img Or inline SVG
arr071.svg
Use as Img Or inline SVG
arr072.svg
Use as Img Or inline SVG
arr073.svg
Use as Img Or inline SVG
arr074.svg
Use as Img Or inline SVG
arr075.svg
Use as Img Or inline SVG
arr076.svg
Use as Img Or inline SVG
arr077.svg
Use as Img Or inline SVG
arr078.svg
Use as Img Or inline SVG
arr079.svg
Use as Img Or inline SVG
arr080.svg
Use as Img Or inline SVG
arr081.svg
Use as Img Or inline SVG
arr082.svg
Use as Img Or inline SVG
arr084.svg
Use as Img Or inline SVG
arr085.svg
Use as Img Or inline SVG
arr086.svg
Use as Img Or inline SVG
arr087.svg
Use as Img Or inline SVG
arr088.svg
Use as Img Or inline SVG
arr089.svg
Use as Img Or inline SVG
arr090.svg
Use as Img Or inline SVG
arr091.svg
Use as Img Or inline SVG
arr092.svg
Use as Img Or inline SVG
arr093.svg
Use as Img Or inline SVG
arr094.svg
Use as Img Or inline SVG
arr095.svg
Use as Img Or inline SVG

Art

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

Coding

cod001.svg
Use as Img Or inline SVG
cod002.svg
Use as Img Or inline SVG
cod003.svg
Use as Img Or inline SVG
cod004.svg
Use as Img Or inline SVG
cod005.svg
Use as Img Or inline SVG
cod006.svg
Use as Img Or inline SVG
cod007.svg
Use as Img Or inline SVG
cod008.svg
Use as Img Or inline SVG
cod009.svg
Use as Img Or inline SVG
cod010.svg
Use as Img Or inline SVG

Communication

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

Ecommerce

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

Electronics

elc001.svg
Use as Img Or inline SVG
elc002.svg
Use as Img Or inline SVG
elc003.svg
Use as Img Or inline SVG
elc004.svg
Use as Img Or inline SVG
elc005.svg
Use as Img Or inline SVG
elc006.svg
Use as Img Or inline SVG
elc007.svg
Use as Img Or inline SVG
elc008.svg
Use as Img Or inline SVG
elc009.svg
Use as Img Or inline SVG
elc010.svg
Use as Img Or inline SVG

Files

fil001.svg
Use as Img Or inline SVG
fil002.svg
Use as Img Or inline SVG
fil003.svg
Use as Img Or inline SVG
fil004.svg
Use as Img Or inline SVG
fil005.svg
Use as Img Or inline SVG
fil006.svg
Use as Img Or inline SVG
fil007.svg
Use as Img Or inline SVG
fil008.svg
Use as Img Or inline SVG
fil009.svg
Use as Img Or inline SVG
fil010.svg
Use as Img Or inline SVG
fil011.svg
Use as Img Or inline SVG
fil012.svg
Use as Img Or inline SVG
fil013.svg
Use as Img Or inline SVG
fil014.svg
Use as Img Or inline SVG
fil015.svg
Use as Img Or inline SVG
fil016.svg
Use as Img Or inline SVG
fil017.svg
Use as Img Or inline SVG
fil018.svg
Use as Img Or inline SVG
fil019.svg
Use as Img Or inline SVG
fil020.svg
Use as Img Or inline SVG
fil021.svg
Use as Img Or inline SVG
fil022.svg
Use as Img Or inline SVG
fil023.svg
Use as Img Or inline SVG
fil024.svg
Use as Img Or inline SVG
fil025.svg
Use as Img Or inline SVG

Finance

fin001.svg
Use as Img Or inline SVG
fin002.svg
Use as Img Or inline SVG
fin003.svg
Use as Img Or inline SVG
fin004.svg
Use as Img Or inline SVG
fin005.svg
Use as Img Or inline SVG
fin006.svg
Use as Img Or inline SVG
fin007.svg
Use as Img Or inline SVG
fin008.svg
Use as Img Or inline SVG
fin009.svg
Use as Img Or inline SVG
fin010.svg
Use as Img Or inline SVG

General

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

Graphs

gra001.svg
Use as Img Or inline SVG
gra002.svg
Use as Img Or inline SVG
gra003.svg
Use as Img Or inline SVG
gra004.svg
Use as Img Or inline SVG
gra005.svg
Use as Img Or inline SVG
gra006.svg
Use as Img Or inline SVG
gra007.svg
Use as Img Or inline SVG
gra008.svg
Use as Img Or inline SVG
gra009.svg
Use as Img Or inline SVG
gra010.svg
Use as Img Or inline SVG
gra011.svg
Use as Img Or inline SVG
gra012.svg
Use as Img Or inline SVG

Layouts

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

Maps

map001.svg
Use as Img Or inline SVG
map002.svg
Use as Img Or inline SVG
map003.svg
Use as Img Or inline SVG
map004.svg
Use as Img Or inline SVG
map005.svg
Use as Img Or inline SVG
map006.svg
Use as Img Or inline SVG
map007.svg
Use as Img Or inline SVG
map008.svg
Use as Img Or inline SVG
map009.svg
Use as Img Or inline SVG
map010.svg
Use as Img Or inline SVG

Medicine

med001.svg
Use as Img Or inline SVG
med002.svg
Use as Img Or inline SVG
med003.svg
Use as Img Or inline SVG
med004.svg
Use as Img Or inline SVG
med005.svg
Use as Img Or inline SVG
med006.svg
Use as Img Or inline SVG
med007.svg
Use as Img Or inline SVG
med008.svg
Use as Img Or inline SVG
med009.svg
Use as Img Or inline SVG
med010.svg
Use as Img Or inline SVG

Social

soc001.svg
Use as Img Or inline SVG
soc002.svg
Use as Img Or inline SVG
soc003.svg
Use as Img Or inline SVG
soc004.svg
Use as Img Or inline SVG
soc005.svg
Use as Img Or inline SVG
soc006.svg
Use as Img Or inline SVG
soc007.svg
Use as Img Or inline SVG
soc008.svg
Use as Img Or inline SVG
soc009.svg
Use as Img Or inline SVG
soc010.svg
Use as Img Or inline SVG

Technology

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

Text

txt001.svg
Use as Img Or inline SVG
txt002.svg
Use as Img Or inline SVG
txt003.svg
Use as Img Or inline SVG
txt004.svg
Use as Img Or inline SVG
txt005.svg
Use as Img Or inline SVG
txt006.svg
Use as Img Or inline SVG
txt007.svg
Use as Img Or inline SVG
txt008.svg
Use as Img Or inline SVG
txt009.svg
Use as Img Or inline SVG
txt010.svg
Use as Img Or inline SVG

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

Metronic Demos

demo
Demo 1
demo
Demo 2
demo
Demo 3
demo
Demo 4
demo
Demo 5
demo
Demo 6
demo
Demo 7
demo
Demo 8
demo
Demo 9
demo
Demo 10
demo
Demo 11
demo
Demo 12
demo
Demo 13
demo
Demo 14
demo
Demo 15
demo
Demo 16
demo
Demo 17
demo
Demo 18
demo
Demo 19
demo
Demo 20
demo
Demo 21
demo
Demo 22
demo
Coming soon
demo
Coming soon
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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now