Display an Icon from Image Sprite using CSS

CSSWeb DevelopmentFront End Technology

The main advantage of using image sprite is to reduce the number of http requests that makes our site’s load time faster.

Following is the code for displaying an icon from image sprite using CSS −


 Live Demo

<!DOCTYPE html>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   width: 64px;
   height: 64px;
   margin:10px 4px;
.facebook {
   background-position: 0 -148px;
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>


The above code will produce the following output −

Updated on 11-May-2020 09:24:05