Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    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.