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