I’ve mentioned a few times on Twitter that small details can go a long way when implementing a site on Sitecore. Whether it’s a custom background image, controlling the scope of what your content authors can see, or simply providing user-friendly messaging while in the experience editor, paying attention to every detail will help ensure you deliver a polished site that stands out from the rest.

Related: Five steps to an improved Sitcore Editing Experience

There are already some great posts out there on how to add custom Sitecore icons (like this one and this one), so I won’t bother explaining how to do it. Instead I would like to focus on why you would want to use custom icons through some use cases.

Incorporate the Client’s Logo(s)

This is one of my favorite uses for custom iconography, and the best part is you almost always have the logo. Picture a situation where you have a client with multiple subsidiary brand websites on one Sitecore instance. Each one of these brands has its own website, as well as its own set of placeholder settings, templates, renderings, etc. Instead of using the standard folder icon, use the brand’s icon instead! This is a golden opportunity to have each site reflect its brand identity within Sitecore. Some of the spots you can utilize the client’s icon within Sitecore:

Using client logos is a golden opportunity to have each site reflect its brand identity within Sitecore.

  • Template folder
  • Branch template folder
  • Placeholder settings folder
  • Renderings folder
  • “Website” item
  • Settings/options folder
  • Custom experience buttons folder
Sitecore icons – Client icons before

Client icons before

Sitecore icons – Client icons after

Client icons after

Reusable Libraries/Accelerators

It’s not uncommon that you have some sort of reusable code or accelerator that you use from project to project. It can be helpful to distinguish what is coming from a library and/or third party from what is specific to the project. So if you do have some sort of code base that gets ported and used for multiple projects, think about using your company’s logo, or even create your own!

Reusable library icons help distinguish what is coming from a library and what is specific to the project.

I chose to have our creative team design one for Elision, our open-source development accelerator. That way I can use the icons not only in Sitecore, but in NuGet and GitHub as well. The places where you can utilize this are similar to where you can utilize your client’s logo, and will of course vary based on your specific situation.

  • Template folder
  • Branch template folder
  • Renderings folder
  • Settings/options folder
  • Custom experience buttons folder
Sitecore Icons – Accelerator Icons Before

Accelerator icons before

Sitecore Icons – Accelerator Icons After

Accelerator icons after

Popular Third Parties

Custom icons add polish to components developed to integrate with third-party applications.

During the course of site development, you might need to develop a component specifically to integrate with a third-party application. Common use cases would be creating a Twitter feed, Facebook timeline embed, or a YouTube component. While there are probably some icons within the pre-existing Sitecore icons library that are good enough to use, I again view this as another nice polished touch you can add to your implementation.

Even better, several of these third parties have brand resources where you can download official images, instead of searching through Google. Here are a few popular ones to help get you started:

Have other ways in which you’ve used custom Sitecore icons? Let us know by sharing your examples in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>