CSS Sprite table

Question

Is there any table or list to help reuse SharePoints Sprite images? I'd like to reuse e.g. icons from /_layouts/15/images/spcommon.png?rev=23

Edit after Tiago's answer

Thanks for the anwser to use a Sprite generator. However, I was more thinking of a way to reuse existing CSS. For example if I "re-use" the following HTML snippet:

<a id="idHomePageNewItem" class="ms-heroCommandLink">
  <span class="ms-list-addnew-imgSpan20">
  <img id="idHomePageNewItem-img" src="/sites/jriemer/_catalogs/theme/Themed/386EAB37/spcommon-B35BB0A9.themedpng?ctag=2" class="ms-list-addnew-img20">
  </span><span>Add New Event</span></a>

I get the "plus sign in circle" along with the hover effect.

I was hoping to get some info how to do this for the rest of the CSS sprites such as the arrow in circle (and doing this w/o the need to spot its usage somewhere in a page).

In any case, if there is no anwser in that respect I will accept Tiago's since its then the best solution

Answer 1

you can use sprite cow to generate your css

http://www.spritecow.com/

Eric Overfield has a nice post on this

Update:

I'll link a few additional resources:

https://stackoverflow.com/questions/1452961/how-to-find-pixel-position-of-image-from-sprite-image

https://getspritexy.netlify.com/

Eric's post (from wayback machine) - seems the live one is broken