Customizing Component Icons

Component Icons allow authors to quickly identify a component with icons or meaningful abbreviations. Authors can now find locate the Components required to build out their Web experiences faster than ever.

The Component browser now displays in a consistent grey theme, displaying the:

  • Component Group
  • Component Title
  • Component Description
  • Component Icon
    • The first two letters of the Component Title (default)
    • Custom PNG image (configured by a developer)
    • Custom SVG image (configured by a developer)
    • CoralUI icon (configured by a developer)

Component icon configuration options

Abbreviations

By default, the first 2 characters of component title ([cq:Component]@jcr:title) are used as the abbreviation. For example, if [cq:Component]@jcr:title=Article List the abbreviation would display as “Ar”.

The abbreviation can be customized via the [cq:Component]@abbreviation property. While this value can accept more than 2 characters, it is recommended to limit the abbreviation to 2 characters to avoid any visual disturbance.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI Icons

CoralUI icons, provided by AEM, can be used for component icons. To configure a CoralUI icon, set a [cq:Component]@cq:icon property to the desired CoralUI icon’s HTML icon attribute value (enumerated in the CoralUI documentation.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG Images

PNG images can be used for component icons. To configure a PNG image as a component icon, add the desired image as a nt:file named cq:icon.png under the [cq:Component].

The PNG should have a transparent background, or a background color set to #707070.

The PNG images will be scaled to 20px by 20px. However to accommodate retina displays 40px by 40px might be preferable.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

SVG Images

SVG images (vector-based) can be used for component icons. To configure a SVG image as a component icon, add the desired SVG as a nt:file named cq:icon.svg under the [cq:Component].

SVG images should have a background color set to #707070 and a size of 20px by 20px.


/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

Additional Resources

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now