When zooming on Chrome, image sprite becomes misaligned

I think you could add a background size with auto to fix this issue. This works for me.

.thump {  background-size: auto 100%; }

This only works when all your icons align in one row or column.(when column, it should be: 100% auto). More like the formula below:

background-size: auto 100%/(rows);background-size: 100%/(columns) auto;

With this style, your background image would fix into the div as you want.

Hope it can help you.

The full version of the image seems to be three 'Thumbs up' next to each other. You can replace the sprite element with the following (I tried this based on the example you provided, and this scales excellently):

<img src="data:image/png;base64,yourbase64stringhere" >

Now all you need to do is hide part of the image (e.g. the 66,6% on the right). For this you can use a clip path, or you can just cut off the sprite so that there is only one thumbs up icon.

Seems like setting background size to auto for .feature-icon will work:

.feature-icon {  background-size: auto;}

Image is not becoming misaligned, but maybe you have not provided all necessary CSS to check it.

You can check this fiddle for more details.