Adding a Custom List Template Large Icon in SharePoint 2010

In SharePoint 2010, the default interface to create a new artefact (custom list, document library, web, etc.) is built in Silverlight. If you ever build a custom solution that requires you to include a custom list template, you’ll probably want to associate a custom icon to it so that users can quickly identify your new artefact. However simply adding a reference to your image in the Image property of the Elements.xml file associated with your custom list template is not going to be enough for it to work, in most cases 🙂

Assume we’re building a new SharePoint 2010 solution that contains a custom list template. The image we want to see appear to represent this list template in the Silverlight interface is contained within the solution and will be deployed at /_layouts/images/NikBlogDemo/Icon.gif. The figure below shows the image contained within our solution in Visual Studio 2013.

Figure 1 – Icon files in our SharePoint Solution in Visual Studio 2013

Now, let’s create our new list template element, and name it NikDemoTemplate. Once the template has been created, we’ll go and delete the list instance object that got created automatically, so that all we have left is the Elements.xml and Schema.xml files associated with our list template.

Figure 2- List template files in Visual Studio 2013

The Elements.xml file is where the money is. If you open up the file, you should see that the last attribute of the ListTemplate node is called Image, and that it points to/_layouts/images/itgen.png by default.

Ffigure 3 – Default list template’s Element.Xml file’s content

​Let us replace this value by the location of our custom icon file (/_layouts/images/NikBlogDemo/Icon.gif). Deploy the solution and go take a look at the Silverlight interface to see if our icon got applied. Here’s what our Icon.gif files looks like.

Figure 4 – Icon we’re trying to add

​Here’s what the Silverlight interface shows after deploying our solution:

Figure 5 – Silverlight interface not showing our custom icon

Not quite the same icon right? So what’s wrong? Two things are wrong. The first one being that the Silverlight interface only understands .png icons, but that’s not the only thing. It also expects your file’s name to respect a specific naming convention. If you look at figure 3 above, you can see that the default image was named starting with “it“. In the SharePoint world, there are two types of icon, small 16×16 icons prefixed it, and large 64×64 icons prefixed lt. In our case, the latter is what we want. For you icon to work, simply rename your file to lticon, and change its extension to .png​.

Figure 6 – New LTIcon.png file in our Sharepoint solution in Visual Studio 2013
Go ahead, modify your Elements.xml file to point to our new icon file, and deploy the solution. If you now launch the Silverlight interface, you’ll see that your custom icon is now shown to represent your custom list template!

Figure 7 – Custom list template icon shown in the SharePoint 2010 Silverlight interface
To summarize, in order for a custom icon to appear in the large tile Silverlight interface that allows you to create new lists in SharePoint 2010, you need to specify an icon that has a .png extension, and that has a name that starts with “lt”. Simply having one or the other is not going to work, you need a combination of both.

​