Documentation v8.0.25

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 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="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

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

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

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.25

Overview

Image Usage

Inline Usage

Icon Colors

Icon Sizes

Server Side Helper

Icons Listing

Abstract

Arrows

Art

Coding

Communication

Ecommerce

Electronics

Files

Finance

General

Graphs

Layouts

Maps

Medicine

Social

Technology

Text

Explore Metronic

Metronic Licenses

Metronic Demos

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.25

No result found

Overview

Image Usage

Inline Usage

Icon Colors

Icon Sizes

Server Side Helper

Icons Listing

Abstract

Arrows