Adding Custom New Icon using CEWP in SharePoint

This post uses JavaScript with Content Editor Web Part to add custom new icon.

Use the following approach if your site is not a multilingual one. To achieve the same in multilingual sites, a more dynamic approach is required. New Icon can be found in images of 1033 (English) folder. Each language will have a respective new icon.I have created four icons for this post and placed in 12 Hive\Template\Layouts\Images\Icons.




Step – 1: Add a Content Editor Web Part (CEWP) to your page, where you want to display the custom New Icon. I have used my document library landing page (AllItems.aspx) for this purpose.

Note:
This will show the custom New Icon for that particular page, place the CEWP to your master page if you want to apply custom icon for other pages which references the master page.

Step – 2: Open CEWP Tool Pane, click on “Source Editor”. Place the following script in Source Editor.


<script language="JavaScript">
_spBodyOnLoadFunctionNames.push("ShowCustomNewIcons");

function ShowCustomNewIcons()
{
//Custom New Icon Image path
var newIcon = '_layouts/images/icons/new1.jpg';
var fields,i;
fields = document.getElementsByTagName('IMG');
for( i = 0; i < fields.length; i ++ )
{
var imagesrc = fields[i].getAttribute('SRC');
if(imagesrc.indexOf("new.gif") != -1)
{
fields[i].src = newIcon;
}
}
}
</script>

Once the script added, you can see the custom icon will be shown on the new items instead of the OOB New Icon.