Icons available Salesforce.com
mgsmith | Monday, August 16th, 2010 | 11 Comments »
Like many of you, when building a VisualForce page, or sometimes an Image Formula, I find myself looking for icons to use on the page. Of course, whenever possible I want like the icons to look like they belong in Salesforce.com.
As you might expect, Salesforce.com has a series of icons available for public use, though with the exception of the “Samples” icons at the bottom of the page linked below, none of these icons are “official” and so there is always that possibility that they may disappear or change without notice.
The link below is to a Sites page that displays the icons I found by reviewing the CSS and browsing through the Discussion boards. Technically, there are many other images you can find by examining the CSS or Salesforce source, however many of these were Sprites or background images that we’re necessarily re-usable “icons”.
To get the URL for a given icon, right-click on it and select “View Image” or “Copy Image Location”. When copying the URL for the image, do not link to these specifc images using my free Sites URL. Instead, your VisualForce page should reference the relative path to the image as it’s stored on Salesforce.com’s site:
Example: <img src=”/img/arrow_dwn.gif” /> OR <apex:image value=”/img/arrow_dwn.gif” /> to render as 
http://free-121d5f44d20-121d603d1c5-121ee2b8103.force.com/force2b/salesforceicons
Note: Please add a comment to this post if you have found other icons that should be included in this list.
Great stuff! Although I’m a bit uncomfortable linking to your Salesforce site for the icons…
Hi MG, just want to mention one more image that we can use in formula fields when we want to show only “blank”. The relative URL of the image is “/s.gif”.
Here is an example from salesforce documentation:
IMAGE( CASE( {!Project_Status__c}, “Green”, “/img/samples/light_green.gif”, “Yellow”, “/img/samples/light_yellow.gif”, “Red”, “/img/samples/light_red.gif”, “/s.gif”), “status color”).
In the else part of the CASE formula, if we leave it blank, it shows a red-cross, which doesn’t look good to user and more importantly users treat it as a bug. This image /s.gif, simply shows blank or white.
I am glad if I brought something to your notice.
Happy Clouding :)
Joel,
I should have been clearer. You don’t have to link to my site. The images are hosted at SalesForce.com, so you can just reference them as “/img/arrow_dwn.gif”, for example, in your VisualForce code.
Mike
Hi,
How did you get this list of icons? I’ve been trying to use the Opportunity icon which isnt linked to on that website.
I found it by guessing, it’s /img/icon/opportunities24.png
But where can I find a list of every icon stored by salesforce?
Thanks
Good question. For the most part I went through the CSS files, but they have a ton of CSS files. There are some icons that I didn’t see in there, or possibly missed. The real issue is that there isn’t a consolidated list of images available. You have to find them the hard way.
Mike
I noticed you’ve included /img/loading32.gif but not /img/loading.gif (which is the 16pt version)
I’m a salesforce employee and the reason that salesforce don’t publish these is very simple.. the css/html of our pages is not versioned like the API so if we make an update to our CSS some of the images may change which could potentially break your code.
I recently created a salesforce appexchange package called Graphics Pack ( http://appexchange.salesforce.com/listingDetail?listingId=a0N30000004cfIcEAI ) as part of the force.com labs program that provides some additional icons / images / graphics that you could also use.
Mark,
I did notice the new app, and it’s on my queue to check out. Thanks for publishing and for listing here.
Best Regards,
Mike
Hi,
Would you happen to have vector versions of these? I can’t find them anywhere.
Thank you,
Anthony
Anthony,
Sorry. The images are from Salesforce. It’s all they have, at least that I’m aware of.
Best Regards,
Mike
This is a great resource for salesforce dev and admin!