Social Icons: To sprite or not to sprite?

Question

I'm currently working on a HTML/CSS template, and I'm going to implement the following social media icons:

http://www.premiumpixels.com/freebies/41-social-media-icons-png/

They come as 41 seperate .png files. I want to include them into my template using CSS classes, for easy usage like so:

<i class="icon-twitter"></i>
<i class="icon-facebook"></i>

Now the question is, should I refer to each icon as a separate file in my CSS classes, or should I consolidate all 41 icons into one sprite and adjust the background position for each class (CSS sprites technique)?

It is quite obvious that probably nobody using my theme will use 41 social media icons on his website (hopefully). I would say on the average site, about 3 or 4 icons are used at once. So this makes me wonder if it makes sense at all, to use the sprites technique when only ever about one tenth (4 of 41) is used.

The file sizes for the single files average at about 2kb per file. The sprite I created is 42kb in size.

What is the best solution for this scenario?

Also: Does it matter how the icons in a sprite are distributed? I just made 2 columns and 21 rows of icons. It might as well be one column and 41 rows, or 6 columns and 7 rows.

Cheers

Answer 1

You should put them all into a sprite. There are generators that exist to make it really easy to do as well.

Combining them into a sprite will reduce the number of HTTP requests.

http://spritegen.website-performance.org/