Web Part icons in SharePoint

3.67 / 5 5
1 / 5
2 / 5
3 / 5
4 / 5
5 / 5

3 votes, 3.67 avg. rating (77% score)

Introduction

In this post we will see one of the ways to enhance look and feel of the Web Parts with which Web Parts will be more identifiable. It also make Web Parts more professional.
Using icon is one of the good feature to enhance web part look and feel.

Icons

The two default properties to specify icons for Web Part are

TitleIconImageUrl
CatalogIconImageUrl

TitleIconImageUrl

This can be used to show an icon in the Web Part’s title bar. The icon will be displayed to the left of the Title

CatalogIconImageUrl

This will be used in the Web Part gallery to identify the Web Part.

The icon should be 16×16 pixel image of png, gif or jpeg format.

We can set these default properties either in the code or directly modify the xml. Following is the xml that shows the properties of icon

 <properties>
        <property name="Title" type="string">VisualWebPart1</property>
        <property name="TitleIconImageUrl" type="string">/_layouts/images/Adicodes/AdicodesIcon.png</property>
        <property name="CatalogIconImageUrl" type="string">/_layouts/images/Adicodes/AdicodesIcon.png</property>
 </properties>

Before setting the icon url the Web Part will look like