Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Adding an icon to a control

Updated on April 5, 2022

Pega Platform includes an icon font set that you can add to your application's skin. You can then add icons from the system's icon font set to a control.

First identify the icon that you want to use:

  1. Open the skin record and add the icon set to the skin, if you haven't already.

  2. In the skin record, next to the py-icons row, click the Open icon to open the text file.

  3. Scroll through the file until you find the name of the icon that you need.

Next, add the icon font to the control:

  1. Open the section that contains the control and then open its Properties panel.

  2. On the General tab, select Icon Class from the Image source drop-down list.

  3. Enter the letters "pi", a space, and the name of the icon.

  4. Submit the updated properties and save the section.

To see how the button is displayed on the form, select Preview in the control record's Actions menu.

  • Icon fonts

    Use icons to add images to controls. Pega Platform includes a set of icon fonts in the py-icons CSS text file, which is in the UI Kit ruleset. Many of these fonts are used in the standard user portals and forms.

  • Adding the icon font set

    Pega Platform includes an icon font set that you can use to add images to a control. To make the icon fonts available, you add the py-icons text file to your application skin.

  • Previewing and selecting predefined icons with the icon class picker

    A single skin can have multiple icon fonts, including the standard icon font set provided in py-icons. To preview and select the correct icon for a control, use the icon class picker on the Properties panel for the button, link, or icon. Using predefined icons brings greater consistency to your user interface and helps users to understand the cont

  • Reviewing available icons

    Being familiar with the icons that are available for the controls in your application can save you development time and bring greater consistency to the look and feel of your applications.

  • Previous topic Adding the icon font set
  • Next topic Previewing and selecting predefined icons with the icon class picker

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us