For images in the user interface in SharePoint, Microsoft makes use of the formatmap32x32.png and formatmap16x16.png that are stored directly on the server and could be reached via the link “/_layouts/15/1033/images”.

How can we use these images, when we want to provide out own user interface?

Let’s assume, we want to use the workflow symbol , how can we address this image in the map?

The symbol is found in row 15 and column 5 in the map. To make it visible using html and css, we can use this simple snippet:

The classes used in the span are important. We see the image addressed in the img tag, but how do we get the values in the style attribute for top and left?

We can use the following formulas to get these values:

top = (((row – 1) * 34) + 1) * (-1)

left = (((column – 1) * 34) + 1) * (-1)

For our workflow symbol we will get for top the value -477 and for left the value -137. Add these values for the style attribute in the img tag and the symbol will be shown.

I would recommend not to use the formatmap16x16.png, because the rows and columns in this file are not that structured, as in the formatmap32x32.png. We do not have a simple formula to address a symbol in this file.