Skip to main content

Icon Selector

Icon Selector is a component designed for adding a decorative icon on a page, typically used next to the Title component or alongside additional text. Icons used are from the Font Awesome Library.

Authoring

The Icon Selector component allows you to choose an icon to display to the user that helps visually enhance the information it is paired with.

Configuring the Properties Tab

  • Icon Selector: Select an icon from the FontAwesome Library using an interactive GUI dropdown.
  • Is Decorative?: When checked, marks the Icon as decorative only for assistive technologies. 
  • Aria Label: If the Icon is not decorative, enter an aria-label that helps describe the icon's function.
     

Configuring the Styles

  • Size: Choose between Small, Medium, Large, or Extra Large Icon sizes.
  • Color: Choose between White, Theme (Dark Blue), or Black for the Icon color.
  • Alignment: Choose between Left, Center, and Right for the Icon alignment.

Examples

Small & Theme Color & Left Aligned

Medium & Theme Color & Left Aligned

Large & Theme Color & Left Aligned

Extra Large & Theme Color & Left Aligned

Small & Black & Right Aligned

Medium & Black & Right Aligned

Large & Black & Right Aligned

Extra Large & Black & Right Aligned

Small & White & Center Aligned

Medium & White & Center Aligned

Large & White & Center Aligned

Extra Large & White & Center Aligned