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
2023 Retrospect

2023 was another amazing year! The Jafarian family chose challenge as our word for the year and we tested ourselves in new ways. We also mixed in a bit of…

View Post
Reflecting on 2 Years of Podcasting

I just passed my two year anniversary of podcasting. It’s been a journey. Here are some key reflections from being on the mic – 1. Creative Outlet First and foremost,…

View Post
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