I want to change the icons used in the component hierarchy navigation in the experience editor, so that editors can clearly see if they are selecting a component, placeholder or edit frame.

I did this some years ago in 7.2 by editing the chrome js files for placeholder and edit frame.

The component navigation tree looks like this, but all steps of the navigation are represented by the blue bullet icon.

Component navigation tree before fix

This is how we'd like it to look, and how we got it to look in Sitecore 7:

Component navigation tree fixed

I can't see where or how to make the same change in Sitecore 8.2

The Sitecore 7 solution is here: https://stackoverflow.com/questions/26425059/is-it-possible-to-define-different-icons-for-placeholders-components-and-edit-f

1 Answer 1


The answer is that you can do exactly the same in Sitecore 8 as you could in 7.

Find your Chrome type js in \sitecore\shell\Applications\Page modes\ChromeTypes and add an override icon function after the constructor.


icon: function() {
  return '/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_green.png.aspx';

The full details are in this answer on Stack Overflow, I've copied parts of it here so it's now on both sites: https://stackoverflow.com/a/26428851/528656

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.