Use SharePoint icons in design/development

In my previous post we saw how to change default image used by sharepoint into standard masterpage or ribbon for example  (http://larry-microsoft-techno.blogspot.fr/2016/03/change-icons-used-for-sharepoint-2016.html)

In order to map icons to your design I just found this post by Eric :
http://ericoverfield.com/sharepoint-2013-spcommon-png-sprite-breakdown/

Thanks to him you can easily find which css code to use in order to include sharepoint icons into your masterpage or webparts.

Change icons used for SharePoint 2016 and SharePoint 2016 (spcommon.png and fgimg.jpg)

Designer can easily change icons used for site by modifying the following sprite, one example if you want to have the ribbon in a dark colour the icons "share" "follow" are nearly invisible because they are gray. 

 

Once you've changed the image you can use the following css to override the image where they are used : 

img[src*="fgimg.png"]{ 
background-image:url("/_layouts/15/[YOUR-PROJECT]/fgimg-project.png"); 
width:0; 
height:0; 
padding:346.5px 90px; 
}

img[src*="spcommon.png"]{ 
background-image:url("/_layouts/15/[YOUR-PROJECT]/spcommon-project.png"); 
width:0; 
height:0;
padding:134px 135.5px;
}