Cambiar el tamaño de la imagen de un sprite usando CSS

Tengo un sprite CSS con varios iconos de tamaño 32x32px.

Ahora lo que necesito es mostrar uno de esos íconos en un tamaño de 20x20px. Intenté algunas cosas, como establecer el tamaño en 20px, usar background-size: cover o usar transform: scale (0.625), pero ninguno de mis intentos dio el resultado que deseo.

HTML para mis pruebas:

32px icons:

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div>
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div>

<hr>
20px icons (attempts):

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div>
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

CSS para mis pruebas:

.sprite {
  background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png);
  width:32px;
  height:32px;
}

Por favor, eche un vistazo a este violín para ver lo que probé:

https://jsfiddle.net/dfqh0yrc/4/