Logo

Base Examples

In order to customize svg icon colors use inline svg code inside .svg-icon container.


                        <span class="svg-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M6,2 L18,2 C19.6568542,2 21,3.34314575 21,5 L21,19 C21,20.6568542 19.6568542,22 18,22 L6,22 C4.34314575,22 3,20.6568542 3,19 L3,5 C3,3.34314575 4.34314575,2 6,2 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M7.00036205,16.4995035 C6.98863236,16.6619875 7.26484009,17 7.4041679,17 C11.463736,17 14.5228466,17 16.5815,17 C16.9988413,17 17.0053266,16.6221713 16.9988413,16.5 C16.8360465,13.4332455 14.6506758,12 11.9907452,12 C9.36772908,12 7.21569918,13.5165724 7.00036205,16.4995035 Z" fill="#000000"/>
                                </g>
                            </svg>
                        </span>
                        

Color Options

Use .svg-icon-{light|secondary|success|info|primary|warning|danger|white|dark|dark-75|dark-50|dark-25} to set color for SVG icons.


                        <span class="svg-icon svg-icon-success">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <rect x="0" y="0" width="24" height="24"/>
                                    <path d="M6,2 L18,2 C19.6568542,2 21,3.34314575 21,5 L21,19 C21,20.6568542 19.6568542,22 18,22 L6,22 C4.34314575,22 3,20.6568542 3,19 L3,5 C3,3.34314575 4.34314575,2 6,2 Z M12,11 C13.1045695,11 14,10.1045695 14,9 C14,7.8954305 13.1045695,7 12,7 C10.8954305,7 10,7.8954305 10,9 C10,10.1045695 10.8954305,11 12,11 Z M7.00036205,16.4995035 C6.98863236,16.6619875 7.26484009,17 7.4041679,17 C11.463736,17 14.5228466,17 16.5815,17 C16.9988413,17 17.0053266,16.6221713 16.9988413,16.5 C16.8360465,13.4332455 14.6506758,12 11.9907452,12 C9.36772908,12 7.21569918,13.5165724 7.00036205,16.4995035 Z" fill="#000000"/>
                                </g>
                            </svg>
                        </span>
                        

Sizes

Change icon size using .svg-icon-{size} classes.


                        <span class="svg-icon svg-icon-sm">...</span>
                        <span class="svg-icon svg-icon-md">...</span>
                        <span class="svg-icon svg-icon-lg">...</span>
                        <span class="svg-icon svg-icon-xl">...</span>
                        <span class="svg-icon svg-icon-2x">...</span>
                        <span class="svg-icon svg-icon-3x">...</span>
                        <span class="svg-icon svg-icon-4x">...</span>
                        <span class="svg-icon svg-icon-5x">...</span>
                        <span class="svg-icon svg-icon-6x">...</span>
                        <span class="svg-icon svg-icon-7x">...</span>
                        <span class="svg-icon svg-icon-8x">...</span>
                        <span class="svg-icon svg-icon-9x">...</span>
                        <span class="svg-icon svg-icon-10x">...</span>
                        

Integration

Use SVG icons as image.


                        <img src="<?php echo Page::getMediaPath();?>svg/icons/Clothes/Cap.svg" alt=""/>
                        

You can use SVG icons with any element within Metronic.


                        <a href="#" class="btn btn-success font-weight-bold mr-2">
                            <span class="svg-icon">...</span> Button example
                        </a>

                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">
                            <span class="svg-icon">...</span> Button example 2
                        </a>

                        <div class="dropdown dropdown-inline">
                            <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <span class="svg-icon">...</span> Dropdown example
                            </a>
                            <div class="dropdown-menu dropdown-menu-md py-5" style="">
                                <ul class="navi navi-hover navi-link-rounded-lg">
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><span class="svg-icon svg-icon-danger">...</span></span>
                                            <span class="navi-text">Messages</span>
                                            <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><span class="svg-icon svg-icon-warning">...</span></i></span>
                                            <span class="navi-text">Settings</span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><span class="svg-icon svg-icon-success">...</span></span>
                                            <span class="navi-text">Tasks</span>
                                            <span class="navi-label">
                                                <span class="label label-warning label-rounded">5</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="navi-item">
                                        <a class="navi-link" href="#">
                                            <span class="navi-icon"><span class="svg-icon svg-icon-primary">...</span></span>
                                            <span class="navi-text">Orders</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        

