This SVG sprite was created with Fontastic

icons reference

How to add SVG sprite icons to your project?

1
Upload the icons.svg file to your server. In our examples below we assume that the sprite file will be available at: http://yoursite.com/images/icons.svg

2
Go to "Icons Reference" and choose an icon that you want to have on your HTML page. Then click and copy its markup to your HTML page. For instance, the markup for a twitter icon could look like this:

<svg class="icon-twitter"><use xlink:href="#icon-twitter"></use></svg>

3
Now it's time to add the sprite file URL to the icon markup. In the example below, the URL is /images/icons.svg. So now the twitter icon markup could look like this:

<svg class="icon-twitter"><use xlink:href="/images/icons.svg#icon-twitter"></use></svg>

4
Add the code below to the CSS file that you use for your html page:

[class^="icon-"], [class*=" icon-"] {
    height: 32px;
    width: 32px;
    display: inline-block;
    fill: currentColor;
}

You can use height and width properties to control icon size. To define icon color use fill property. Note: currentColor keyword inherits the color value of a parent element.

5
For IE capability you can use a great polyfill: svg4everybody

Remember: with Icon Cloud you don't have to worry about IE capability, the sprite file and other stuff. We'll take care of all of that for you, just click the "Publish" button and give it a try.