Documentation
HomeForumHelpYouTube
Search
⌃K
Links

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.

Basics

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
If you want to add an icon outside any other block on the page:
  1. 1.
    Click on the ➕ ​​icon to open the Inserter Panel
  2. 2.
    Search for the
    icon block
  3. 3.
    Click on the
    icon block to insert it into your page
If you want to add an icon inside a parent block:
  1. 1.
    Open the Quick Insert panel in the parent block
  2. 2.
    Search for the
    icon block
  3. 3.
    Click on the
    icon block to insert it into your parent block

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
  1. 1.
    Select an icon block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary Tab
  4. 4.
    Open the Icon Panel
  5. 5.
    Find the Icon property
  6. 6.
    Click on the 🌏 Icon to open the Icon Selector
  7. 7.
    Choose desired Icon from one of the four Libraries provided in the dropdown
  8. 8.
    Toggle "Active" on to activate icon

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
  1. 1.
    Select an icon block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary Tab
  4. 4.
    Open the Icon Panel
  5. 5.
    Find the Icon Size property
  6. 6.
    Enter the desired value

Icon Colour

The Icon colour can be selected in the Primary tab.
​
​
Colour
  1. 1.
    Select an icon block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary Tab
  4. 4.
    Open the Colours tab
  5. 5.
    Select required Icon and Background colours using the colour pickers

Icon Margin and Padding

You can style an Icon by adjusting the Margin and Padding.
​
​
Margin and Padding
  1. 1.
    Select an icon block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary Tab
  4. 4.
    Open the Margin and Padding tab
  5. 5.
    Adjust Margin and Padding as required

Icon Border

The Icon Border property allows you to add a border to an Icon and adjust radius, style, colour and width.
​
​
​
Border
  1. 1.
    Select an icon block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary Tab
  4. 4.
    Open the Border tab
  5. 5.
    Adjust Border properties as required
Blocks - Previous
Hook
Next - Blocks
Image
Last modified 6mo ago