Icon

Icon

In a nutshell

The Icon element renders a single glyph from Creator's built-in icon library. You select the glyph from a searchable picker, then configure its size, style, and color alongside the styling of the element box it sits in.

1. Overview

The Icon element places a single visual symbol on a portal page. It is an atomic element and cannot contain other elements within it. Nevertheless, it can be combined with other elements to build cohesive design layouts such as hero sections, footers, etc.


NotesNote: After placing the Icon element onto the building space within the portal page designer, you can choose a glyph from a searchable gallery in the Properties pane.

Ideal for:

  1. Common actions such as edit, delete, share, or download indicators
  2. Status symbols like alerts, success states, or warnings paired with a label
  3. Decorative visual accents in cards, tiles, or section headers
  4. Navigation cues sitting alongside menu text

2. Display properties

Property Description
Element Name The internal identifier for this Icon element. This name is auto-generated on placing within the designer and can be customized as required.
Icon The glyph rendered by this element, selected from a searchable icon library. The required glyphs can be searched by keyword or browsed manually. Once a glyph is selected, three additional properties control its appearance within the element box.

3. Styling properties

Icon exposes Default and Hover visual states. Each state can be styled independently.

  1. Layout *link*
  2. Background *link*
  3. Padding *link*
  4. Margin *link*
  5. Corner Radius *link*
  6. Border *link*
  7. Shadow *link*
  8. Opacity *link*

4. Action properties

The Actions tab controls what happens when a portal user clicks an icon and triggers a preconfigured ON CLICK action. The actions can be:

  1. None - No action is performed when the icon is clicked. This is the default option for the ON CLICK action.
  1. Navigate To - Navigates the portal user to a destination when the icon is clicked. Selecting this option reveals two additional properties.
    1. Page / URL - This is the navigation's destination. You can either enter a publicly accessible URL directly, or select from the list of portal pages available in the dropdown. The dropdown lists all default pages (Sign In, Sign Up, Reset Password, and Create Password) and any custom pages created in the portal.
    2. Open In - This property controls how the destination loads. While Same Window reloads the current browser tab to display the destination portal page or URL, New Window opens it in a separate browser tab.

5. Try it yourself

Add an Icon element and try the following:

  1. Open the icon picker, search for "arrow", and select a glyph. Switch between Outline and Solid to observe how visual weight changes.
  2. Set Size to 40px, apply a background color, and set Corner Radius to Rounded to create a circular icon badge.
  3. Pair a small Icon at 16px Outline style beside a Text element to build a compact icon-and-label combination.
  4. Set Opacity to 30% and place the icon behind other elements as a decorative watermark.
  1. Configuring and managing portal pages *link*