Close popover
Thrinath Ikkurthi (ikkut)
Front End Developer
Pegasystems Inc.
ikkut Member since 2018 2 posts
Posted: October 8, 2020
Last activity: October 8, 2020

Icons with rounded corners

Over the last couple of years icons with rounded corners have become a very common use case. It takes less cognitive load to see rounded icons than it does to see sharp-cornered ones.

Icons with rounded corners

How can we leverage them in our current Pega applications? How can we get rounded corners for our icons?

" icon-rounded " helper class has been added recently in all types of apps based on Ui Kit, Theme-Cosmos, Theme-Clarity

icon-rounded helper class gives a grey-background with rounded corner which fits perfectly at it's position.


Step 1: Open the advanced presentation options of the icon/image

Step 2: Add "icon-rounded" helper class in cell read-write & cell read-only classes

Configuration Save and Refresh to see your icon with rounded corners.

For any other background colour, users are suggested to add own custom css in stylesheets.

Custom css class configuration

Note: In Theme-Clarity based apps it's not suggested to use this helper class along side with icon-large/medium because inherently those helper classes comes with a grey-background, rounded corners and different padding.


Pega Platform User Experience Front-End Developer Developer Knowledge Share