Wil je dat ook weleens; eigen plaatjes voor vaste SP elementen. Voor bijvoorbeeld het +-icoon voor new document?

Met composed looks kun je deze plaatjes kleuren (themed png), maar die methode wil of kan je niet altijd gebruiken.

Volgende optie lijkt goed te werken in (ie8+, chrome, firefox, safari*)

Voor bijvoorbeeld spcommon.png**:

[codepen_embed height="234" theme_id="15982" slug_hash="pJryxx" default_tab="css" user="robkostermans"]
img[src*="spcommon.png"]{
 background-image:url("/pad/naar/eigen/spcommon-klant.png");
 width:0;
 height:0;
 padding:134px 135.5px;
 } 
See the Pen <a href='http://codepen.io/robkostermans/pen/pJryxx/'>pJryxx</a> by Rob Kostermans (<a href='http://codepen.io/robkostermans'>@robkostermans</a>) on <a href='http://codepen.io'>CodePen</a>.
[/codepen_embed]

Wat je doet is de <img> 0x0 pixels maken zodat deze niet meer te zien is. Vervolgens gebruik je padding op de <img> om het weer de originele maat te maken (in dit geval dus de helft van de originele breedte/hoogte)
Vervolgens geef je een background-image aan de tag mee met je eigen spcommon bestand.

Et voila. Sp2013 wrapped de <img> altijd netjes met een span met maatstelling. De originele left/top compensatie die op de <img> style attribuut is gezet blijft gehandhaafd.
 
Mogelijk nadeel is wanneer er in een update iets doet met de maten van spcommon of met de html markup rond de img-sprite.

*getest is ie10 in de verschillende browser modes. Ik moet nog even testen of in true ie8 of dit geen probelemen oplevert.
Ie6 gaat dit niet werken maar sp2013 geeft toch geen support voor ie6 en ie7. De attribute selector *= (contains) is formeel een css3 specificatie maar IE ondersteund dit al vanaf versie 7.