Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

Base Examples

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

Stockholm-icons / Communication / Address-card Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Design / Component Created with Sketch. Stockholm-icons / Design / Substract Created with Sketch. Stockholm-icons / General / Settings-2 Created with Sketch.

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

Stockholm-icons / Communication / Address-card Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Design / Component Created with Sketch. Stockholm-icons / Design / Substract Created with Sketch. Stockholm-icons / General / Settings-2 Created with Sketch.

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

Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch. Stockholm-icons / Communication / Mail-heart Created with Sketch.

                        <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
Stockholm-icons / Map / Direction1 Created with Sketch.
Direction1.svg
Stockholm-icons / Map / Direction2 Created with Sketch.
Direction2.svg
Stockholm-icons / Map / Position Created with Sketch.
Position.svg
Stockholm-icons / Map / Marker1 Created with Sketch.
Marker1.svg
Stockholm-icons / Map / Location-arrow Created with Sketch.
Location-arrow.svg
Stockholm-icons / Map / Marker2 Created with Sketch.
Marker2.svg
Stockholm-icons / Map / Compass Created with Sketch.
Compass.svg
Cooking
Stockholm-icons / Cooking / Kitchen-scale Created with Sketch.
Kitchen-scale.svg
Stockholm-icons / Cooking / Fork-spoon Created with Sketch.
Fork-spoon.svg
Stockholm-icons / Cooking / Cooking-book Created with Sketch.
Cooking-book.svg
Stockholm-icons / Cooking / Cooking-pot Created with Sketch.
Cooking-pot.svg
Stockholm-icons / Cooking / Grater Created with Sketch.
Grater.svg
Stockholm-icons / Cooking / Frying-pan Created with Sketch.
Frying-pan.svg
Stockholm-icons / Cooking / Dish Created with Sketch.
Dish.svg
Stockholm-icons / Cooking / Knife1 Created with Sketch.
Knife1.svg
Stockholm-icons / Cooking / Knife&fork#2 Created with Sketch.
KnifeAndFork2.svg
Stockholm-icons / Cooking / Shovel Created with Sketch.
Shovel.svg
Stockholm-icons / Cooking / Ladle Created with Sketch.
Ladle.svg
Stockholm-icons / Cooking / Fork-spoon-knife Created with Sketch.
Fork-spoon-knife.svg
Stockholm-icons / Cooking / Fork Created with Sketch.
Fork.svg
Stockholm-icons / Cooking / Knife2 Created with Sketch.
Knife2.svg
Stockholm-icons / Cooking / Bowl Created with Sketch.
Bowl.svg
Stockholm-icons / Cooking / Knife&fork#1 Created with Sketch.
KnifeAndFork1.svg
Stockholm-icons / Cooking / Rolling-pin Created with Sketch.
Rolling-pin.svg
Stockholm-icons / Cooking / Dishes Created with Sketch.
Dishes.svg
Stockholm-icons / Cooking / Spoon Created with Sketch.
Spoon.svg
Stockholm-icons / Cooking / Sieve Created with Sketch.
Sieve.svg
Stockholm-icons / Cooking / Chef Created with Sketch.
Chef.svg
Stockholm-icons / Cooking / Cutting board Created with Sketch.
Cutting board.svg
Stockholm-icons / Cooking / Dinner Created with Sketch.
Dinner.svg
Stockholm-icons / Cooking / Saucepan Created with Sketch.
Saucepan.svg
Stockholm-icons / Cooking / Baking-glove Created with Sketch.
Baking-glove.svg
Design
Stockholm-icons / Design / Horizontal Created with Sketch.
Horizontal.svg
Stockholm-icons / Design / Interselect Created with Sketch.
Interselect.svg
Stockholm-icons / Design / Image Created with Sketch.
Image.svg
Stockholm-icons / Design / Brush Created with Sketch.
Brush.svg
Stockholm-icons / Design / Line Created with Sketch.
Line.svg
Stockholm-icons / Design / Anchor-center Created with Sketch.
Anchor-center.svg
Stockholm-icons / Design / Target Created with Sketch.
Target.svg
Stockholm-icons / Design / Color Created with Sketch.
Color.svg
Stockholm-icons / Design / Anchor-left-up Created with Sketch.
Anchor-left-up.svg
Stockholm-icons / Design / Anchor-right Created with Sketch.
Anchor-right.svg
Stockholm-icons / Design / ZoomMinus Created with Sketch.
ZoomMinus.svg
Stockholm-icons / Design / Flip-horizontal Created with Sketch.
Flip-horizontal.svg
Stockholm-icons / Design / Cap-3 Created with Sketch.
Cap-3.svg
Stockholm-icons / Design / Anchor-left Created with Sketch.
Anchor-left.svg
Stockholm-icons / Design / Eraser Created with Sketch.
Eraser.svg
Stockholm-icons / Design / Component Created with Sketch.
Component.svg
Stockholm-icons / Design / Cap-1 Created with Sketch.
Cap-1.svg
Stockholm-icons / Design / Picker Created with Sketch.
Picker.svg
Stockholm-icons / Design / Substract Created with Sketch.
Substract.svg
Stockholm-icons / Design / Difference Created with Sketch.
Difference.svg
Stockholm-icons / Design / Flatten Created with Sketch.
Flatten.svg
Stockholm-icons / Design / Stamp Created with Sketch.
Stamp.svg
Stockholm-icons / Design / Crop Created with Sketch.
Crop.svg
Stockholm-icons / Design / Bezier-curve Created with Sketch.
Bezier-curve.svg
Stockholm-icons / Design / Anchor-right-up Created with Sketch.
Anchor-right-up.svg
Stockholm-icons / Design / Polygon Created with Sketch.
Polygon.svg
Stockholm-icons / Design / Color-profile Created with Sketch.
Color-profile.svg
Stockholm-icons / Design / Rectangle Created with Sketch.
Rectangle.svg
Stockholm-icons / Design / Join-1 Created with Sketch.
Join-1.svg
Stockholm-icons / Design / ZoomPlus Created with Sketch.
ZoomPlus.svg
Stockholm-icons / Design / Border Created with Sketch.
Border.svg
Stockholm-icons / Design / Pen&ruller Created with Sketch.
PenAndRuller.svg
Stockholm-icons / Design / Anchor-left-down Created with Sketch.
Anchor-left-down.svg
Stockholm-icons / Design / Anchor-center-down Created with Sketch.
Anchor-center-down.svg
Stockholm-icons / Design / Pixels Created with Sketch.
Pixels.svg
Stockholm-icons / Design / Union Created with Sketch.
Union.svg
Stockholm-icons / Design / Position Created with Sketch.
Position.svg
Stockholm-icons / Design / Sketch Created with Sketch.
Sketch.svg
Stockholm-icons / Design / Anchor-right-down Created with Sketch.
Anchor-right-down.svg
Stockholm-icons / Design / Layers Created with Sketch.
Layers.svg
Stockholm-icons / Design / Saturation Created with Sketch.
Saturation.svg
Stockholm-icons / Design / Edit Created with Sketch.
Edit.svg
Stockholm-icons / Design / Select Created with Sketch.
Select.svg
Stockholm-icons / Design / Join-3 Created with Sketch.
Join-3.svg
Stockholm-icons / Design / Anchor-center-up Created with Sketch.
Anchor-center-up.svg
Stockholm-icons / Design / Bucket Created with Sketch.
Bucket.svg
Stockholm-icons / Design / Triangle Created with Sketch.
Triangle.svg
Stockholm-icons / Design / Vertical Created with Sketch.
Vertical.svg
Stockholm-icons / Design / Cap-2 Created with Sketch.
Cap-2.svg
Stockholm-icons / Design / Pencil Created with Sketch.
Pencil.svg
Stockholm-icons / Design / Magic Created with Sketch.
Magic.svg
Stockholm-icons / Design / Join-2 Created with Sketch.
Join-2.svg
Stockholm-icons / Design / Pen-tool-vector Created with Sketch.
Pen-tool-vector.svg
Stockholm-icons / Design / Adjust Created with Sketch.
Adjust.svg
Stockholm-icons / Design / Arrows Created with Sketch.
Arrows.svg
Stockholm-icons / Design / Flip-vertical Created with Sketch.
Flip-vertical.svg
Stockholm-icons / Design / Patch Created with Sketch.
Patch.svg
Stockholm-icons / Design / Mask Created with Sketch.
Mask.svg
Stockholm-icons / Design / Circle Created with Sketch.
Circle.svg
Weather
Stockholm-icons / Weather / Cloud1 Created with Sketch.
Cloud1.svg
Stockholm-icons / Weather / Sun-fog Created with Sketch.
Sun-fog.svg
Stockholm-icons / Weather / Rain2 Created with Sketch.
Rain2.svg
Stockholm-icons / Weather / Temperature-empty Created with Sketch.
Temperature-empty.svg
Stockholm-icons / Weather / Night-fog Created with Sketch.
Night-fog.svg
Stockholm-icons / Weather / Cloudy Created with Sketch.
Cloudy.svg
Stockholm-icons / Weather / Celcium Created with Sketch.
Celcium.svg
Stockholm-icons / Weather / Snow Created with Sketch.
Snow.svg
Stockholm-icons / Weather / Sun Created with Sketch.
Sun.svg
Stockholm-icons / Weather / Moon Created with Sketch.
Moon.svg
Stockholm-icons / Weather / Thunder-night Created with Sketch.
Thunder-night.svg
Stockholm-icons / Weather / Fog Created with Sketch.
Fog.svg
Stockholm-icons / Weather / Rain5 Created with Sketch.
Rain5.svg
Stockholm-icons / Weather / Temperature-half Created with Sketch.
Temperature-half.svg
Stockholm-icons / Weather / Fahrenheit Created with Sketch.
Fahrenheit.svg
Stockholm-icons / Weather / Suset1 Created with Sketch.
Suset1.svg
Stockholm-icons / Weather / Night-rain Created with Sketch.
Night-rain.svg
Stockholm-icons / Weather / Cloud2 Created with Sketch.
Cloud2.svg
Stockholm-icons / Weather / Temperature-full Created with Sketch.
Temperature-full.svg
Stockholm-icons / Weather / Cloudy-night Created with Sketch.
Cloudy-night.svg
Stockholm-icons / Weather / Suset2 Created with Sketch.
Suset2.svg
Stockholm-icons / Weather / Thunder Created with Sketch.
Thunder.svg
Stockholm-icons / Weather / Cloud-sun Created with Sketch.
Cloud-sun.svg
Stockholm-icons / Weather / Snow1 Created with Sketch.
Snow1.svg
Stockholm-icons / Weather / Rainbow Created with Sketch.
Rainbow.svg
Stockholm-icons / Weather / Cloud-wind Created with Sketch.
Cloud-wind.svg
Stockholm-icons / Weather / Rain1 Created with Sketch.
Rain1.svg
Stockholm-icons / Weather / Cloud-fog Created with Sketch.
Cloud-fog.svg
Stockholm-icons / Weather / Umbrella Created with Sketch.
Umbrella.svg
Stockholm-icons / Weather / Day-rain Created with Sketch.
Day-rain.svg
Stockholm-icons / Weather / Snow3 Created with Sketch.
Snow3.svg
Stockholm-icons / Weather / Storm Created with Sketch.
Storm.svg
Stockholm-icons / Weather / Wind Created with Sketch.
Wind.svg
Stockholm-icons / Weather / Snow2 Created with Sketch.
Snow2.svg
Media
Stockholm-icons / Media / Rec Created with Sketch.
Rec.svg
Stockholm-icons / Media / Repeat-one Created with Sketch.
Repeat-one.svg
Stockholm-icons / Media / Repeat Created with Sketch.
Repeat.svg
Stockholm-icons / Media / Shuffle Created with Sketch.
Shuffle.svg
Stockholm-icons / Media / Volume-full Created with Sketch.
Volume-full.svg
Stockholm-icons / Media / Volume-up Created with Sketch.
Volume-up.svg
Stockholm-icons / Media / Eject Created with Sketch.
Eject.svg
Stockholm-icons / Media / DVD Created with Sketch.
DVD.svg
Stockholm-icons / Media / Media-library3 Created with Sketch.
Media-library3.svg
Stockholm-icons / Media / Media-library2 Created with Sketch.
Media-library2.svg
Stockholm-icons / Media / Play Created with Sketch.
Play.svg
Stockholm-icons / Media / CD Created with Sketch.
CD.svg
Stockholm-icons / Media / Youtube Created with Sketch.
Youtube.svg
Stockholm-icons / Media / Music Created with Sketch.
Music.svg
Stockholm-icons / Media / Pause Created with Sketch.
Pause.svg
Stockholm-icons / Media / Airplay Created with Sketch.
Airplay.svg
Stockholm-icons / Media / Back Created with Sketch.
Back.svg
Stockholm-icons / Media / Equalizer Created with Sketch.
Equalizer.svg
Stockholm-icons / Media / Volume-half Created with Sketch.
Volume-half.svg
Stockholm-icons / Media / Vynil Created with Sketch.
Vynil.svg
Stockholm-icons / Media / Movie-lane1 Created with Sketch.
Movie-lane1.svg
Stockholm-icons / Media / Movie-Lane2 Created with Sketch.
Movie-Lane2.svg