CSS Sprites

• An image sprite is a collection of images put into a single image.
• A web page with many images can take a long time to load and generates multiple server requests.
• Using image sprites will reduce the number of server requests and save bandwidth.

.bg-delivery-truck
{
	background:url('images/css-sprite-combined.png') 0px -0px;
	width:128px;height:128px;
	display:inline-block;
}

.bg-black-friday
{
	background:url('images/css-sprite-combined.png') -128px -0px;
	width:128px;height:128px;
	display:inline-block;
}

.bg-best-seller
{
	background:url('images/css-sprite-combined.png') -256px -0px;
	width:128px;height:128px;
	display:inline-block;
}

Reference:

https://www.flaticon.com/ https://cssspritestool.com/