Shortcuts
Next region
F9
Previous region
ShiftF9
Jump to toast
⌥Enter
Dismiss toast
⌥Q
Go to incoming interaction popup.
⌥Enter
Dismiss incoming interaction popup.
⌥Q

Icon

Icons are symbols, also known as glyphs, used to depict an idea, object, or action.

Usage

  • Icons should rarely be used inside of buttons with other text. If an icon is to be used within a button with text, it should be in a simple variant.
  • If an icon is interactable without text, use a button with the icon property. This allows for a label to be displayed within a tooltip when a user hovers over the icon.
  • Icons should always be their default size of 18px.
  • All icons should have labels. Labels can be shown on focus or hover to save space.
  • All icons should be used for a single purpose within an application.

Configuration

To learn how to configure this component in your Constellation application, visit Pega Documentation.

All information on this site pertains to the Constellation UX System (from 8.8 and onwards). Looking for something else? See resources specifically for Theme Cosmos. If you have questions, concerns, or any other feedback, please reach to us on Pega Support and include the capability 'User Experience' and 'Constellation' in your request.

Related components