1 ) create the sprite.svg file 2 ) add the following code: <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> </defs> </svg> 3 ) given the following svg: <!-- Generated by IcoMoon.io --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <title>bookmark</title> <path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path> </svg> 4 ) copy its title and path with the viewBox information inside the defs tags of sprite.svg : <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-bookmark" viewBox="0 0 20 20"> <title>bookmark</title> <path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path> </symbol> </defs> </svg> 5) to use the sprite : example: <div class="user-nav__icon-box"> <svg class="user-nav__icon"> <use xlink:href="img/sprite.svg#icon-bookmark"></use> </svg> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter