Logo
Stockholm-icons / Shopping / Cart3 Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Hi, Sean S

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