I have developed a VF page where I search Cases, Solutions and KnowledgeArticles and Display them .

To differentiate between Cases, Solutions and KA I want to Display respective sfdc standard icons.

I have tried using .

<img src="/s.gif" alt="Solutions" class="pageTitleIcon" title="Solutions"></img>

But this always .displays a icon of the VisulalForce Tab or the icon of the Standard Controller.

1 Answer 1


You need to use a relative path to the icons:

<img src="/img/icon/trophy32.png"/>

This will display a normal SFDC icon: enter image description here

Here you will get some overview of the standard icons.

In your case you can create two CSS classes for case and solution for example:

.caseIcon {
    background-image: url("/img/sprites/master.png");
    background-position: 0 -986px;
    height: 32px;
    width: 32px;

.solutionIcon {
    background-image: url("/img/icon/solutions32.png");
    background-position: 0 0;
    height: 32px;
    width: 32px;

And then dynamically assign these classes depending on the object type:

<img class="{!IF(object.type = 'case', 'caseIcon', 'solutionIcon')}" src="/s.gif">

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .