CSS Sprites are mostly related to creating icons for a site or an app. It is also commonly used for animations in games. Here, we'll cover icons.
They combine all icons into one image file. And different icons are referenced by either their pixel position using
background-position property or by the svg
Normally, we use icons delivered via CDNs by various icon providers like Fontawesome or IcoMoon. But their sizes are generally large because they send an entire icon system to the browser. The icons are fetched one by one from the CDN, which delay their load times.
With CSS Sprites, we are able to reduce the size of the icon system by selecting only the icons we use in our app. We also reduce the number of HTTP requests because we combine all icons into one file and deliver it to the client in one response. This makes individual icons available to the browser faster.
Before we can use CSS Sprites, we have to generate an image file using a sprite generator. Various sprite generators are available online or as npm packages. We can use two types of sprites: png or svg.
With png sprites, we place the image as a background image to a
<div>. Important thing to note here is that we are using the entire image full of icons as the background image. And then the idea is to focus on our icon of interest using the
background-position property, the width and height of the icon.
background-position property sets the starting point of the background image to be used in the
<div>. If our icon is
48px inside the image horizontally, we set
background-image-x: -48px;, which basically hides everything between
48px. If it is
32px inside vertically, we set
background-position-y: 32px;, which hides everything from 0-32px vertically. We hide the icons that come after by setting the
height of our
<div> to the width, height, padding and margin of the icons themselves.
See and example of png sprites in this codepen.
One drawback of using png sprites is we cannot style our sprite they way we want, for example change its color for a certain state of the icon. We have to include a sprite for each color and shade of the same sprite.
Sprites using an
.svg file take a different approach. There is no background involved. The steps involve:
- Generating an
.svgsprite file using online tools or npm packages like this one. In the output sprite, each icon image is placed in an svg
<symbol>tag with its
- Including the sprite file at the top of the HTML document. This is important, because the sprite
ids must be available before the icons can be referenced later in the document. There are several ways of doing this. One method is to use an
<object data="sprite.svg" type="image/svg+xml" style="display: none;"> ... </object>
Another important thing is to set
display: none; for the
- Then in the section where we want to add an icon, we add an
<svg>element. Inside the
<svg>element, we put an
<use>tag and reference the icon of our choice with its
iddefined in the sprite file.
<div class="social-links"> <svg viewBox="0 0 32 32" class="icon icon-facebook"> <use href="#facebook-square"></use> </svg> </div>
- We can then style the
<svg>icon with a
classanyway we want.
For an example, see this pen.