Custom icons for list definition using XML

Recently I had to specify custom icons for the list definition I have created using XML definition in visual studio. Solution is quite easy to implement – just specify your icon path in the XML property of list definition


<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <ListTemplate
        Name="LCustomLinks"
        Type="15101"
        BaseType="0"
        OnQuickLaunch="FALSE"
        SecurityBits="11"
        Sequence="410"
        DisplayName="$Resources:Projectresource,LCustomLinksDisplayName"
        Description="$Resources:Projectresource,LCustomLinksDescription"
        Image="/_layouts/15/images/Customer.SP2013.ProjectTitle/ITICOLISTS.png"/>
</Elements>

When insert image in a such way you should know that this image will be used on:

  • Site contents page. The size of the icon should be 96×96 px.
  • Content and structure where size of the icon should be 16×16 px.

However, when icon specified in list definition is large one it is also shown as large one in “Content and structure” where it should be 16×16 px.

Solution:

To solve this you should prepare three sets of images. SharePoint manages itself which image to display. However you should have right naming convention to make it work.

  • Small image (16×16 px) – name should starting with ITImageName
  • Medium image (32×32 px) – name should starting with MGSameImageName
  • Large image (96×96 px) – name should starting with LTSameImageName

Tips:

  • Name of the icon you try to show should be the same for all three images and only prefix should change.
  • These icons should be deployed in /_layouts/15/images folder (/_layouts/14/images for SP2010). You can have another level Inside this folder to isolate your project’s icons.
  • Name of your icon SHOULD NOT start with on of the following letters: L, M, I because these ones are used for prefix.
  • Icon path specified in the list definition XML file should be small icon path. SharePoint will automatically pick up right size icon when displayed on page.

Here is how it should look like:

Custom icons for list definition

Content and structure

Andrew Adamich

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s