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

Map
Direction1.svg
Direction2.svg
Position.svg
Location-arrow.svg
Cooking
Kitchen-scale.svg
Fork-spoon.svg
Cooking-book.svg
Cooking-pot.svg
Frying-pan.svg
KnifeAndFork2.svg
Fork-spoon-knife.svg
KnifeAndFork1.svg
Rolling-pin.svg
Cutting board.svg
Saucepan.svg
Baking-glove.svg
Design
Horizontal.svg
Interselect.svg
Anchor-center.svg
Anchor-left-up.svg
Anchor-right.svg
ZoomMinus.svg
Flip-horizontal.svg
Anchor-left.svg
Component.svg
Substract.svg
Difference.svg
Bezier-curve.svg
Anchor-right-up.svg
Color-profile.svg
Rectangle.svg
ZoomPlus.svg
PenAndRuller.svg
Anchor-left-down.svg
Anchor-center-down.svg
Position.svg
Anchor-right-down.svg
Saturation.svg
Anchor-center-up.svg
Triangle.svg
Vertical.svg
Pen-tool-vector.svg
Flip-vertical.svg
Weather
Temperature-empty.svg
Night-fog.svg
Thunder-night.svg
Temperature-half.svg
Fahrenheit.svg
Night-rain.svg
Temperature-full.svg
Cloudy-night.svg
Cloud-sun.svg
Cloud-wind.svg
Cloud-fog.svg
Umbrella.svg
Day-rain.svg
Media
Repeat-one.svg
Volume-full.svg
Volume-up.svg
Media-library3.svg
Media-library2.svg