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

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