Become a member
to unlock all features

    Add an SVG Sprite as a Background Image

    htmlHTML 5

    Learn how to use an SVG sprite to display your icons. Sprites are great because they add only a single HTTP request, are easy to add to markup and can be sized easily with the help of the background-size property.

    This is a good option if you know the icons aren’t going to change much and you don’t mind manually editing the SVG sprite.

    However, adding/editing icons once a sprite is created is cumbersome to do by hand, because you have to know the size and position of each icon and modify accordingly.