Using icons, rollovers in website if a very common practice and it makes the content visually pleasing and at the same time improving the usability of the website. But more the number of pics of icons or rollovers
more the http request. That means with every seprate pic you use, your site makes http request for every pic which in turns affect the performance of the site everytime it loads.
Css provides a clever way out of this situation in form of Css sprites. Css sprite is a single pic made of many pics that you are using across your website. For example the image below :
Before you hover mouse on it :
What CSS code looks like -
After you hover mouse :
What CSS code looks like :

But in reality the 2 images are in the end one pic only. The position of images is calculated as shown in fig. Thus using one single image instead of 2 images and this in turn reduces the number of http requests and the size of bigger image is smaller than the size of two seprate images combined. In this case size of image1 and image2 sums up to 15kb whereas size of the bigger image came to be 12kb. So CSS Sprites are very helpful when it comes to website optimization.
Free Social Icons CSS Sprites
See CSS Sprite in a Action :
Free Download :- Socialsprites
Note : Click on the LINK at the bottom of download page.
Included resolutions
128x128 64x64 32x32
Don't have any idea how to use it ?
Don't worry 1. Download the zip file and unzip it
2. All the CSS and HTML code with explanation is included so all you
have to do is COPY and PASTE only.
Made simple CSS sprite of Social Network Icons hope it helps someone :)
more the http request. That means with every seprate pic you use, your site makes http request for every pic which in turns affect the performance of the site everytime it loads.
Css provides a clever way out of this situation in form of Css sprites. Css sprite is a single pic made of many pics that you are using across your website. For example the image below :
![]() |
(7kb) Before rollover |
What CSS code looks like -
![]() | |||||
(8kb) After rollover |
#div img
{ background : url( path to image) ;
background-position : 0(left), 0(top); }
After you hover mouse :
What CSS code looks like :
#div img:hover
{ background : url( path to image);
background-position : 0%, 100%;}

But in reality the 2 images are in the end one pic only. The position of images is calculated as shown in fig. Thus using one single image instead of 2 images and this in turn reduces the number of http requests and the size of bigger image is smaller than the size of two seprate images combined. In this case size of image1 and image2 sums up to 15kb whereas size of the bigger image came to be 12kb. So CSS Sprites are very helpful when it comes to website optimization.
Free Social Icons CSS Sprites
See CSS Sprite in a Action :
![]() |
flanker.mindwars.in |
Free Download :- Socialsprites
Note : Click on the LINK at the bottom of download page.
128x128 64x64 32x32
Don't have any idea how to use it ?
Don't worry 1. Download the zip file and unzip it
2. All the CSS and HTML code with explanation is included so all you
have to do is COPY and PASTE only.
Made simple CSS sprite of Social Network Icons hope it helps someone :)
awesome.
ReplyDeletety master \m/
glad that you found it useful, happy to help :)
ReplyDeleteill replace my social icons with these.
ReplyDeletethanks.
Thx for sharing this one. ;)
ReplyDelete