Ali Jafarian
Ali Jafarian

CSS sprites have been around for a while, and for good reason. They minimize server requests (which allows web pages to load faster), and they keep CSS organized. They are, however, a bit tricky to understand at first.

For those of you who aren’t familiar with CSS sprites, the basic concept behind them is to create one image file made up of multiple images for your web page’s background images (instead of separate background images). But that sounds crazy! Yes, at first it does. But once you realize the benefits of CSS sprites you will try to user them for everything possible! In fact, most large enterprise level websites do use one image sprite for most of the graphics on their site.

Today I’m going to show you how to design your image sprites and CSS to be more flexible in your website or application.


We’re going to design a 80×20 pixel sprite that contains four 20×20 pixel icons. The point here is to avoid any un-needed space and make our sprite as compact and pixel perfect as possible. I’ve referenced some examples below:

Good Sprite

Bad Sprite


Our HTML will consist of a parent <div> that contains a standard <ul>. Inside of the <li>’s we have anchor links with their own unique class (or id, if you prefer). Then, inside the <a>’s we place a <span> with a consistent class (in this example I used “icon”).

<div id="icon-nav">
    <li><a href="#" class="profile"><span class="icon"></span>Profile</a></li>
    <li><a href="#" class="inbox"><span class="icon"></span>Inbox</a></li>
    <li><a href="#" class="calendar"><span class="icon"></span>Calendar</a></li>
    <li><a href="#" class="settings"><span class="icon"></span>Settings</a></li>


Our CSS is pretty standard, but the key to realize is the positioning of the <span>’s. They are positioned absolutely inside of the relative positioned <li>’s. This allows the icon to be part of the clickable <a> without being a background image. It also give us complete control over where the icon is positioned in relation to your link. So if the styling of your links changes you don’t have to re-size the sprite image, you simply change the CSS background-position property to reflect the new positioning.

#icon-nav {
  float: left;
  width: 600px;
#icon-nav ul {
  font-family: 'Play', sans-serif;
  font-size: .9em;
  list-style: none;
#icon-nav ul li {
  border-left: 1px solid #ea7f15;
  float: left;
  position: relative;
#icon-nav ul li a {
  background: #ea7f15;
  background: -moz-linear-gradient(top, #ea7f15 0%, #db4602 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea7f15), color-stop(100%,#db4602));
  background: -webkit-linear-gradient(top, #ea7f15 0%,#db4602 100%);
  background: -o-linear-gradient(top, #ea7f15 0%,#db4602 100%);
  background: -ms-linear-gradient(top, #ea7f15 0%,#db4602 100%);
  background: linear-gradient(top, #ea7f15 0%,#db4602 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea7f15', endColorstr='#db4602',GradientType=0 );
  color: #fff;
  display: block;
  padding: 20px;
  text-decoration: none;
  width: 109px
#icon-nav ul li a:hover {
  background: #ea7f15;
#icon-nav ul li a span.icon {
  background: url(images/icons_sprite.png) no-repeat;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 18px;
  width: 20px;
#icon-nav ul li a.profile span.icon {
  background-position: 0 0;
#icon-nav ul li a.inbox span.icon {
  background-position: -20px 0;
#icon-nav ul li a.calendar span.icon {
  background-position: -40px 0;
#icon-nav ul li a.settings span.icon {
  background-position: -60px 0;


And there you have it! A simple, yet flexible, CSS icon sprite. Keep in mind that there are many ways to design and code CSS sprites. Many designers/developers will use the sprite as a background image for the <a> links themselves, as opposed to creating extra spans. That’s a fine approach, but over the years I’ve found this approach to be more efficient in terms of time and ability to update. Hope it helps!

Ali Jafarian

Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.

Did you find value here?

If so, jump on my email list to be notified of new posts.



Leave a Comment

Your email address will not be published. Required fields are marked *

Latest Articles
Jafarian Adventure: Europe (2023)

The latest Jafarian adventure was 3 weeks in Europe. We visited 4 countries over a 23 day span including Norway, Germany, Italy and Greece. It was a full adventure with…

View Post
2022 Retrospect

2022 was a year of adventure! The Jafarian family chose adventure as our word for the year and we certainly honored that. With the pandemic out of the way, we…

View Post
Truly Seeing Our Children

How often do we truly see our children? Let me be clear – most of us see our children every day, especially if they’re still living in our homes. We…

View Post