Skip to content

Adding an Icon

You get a sharp icon at any size, alone or inside a coloured shape. Use it to mark a heading, build a feature grid or add a small clickable link.

Rocket icon in circle style at 3x size

Add an icon

Open your page while logged in: the builder controls appear when you hover the content area. Your first page shows the basics.

  1. Hover the column and click + in its control bar, or click Add Elements on an empty page. Open the Content tab and click Icon. It lands at the top of the column and its settings dialog opens.
  2. In the Icon field at the top of the dialog, choose an icon set, type in Search and click an icon. It is highlighted and its class name shows below the grid.
  3. Choose a Size, for example Very Large (3x).
  4. Click the Icon utilities heading to expand it and set Style to Circle.
  5. Click Save in the dialog. Then click Save in the toolbar at the top of the content area to store the page.

What you see

The icon you picked shows at the size you chose, white inside a dark grey circle by default. In the video, a rocket appears at Very Large (3x), three times the normal size. Visitors see it once you save the page and it is published.

Set up your icon

Hover the element and open More > Settings in its control bar. Options:

  • Icon: a picker with a Search box, an icon set list and a grid of icons.
  • Size: Normal, Large, Extra Large (2x), Very Large (3x), Huge (4x) or Gigantic (5x).
  • Link: makes the icon clickable.
  • Link target: Same window or New window. It shows once you add a link.
  • Style: a shape behind the icon: None, Rounded, Circle or Square. It sits under Icon utilities.
  • Icon animation: No, Spin or Pulse.
  • Icon orientation: Normal, Rotate 90, Rotate 180, Rotate 270, Flip horizontal or Flip vertical.

If you don't see it

  • Icon is not in the Content tab. Your user profile hides it. Ask an administrator to enable it in User Profiles.
  • It is gone after you reload. The page was not saved. Add it again and click Save in the toolbar at the top of the content area.
  • The icon you want is not in the picker. Your user profile limits the icon sets. Ask an administrator to add the set in User Profiles.
  • The icon is too small to notice. Size is Normal or Large. Hover the element and open More > Settings, then pick Extra Large (2x) or bigger.
  • The circle is the wrong colour. The shape is dark grey by default. Hover the element and open More > Settings, click the Style heading near the bottom and set Background. Font color changes the icon itself.

What's next?

Style tab to change colours and spacing for your icon.

Something wrong or missing on this page? Report it or edit the page.