Generating sprite.png for icons

IcoMoon app lets you build and use your own icon packs in many different formats. It is free and can be accessed on https://icomoon.io/ Click on the IcoMoon App button on top right, and you'll access the application.

Click on the icons you wish to generate a sprite map from. The app will remember what you picked and you can see the list using **Selection Button **at bottom.

Once you are happy with your selection, click Generate SVG & More button at bottom left. The application will take you to a summary page where you can see the complete list of your selection, but the Generate button is now changed to Download. Click on the Download

You will receive a zip file including PNG, SVG files depending on your choice. Important file is symbol-defs.svg which is your sprite map, including all the icons in SVG format. Save this file under an accessible path under next to your assets, say /images/sprite.svg

In a sprite map you can access icons using their names after # sign For example; to use the envelope icon use the following markup:

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

SVG is a commonly used format, but some old browsers may have problems displaying it. For this reason, your zip file also has a helper javascript file svgxuse.js (https://github.com/Keyamoon/svgxuse) It is a light polyfill that fetches external SVGs referenced in use elements when the browser itself fails to do so.