Logo

Base Examples

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


                        <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

Clothes
Brassiere.svg
Briefcase.svg
Sneakers.svg
Sun-glasses.svg
Code
Backspace.svg
Compiling.svg
Done-circle.svg
Error-circle.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
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#3.svg
Settings-1.svg
Settings-2.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
Layout
Layout-3d.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-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
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
Angle-up.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
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

User Profile 12 messages

James Jones
Application Developer
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%

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

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