Very long code turned out!( How to use the sprite for images correctly?

[Flex-start]

.ic--s1{
   position: absolute;
   width: 19px;
   height: 25px;
   left: 22%;
   top: 13%;
   background-image: url(img/icons/icon-step1.png);
}
.ic--s2{
   position: absolute;
   width: 23px;
   height: 21px;
   left: 16%;
   top: 19%;
   background-image: url(img/icons/icon-step2.png);
}
.ic--s3{
   position: absolute;
   width: 22px;
   height: 25px;
   left: 19%;
   top: 14%;
   background-image: url(img/icons/icon-step3.png);
}
.ic--s4{
   position: absolute;
   width: 23px;
   height: 21px;
   left: 18%;
   top: 14%;
   background-image: url(img/icons/icon-step4.png);
}
.ic--s41{
   position: absolute;
   width: 16px;
   height: 19px;
   left: 24%;
   top: 20%;
   background-image: url(img/icons/icon-step4.1.png);
}