Documentation v8.0.9

Overview

Use over 1000 high quality vector Stockholm SVG icons 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/duotone/Design/Adjust.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Code/Git3.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Communication/Chat2.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Design/Brush.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Design/Sketch.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Files/File-plus.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/General/Settings-2.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Tools/Tools.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Shopping/Chart-bar3.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/duotone/Design/Adjust.svg-->
<span class="svg-icon svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <path d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z" fill="#000000" fill-rule="nonzero"/>
</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/duotone/Design/Adjust.svg', 'svg-icon-2x svg-icon-success');
?>
The HTML output of the above PHP function call will be:
<!--begin::Svg Icon | path: icons/duotone/Design/Adjust.svg-->
<span class="svg-icon svg-icon-2x svg-icon-success"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <path d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z" fill="#000000" fill-rule="nonzero"/>
</svg></span>
<!--end::Svg Icon-->

Icons Listing

Clothes

Brassiere.svg
Briefcase.svg
Sneakers.svg
Sun-glasses.svg

Code

Backspace.svg
Compiling.svg
Done-circle.svg
Error-circle.svg
-
Github.svg
Info-circle.svg
Left-circle.svg
Lock-circle.svg
Lock-overturning.svg
Question-circle.svg
Right-circle.svg
Settings4.svg
Terminal.svg
Thunder-circle.svg
Time-schedule.svg
Warning-1-circle.svg
Warning-2.svg

Communication

Active-call.svg
Add-user.svg
Address-card.svg
Adress-book1.svg
Adress-book2.svg
Chat-check.svg
Chat-error.svg
Chat-locked.svg
Chat-smile.svg
Clipboard-check.svg
Clipboard-list.svg
Contact1.svg
Delete-user.svg
Dial-numbers.svg
Group-chat.svg
Incoming-box.svg
Incoming-call.svg
Incoming-mail.svg
Mail-attachment.svg
Mail-box.svg
Mail-error.svg
Mail-heart.svg
Mail-locked.svg
Mail-notification.svg
Mail-opened.svg
Mail-unocked.svg
Missed-call.svg
Outgoing-box.svg
Outgoing-call.svg
Outgoing-mail.svg
Readed-mail.svg
Reply-all.svg
Safe-chat.svg
Sending mail.svg
Shield-thunder.svg
Shield-user.svg
Snoozed-mail.svg
Thumbtack.svg
Urgent-mail.svg

Cooking

Baking-glove.svg
Cooking-book.svg
Cooking-pot.svg
Cutting board.svg
Fork-spoon-knife.svg
Fork-spoon.svg
Frying-pan.svg
Kitchen-scale.svg
KnifeAndFork1.svg
KnifeAndFork2.svg
Rolling-pin.svg
Saucepan.svg

Design

Anchor-center-down.svg
Anchor-center-up.svg
Anchor-center.svg
Anchor-left-down.svg
Anchor-left-up.svg
Anchor-left.svg
Anchor-right-down.svg
Anchor-right-up.svg
Anchor-right.svg
Bezier-curve.svg
Color-profile.svg
Component.svg
Difference.svg
Flip-horizontal.svg
Flip-vertical.svg
Horizontal.svg
Interselect.svg
Pen-tool-vector.svg
PenAndRuller.svg
Position.svg
Rectangle.svg
Saturation.svg
Substract.svg
Triangle.svg
Verified.svg
Vertical.svg
ZoomMinus.svg
ZoomPlus.svg

Devices

Apple-Watch.svg
Battery-charging.svg
Battery-empty.svg
Battery-full.svg
Battery-half.svg
Bluetooth.svg
Cardboard-vr.svg
Diagnostics.svg
Display1.svg
Display2.svg
Display3.svg
Gamepad1.svg
Gamepad2.svg
Generator.svg
Hard-drive.svg
Headphones.svg
iPhone-back.svg
iPhone-x-back.svg
iPhone-X.svg
Keyboard.svg
Laptop-macbook.svg
Usb-storage.svg
Video-camera.svg

Electric

Air-conditioning.svg
air-dryer.svg
Gas-stove.svg
Highvoltage.svg
Range-hood.svg
Shutdown.svg
Socket-eu.svg
Socket-us.svg

Files

Cloud-download.svg
Cloud-upload.svg
Compilation.svg
Compiled-file.svg
Deleted-file.svg
Deleted-folder.svg
Download.svg
DownloadedFile.svg
Downloads-folder.svg
File-cloud.svg
File-done.svg
File-minus.svg
File-plus.svg
Folder-check.svg
Folder-cloud.svg
Folder-error.svg
Folder-heart.svg
Folder-minus.svg
Folder-plus.svg
Folder-solid.svg
Folder-star.svg
Folder-thunder.svg
Group-folders.svg
Locked-folder.svg
Media-folder.svg
Pictures1.svg
Pictures2.svg
Protected-file.svg
Selected-file.svg
Upload-folder.svg
Uploaded-file.svg
User-folder.svg

