Adding ICONS to CRM

How to add ICONs to CRM entities for the ribbon (this article does not cover making smaller icons for non ribbon)

This article is about using http://flaticons.net/ to generate the icons. If you want to use a different tool you will need to adjust accordingly.

A good icon for CRM presently need to be mono colour to look reasonable.

Firstly you need to identify what colour you want the icons to be. Perhaps the spot colour of the background or foreground of the clients logo. This colour needs to be a hexidecimal web colour.

#1 Make the icon

This site has a good set of plain icons: http://flaticons.net/

• Visit the site.
• Use the search box to find an icon that suits the Entity you wish to illustrate.
• Click on the icon and you will get a screen that shows the icon on a background and a set of controls
• Set the dimentsions to 32
• Set the padding to 1
• Click on the Square background in the 'Background Shape' box, this should reveal two hexidecimal boxes for Icon colour, BG colour
• You are setting the icon colour NOT the background colour - I have found that having coloured line art on a blank background is better than a coloured background with white/other colour art
• Type in your customers colour code into the first box (the Icon Colour box).
• You should now have a icon
• Scroll down the page and Download as PNG
• You will now have an icon on disk
• Key thoughts - whatever you choose to do - be consistent. You dont have to follow the above exactly but consistency is key!

#2 Use the icon

Now that you have an icon you need to add it to CRM

• Open the Dev instance of the client CRM system
• Open the main solution (if you dont do this you are an idiot)
• Create a new web resource
• Give it a meaningful name - I tend to put something like Icon Truck 32 to denote its a 32 x 32 icon of a truck
• Once uploaded save/publish the icon
• In the solution go to the entity to illustrate,
• Under entity definition, type in the web colour you have selected in the color box - this makes the default outline for the entity match the icon colour you have chosen.
• Click on Update Icons from the ribbon
• We are ignoring the Icon in Webe application section - we could theoretically build 16x16 icons if we want to but I havent bothered
• In the icon for Entity Forms section - use the browser to find your new icon - this is where a naming convention that includes 'icon' in the name makes it easier to find your icons as the browser is not filtered to just icons
• Once you have chosen your icons and set the color, Save and Publish the entity
• Switch to using the solution, do a control f5 to reload the ribbon, check the icons are correct and none are missing

Strategy

I have tended to do batches of:

• Identify needed icons
• Make icons
• Add icons to resources
• Link icons to entities
• Publish all
• Control F5 to refresh the ribbon
• Look at the result
• Identify and find ommissions and changes needed

I do NOT bother trying to change the built in entities icons. However I do sometimes change the colour of the built in entity to match that of my client. For example Contact and Account.