Adding Icons to Navigation Menu Elements

Liferay DXP 2025.Q2+/Portal GA135+

Use icons to make navigation menus easier to scan and more visually engaging. They provide quick visual cues that help users recognize sections at a glance, especially for sites with complex structures. Icons also give you more flexibility in styling and organizing menus.

Tip

You can find a list of available icons in the Clay UI documentation.

Open the Site Menu (), expand Site Builder, and go to Navigation Menus.
Create a navigation menu or click the title of an existing one to start editing it.
Add a new element or select an existing one.
Click Select an Icon in the right panel.
Browse the list of icons and select one, or use the search bar to find a specific icon.

Tip

Accessibility When navigating with the keyboard, press Enter to activate the Select an Icon button. You can immediately type in the search bar. Use Tab to move between controls and Up/Down Arrow keys to navigate the icon list.
Click Save. The selected icon appears next to the menu element.

Remove an icon if it’s no longer relevant or needed.

Open the Site Menu (), expand Site Builder, and go to Navigation Menus.
Click the title of an existing navigation menu to start editing it.
Select an existing element and click Remove Icon Selection () in the right panel.

You can replace an existing icon with a different one.

Open the Site Menu (), expand Site Builder, and go to Navigation Menus.
Click the title of an existing navigation menu to start editing it.
Select an existing element and click Change Icon () in the right panel.
Browse the list of icons and select one, or use the search bar to look for a specific icon. Click Save to update the icon.