Ready to use SVG icons for the web.
Choose an icon. All you have to do is copy & paste the HTML code.
Don't forget to load the basic CSS file.
<svg class="svg-icon icon-refresh" width="20px" height="30px" viewBox="0 0 20 30">
<path fill="none" d="M15.439,23.783c-4.852,0-8.784-3.932-8.784-8.784c0-0.423,0.038-0.835,0.095-1.242l1.837,1.837
c0.358,0.358,0.939,0.358,1.298,0s0.358-0.939,0-1.298l-3.436-3.436c-0.186-0.186-0.43-0.271-0.673-0.264
c-0.244-0.007-0.488,0.078-0.674,0.264L0.79,14.297c-0.359,0.358-0.359,0.939,0,1.298c0.358,0.358,0.939,0.358,1.298,0l2
.989-2.381 C4.973,13.796,4.899,14.388,4.899,15c0,5.821,4.719,10.542,10.541,10.542c3.182,0,6.028-1.416,7.961-3.646l-1
.374-1.098 C20.418,22.623,18.066,23.783,15.439,23.783z M29.211,14.404c-0.358-0.358-0.939-0.358-1.298,0l-2.045,2.045
c0.068-0.474,0.112-0.957,0.112-1.45c0-5.822-4.72-10.541-10.541-10.541c-3.379,0-6.379,1.596-8.309,4.069l1.371,1.097
c1.608-2.072,4.113-3.41,6.938-3.41c4.852,0,8.784,3.932,8.784,8.784c0,0.522-0.058,1.03-0.145,1.528l-2.666-2.123
c-0.359-0.358-0.939-0.358-1.298,0c-0.359,0.359-0.359,0.939,0,1.298l4.312,3.436c0.187,0.184,0.431,0.27,0.675,0.262
c0.243,0.008,0.487-0.078,0.673-0.262l3.436-3.436C29.569,15.343,29.569,14.763,29.211,14.404z"/>
</svg>
<svg class="svg-icon icon-trash" width="20px" height="30px" viewBox="0 0 20 30">
<path fill="none" d="M10.83,12.498H9.162v10.009h1.668V12.498z M20.839,12.498h-1.668v10.009h1.668V12.498z M27.512,4.99h
V2.488c0-0.461-0.374-0.834-0.834-0.834h-6.673c-0.461,0-0.834,0.373-0.834,0.834V4.99H2.488c-0.461,0-0.834,0.373-0.834,0.834
c0,0.461,0.373,0.834,0.834,0.834h1.668v20.019c0,0.921,0.747,1.668,1.668,1.668h18.351c0.921,0,1.668-0.747,1.668-1.668V6.659
h1.668c0.461,0,0.834-0.373,0.834-0.834C28.346,5.363,27.973,4.99,27.512,4.99z M12.498,3.322h5.004V4.99h-5.004V3.322z
M24.176,25.844c0,0.461-0.374,0.834-0.834,0.834H6.659c-0.461,0-0.834-0.373-0.834-0.834V6.659h18.351V25.844z M15.834,10.829
h-1.668v11.678h1.668V10.829z"/>
</svg>
<svg class="svg-icon icon-dashboard" width="20px" height="30px" viewBox="0 0 20 30">
<path fill="none" d="M7.628,20.148v-0.234H7.454C7.507,19.996,7.572,20.068,7.628,20.148z M17.676,10.102
c-0.426-0.121-0.864,0.146-0.979,0.598l-1.925,7.599c-1.248,0.116-2.23,1.154-2.23,2.435c0,1.357,1.1,2.457,2.458,2.457
s2.457-1.1,2.457-2.457c0-0.865-0.449-1.622-1.125-2.06l1.909-7.537C18.355,10.687,18.103,10.223,17.676,10.102z
h-1.638v-1.638h1.638V21.552z M15,1.895C7.762,1.895,1.895,7.762,1.895,15c0,7.237,5.867,13.104,13.105,13.104
c7.237,0,13.104-5.867,13.104-13.104C28.104,7.762,22.237,1.895,15,1.895z M22.371,23.777v0.231h-0.294
c-1.949,1.534-4.403,2.458-7.077,2.458c-2.674,0-5.128-0.924-7.078-2.458H7.628v-0.231C5.126,21.674,3.533,18.523,3.533,15
C3.533,8.667,8.667,3.533,15,3.533c6.332,0,11.467,5.133,11.467,11.467C26.467,18.523,24.873,21.674,22.371,23.777z M22.371,20.148
c0.056-0.08,0.121-0.152,0.175-0.234h-0.175V20.148z M15,5.99c-4.976,0-9.01,4.034-9.01,9.01h1.638c0-4.071,3.3-7.372,7.372-7.372
s7.371,3.3,7.371,7.372h1.638C24.009,10.024,19.976,5.99,15,5.99z"/>
</svg>
/* -----
SVG Icons
----- */
@base: #4691f6;
.svg-icon {
path,
polygon,
rect {
fill: @base;
}
circle {
stroke: @base;
stroke-width: 1;
}
}
Available in LESS if you're that preprocessor guy.