SVG Icons

Weather
Night-rain.svg
Cloud-fog.svg
Night-fog.svg
Temperature-half.svg
Cloud-wind.svg
Temperature-full.svg
Fahrenheit.svg
Temperature-empty.svg
Thunder-night.svg
Day-rain.svg
Cloud-sun.svg
Umbrella.svg
Cloudy-night.svg
Home
Fireplace.svg
Home-heart.svg
Building.svg
Alarm-clock.svg
Curtains.svg
Commode1.svg
Flashlight.svg
Air-ballon.svg
Wood-horse.svg
Commode2.svg
Book-open.svg
Armchair.svg
Cupboard.svg
Bag-chair.svg
Water-mixer.svg
Door-open.svg
Cooking
Baking-glove.svg
Rolling-pin.svg
Cooking-book.svg
Saucepan.svg
Fork-spoon-knife.svg
KnifeAndFork2.svg
Cutting board.svg
Fork-spoon.svg
Cooking-pot.svg
Frying-pan.svg
Kitchen-scale.svg
KnifeAndFork1.svg
Design
Color-profile.svg
Triangle.svg
ZoomPlus.svg
Pen-tool-vector.svg
Vertical.svg
Anchor-right.svg
Difference.svg
ZoomMinus.svg
Position.svg
Interselect.svg
Anchor-center.svg
Anchor-right-down.svg
Anchor-left-up.svg
Anchor-left-down.svg
Horizontal.svg
PenAndRuller.svg
Flip-horizontal.svg
Anchor-right-up.svg
Flip-vertical.svg
Anchor-center-up.svg
Substract.svg
Saturation.svg
Anchor-center-down.svg
Rectangle.svg
Anchor-left.svg
Component.svg
Bezier-curve.svg
Files
Media-folder.svg
Cloud-upload.svg
Downloads-folder.svg
Upload-folder.svg
File-cloud.svg
User-folder.svg
Folder-star.svg
Pictures1.svg
Folder-minus.svg
DownloadedFile.svg
Folder-heart.svg
Selected-file.svg
Folder-check.svg
Compilation.svg
Pictures2.svg
File-plus.svg
Deleted-file.svg
File-done.svg
Download.svg
Folder-solid.svg
Folder-error.svg
Folder-thunder.svg
Protected-file.svg
Cloud-download.svg
Folder-cloud.svg
Deleted-folder.svg
Uploaded-file.svg
Group-folders.svg
Compiled-file.svg
File-minus.svg
Locked-folder.svg
Folder-plus.svg
Media
Playlist1.svg
Repeat-one.svg
Movie-lane1.svg
Add-music.svg
Airplay-video.svg
Media-library1.svg
Music-note.svg
Volume-full.svg
Music-cloud.svg
Equalizer.svg
Volume-down.svg
Volume-half.svg
Media-library2.svg
Volume-up.svg
Backward.svg
Movie-Lane2.svg
Playlist2.svg
Media-library3.svg
Food
Miso-soup.svg
Two-bottles.svg
Ice-cream2.svg
Ice-cream1.svg
Glass-martini.svg
French Bread.svg
Shopping
Chart-line2.svg
Settings.svg
Barcode-scan.svg
Chart-bar3.svg
Calculator.svg
Chart-pie.svg
Chart-bar1.svg
Chart-line1.svg
Chart-bar2.svg
Barcode-read.svg
Credit-card.svg
General
Shield-check.svg
Half-star.svg
Notifications1.svg
Clipboard.svg
Attachment2.svg
Shield-protected.svg
Notification2.svg
Attachment1.svg
Expand-arrows.svg
Bookmark.svg
Half-heart.svg
Shield-disabled.svg
Thunder-move.svg
Duplicate.svg
Settings#3.svg
Settings-1.svg
Settings-2.svg
Scissors.svg
Binocular.svg
Communication
Outgoing-mail.svg
Shield-user.svg
Mail-notification.svg
Sending mail.svg
Add-user.svg
Dial-numbers.svg
Contact1.svg
Missed-call.svg
Outgoing-call.svg
Mail-box.svg
Safe-chat.svg
Mail-opened.svg
Chat-locked.svg
Readed-mail.svg
Adress-book2.svg
Chat-check.svg
Mail-unocked.svg
Address-card.svg
Thumbtack.svg
Chat-smile.svg
Clipboard-list.svg
Adress-book1.svg
Incoming-call.svg
Group-chat.svg
Clipboard-check.svg
Mail-locked.svg
Incoming-box.svg
Urgent-mail.svg
Mail-heart.svg
Shield-thunder.svg
Outgoing-box.svg
Incoming-mail.svg
Mail-attachment.svg
Chat-error.svg
Active-call.svg
Delete-user.svg
Snoozed-mail.svg
Mail-error.svg
Reply-all.svg
Navigation
Arrow-from-top.svg
Arrow-from-left.svg
Angle-up.svg
Arrows-v.svg
Arrow-to-right.svg
Down-left.svg
Arrow-to-left.svg
Angle-double-left.svg
Angle-down.svg
Arrow-to-up.svg
Double-check.svg
Arrow-up.svg
Angle-double-right.svg
Exchange.svg
Arrow-from-bottom.svg
Arrow-left.svg
Angle-left.svg
Angle-double-down.svg
Arrow-to-bottom.svg
Arrows-h.svg
Angle-right.svg
Arrow-from-right.svg
Arrow-right.svg
Angle-double-up.svg
Sign-out.svg
Down-right.svg
Arrow-down.svg
Up-right.svg
Map
Direction2.svg
Position.svg
Direction1.svg
Location-arrow.svg
Layout
Layout-grid.svg
Layout-top-panel-1.svg
Layout-top-panel-6.svg
Layout-right-panel-1.svg
Layout-vertical.svg
Layout-left-panel-1.svg
Layout-top-panel-4.svg
Layout-right-panel-2.svg
Layout-top-panel-5.svg
Layout-4-blocks.svg
Layout-3d.svg
Layout-top-panel-2.svg
Layout-top-panel-3.svg
Layout-horizontal.svg
Layout-left-panel-2.svg
Layout-arrange.svg
Electric
Socket-eu.svg
Range-hood.svg
air-dryer.svg
Highvoltage.svg
Shutdown.svg
Gas-stove.svg
Socket-us.svg
Air-conditioning.svg
Devices
Display2.svg
Gamepad2.svg
Generator.svg
Battery-half.svg
Battery-empty.svg
Hard-drive.svg
Battery-full.svg
Usb-storage.svg
iPhone-X.svg
Gamepad1.svg
Video-camera.svg
Display1.svg
Headphones.svg
Bluetooth.svg
Laptop-macbook.svg
Display3.svg
Apple-Watch.svg
Keyboard.svg
iPhone-back.svg
iPhone-x-back.svg
Cardboard-vr.svg
Diagnostics.svg
Battery-charging.svg
Clothes
Brassiere.svg
Sun-glasses.svg
Briefcase.svg
Sneakers.svg
Tools
Swiss-knife.svg
Roulette.svg
Angle Grinder.svg
Screwdriver.svg
Road-Cone.svg
Text
Align-justify.svg
Paragraph.svg
Underline.svg
Text-height.svg
Text-width.svg
Align-center.svg
Align-auto.svg
Align-right.svg
Edit-text.svg
Align-left.svg
Strikethrough.svg
Bullet-list.svg
Code
Lock-circle.svg
Info-circle.svg
Compiling.svg
Lock-overturning.svg
Warning-1-circle.svg
Error-circle.svg
Thunder-circle.svg
Right-circle.svg
Left-circle.svg
Question-circle.svg
Settings4.svg
Backspace.svg
Done-circle.svg
Time-schedule.svg
Warning-2.svg
Terminal.svg

User Profile 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30