Hey, what’s up! In this video, we are going to be looking at component icons introduced in AEM 6.3. So, I’ve got one of the We.Retail pages open in my sites editor and if we expand the content finder, we can see that the component browser looks a little different.

So, we can see the component name as well as the component group. But, what’s been added is a component icon.

Now, the icon could just be an abbreviation of the component name, or it could be one of the core UI icons.

And so, this just allows content authors to more easily identify a component, when they’re looking for it.

In addition, if a content author selects the info circle, they can get a brief description about the component and its purpose.

So, let’s look at some configuration options for customizing the icon of a component. So, we’re going to go into CRXDE Lite and I’m just going to select my component here, and it’s this article list component and it’s from the We.Retail site. Now, by default, the component icon is the abbreviation of the first two letters of the component name. But, if we explicitly set this abbreviation property, we can override that icon. So, we’ll just set it to AL for Article List.

Go ahead and add that, and if we refresh the page and reopen the component browser, we can see that the icon is now this AL.

We can also choose any of the CoralUI icons. So, if we go to the CoralUI documentation and just select this icon here, this answer icon. So we’ll remove this property and we’ll put a new property called CQ colon icon and for the value we’ll just paste in the name of the CoralUI icon, and if we refresh the page, we should see our new icon.

Now, you can see that answer icon.

And, there’s a ton of CoralUI icons that are available. You also have the ability to upload a completely custom icon. So, what we’re going to do is create a new file, directly beneath our component and the name of the file is important. It’s going to be called CQ colon icon dot SVG and so, it accepts an SVG format and the recommended dimensions is 20 by 20.

So, I already have an SVG file, called, it’s just the AEM logo and I’ll just upload it through CRXDE Lite.

So, if we return to the component browser, we now see the AEM logo as the new component icon.

You can also upload a custom icon in a PNG format. So, go ahead and delete this file, and we’ll create a new file beneath our component, and it’ll be called CQ colon icon dot PNG.

As far as the dimensions for a PNG file, it doesn’t scale like SVG, so you’ll probably want to create them at 40 pixels by 40 pixels.

So, we’ll upload our smiley face PNG icon, and if we return to the component browser, we can now see our PNG icon.

Okay, so the last thing I want to show you is some component inheritance. So, I’m going to remove this icon from our component and there’s no icons configured. And, this component is actually inheriting from one of the core list components. So, we go ahead and open up that core component.

So, this is the list component and there’s an icon already configured, this text bulleted icon. The way that the icons will work is, if there’s no icon configured on the component itself, it will actually grab the icon from the parent component. So, if we refresh the page and go to the component browser, you can now see that it is inheriting the text bulleted icon. So, that’s it for component icons in AEM 6.3.