An Icon is a visual anchor that helps capture the user’s attention and direct them to specific actions. The icon block allows you to add icons to your page in a matter of seconds.


The icon block is a specifically designed block that allows you to add pre-defined and custom SVG icons with a few clicks.
Add an Icon


Select Icon

Use the Icon Selector to select the desired icon.
You can choose from four different Icon libraries, including Font Awesome, Phosphor Light, Phosphor Regular, Phosphor Duotone.
Open icon selector

Icon Size

The Icon Size property defines the size of the icon.
Unless a size is specified, you will not be able to visualise the Icon.
Modify icon size

Icon Colour

The Icon colour can be selected in the Primary tab.

Icon Margin and Padding

You can style an Icon by adjusting the Margin and Padding.
Margin and Padding

Icon Border

The Icon Border property allows you to add a border to an Icon and adjust radius, style, colour and width.