Icon
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.
If you want to add an
icon
outside any other block on the page:- 1.Click on the ➕ icon to open the Inserter Panel
- 2.Search for the
icon
block - 3.Click on the
icon
block to insert it into your page
If you want to add an
icon
inside a parent block:- 1.Open the Quick Insert panel in the parent block
- 2.Search for the
icon
block - 3.Click on the
icon
block to insert it into your parent block
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.
- 1.Select an
icon
block - 2.Open the Block Inspector
- 3.Navigate to the Primary Tab
- 4.Open the Icon Panel
- 5.Find the Icon property
- 6.Click on the 🌏 Icon to open the Icon Selector
- 7.Choose desired Icon from one of the four Libraries provided in the dropdown
- 8.Toggle "Active" on to activate icon
The Icon Size property defines the size of the icon.
Unless a size is specified, you will not be able to visualise the Icon.
The Icon colour can be selected in the Primary tab.
You can style an Icon by adjusting the Margin and Padding.
The Icon Border property allows you to add a border to an Icon and adjust radius, style, colour and width.
Last modified 6mo ago