Food

French Bread.svg
Glass-martini.svg
Ice-cream1.svg
Ice-cream2.svg
Miso-soup.svg
Two-bottles.svg

General

Attachment1.svg
Attachment2.svg
Binocular.svg
Bookmark.svg
Clipboard.svg
Duplicate.svg
Expand-arrows.svg
Half-heart.svg
Half-star.svg
Notification2.svg
Notifications1.svg
Scissors.svg
Settings-1.svg
Settings-2.svg
Settings-3.svg
Shield-check.svg
Shield-disabled.svg
Shield-protected.svg
Thunder-move.svg

Home

Air-ballon.svg
Alarm-clock.svg
Armchair.svg
Bag-chair.svg
Book-open.svg
Building.svg
Commode1.svg
Commode2.svg
Cupboard.svg
Curtains.svg
Door-open.svg
Fireplace.svg
Flashlight.svg
Home-heart.svg
Water-mixer.svg
Wood-horse.svg

Interface

Briefcase.svg
Calendar.svg
Close-Square.svg
Doughnut.svg
Envelope.svg
File-Plus.svg
File-Search.svg
File-Upload.svg
Grid-Horizontal.svg
Grid-Vetical.svg
Line-03-Down.svg
Line-03-Up.svg
Map-Marker.svg
Minus-Square.svg
Options-Square.svg
Plus-Square.svg
Scatter-Up.svg
Settings-02.svg
Sign-Out.svg
Stacked-Area-Down.svg

Layout

Layout-3d.svg
Layout-4-blocks-2.svg
Layout-4-blocks.svg
Layout-arrange.svg
Layout-grid.svg
Layout-horizontal.svg
Layout-left-panel-1.svg
Layout-left-panel-2.svg
Layout-octagon.svg
Layout-polygon.svg
Layout-right-panel-1.svg
Layout-right-panel-2.svg
Layout-top-panel-1.svg
Layout-top-panel-2.svg
Layout-top-panel-3.svg
Layout-top-panel-4.svg
Layout-top-panel-5.svg
Layout-top-panel-6.svg
Layout-vertical.svg

Map

Direction1.svg
Direction2.svg
Location-arrow.svg
Position.svg

Media

Add-music.svg
Airplay-video.svg
Backward.svg
Equalizer.svg
Media-library1.svg
Media-library2.svg
Media-library3.svg
Movie-lane1.svg
Movie-Lane2.svg
Music-cloud.svg
Music-note.svg
Playlist1.svg
Playlist2.svg
Repeat-one.svg
Volume-down.svg
Volume-full.svg
Volume-half.svg
Volume-up.svg

Navigation

Angle-double-down.svg
Angle-double-left.svg
Angle-double-right.svg
Angle-double-up.svg
Angle-down.svg
Angle-left.svg
Angle-right.svg
Angle-up.svg
Arrow-down.svg
Arrow-from-bottom.svg
Arrow-from-left.svg
Arrow-from-right.svg
Arrow-from-top.svg
Arrow-left.svg
Arrow-right.svg
Arrow-to-bottom.svg
Arrow-to-left.svg
Arrow-to-right.svg
Arrow-to-up.svg
Arrow-up.svg
Arrows-h.svg
Arrows-v.svg
Double-check.svg
Down-left.svg
Down-right.svg
Exchange.svg
Sign-out.svg
Up-right.svg

Shopping

Barcode-read.svg
Barcode-scan.svg
Calculator.svg
Chart-bar1.svg
Chart-bar2.svg
Chart-bar3.svg
Chart-line1.svg
Chart-line2.svg
Chart-pie.svg
Credit-card.svg
Settings.svg

Text

Align-auto.svg
Align-center.svg
Align-justify.svg
Align-left.svg
Align-right.svg
Bullet-list.svg
Edit-text.svg
Paragraph.svg
Strikethrough.svg
Text-height.svg
Text-width.svg
Toggle-Left.svg
Toggle-Right.svg
Underline.svg

Tools

Angle Grinder.svg
Road-Cone.svg
Roulette.svg
Screwdriver.svg
Swiss-knife.svg

Weather

Cloud-fog.svg
Cloud-sun.svg
Cloud-wind.svg
Cloudy-night.svg
Day-rain.svg
Fahrenheit.svg
Night-fog.svg
Night-rain.svg
Temperature-empty.svg
Temperature-full.svg
Temperature-half.svg
Thunder-night.svg
Umbrella.svg

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon