Show Menu
TOPICS×

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 ( #@jcr:title ) are used as the abbreviation. For example, if #@jcr:title=Article List the abbreviation would display as " Ar ".
The abbreviation can be customized via the #@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: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 #.
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 #.
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