Skip to main content Skip to navigation

Add icons in the Components Editor

The Components Editor enables you to add icons to your page - for example, to indicate that a link is to a PDF document, to draw attention to email addresses or important information, or to add social media logos such as Facebook and Instagram.

Note: These icons are treated by SiteBuilder as purely decorative, and will not be visible to users browsing with assistive technologies such as screen readers. In order to comply with accessibility guidance, make sure that any important or required information is also included in the text of your page.

  1. Browse to the page where you want to add an icon.

  2. Go to Edit > Edit centre content:

    The SiteBuilder 'Edit' menu, with the 'Edit centre content' option highlighted

  3. Place the cursor where you want to add an icon.

  4. Go to Icons/buttons > Icons:

    The 'Add icons' menu in the Components Editor, with the 'Icons' option highlighted

    Alternatively, select an existing icon on the page and select Settings in the toolbar that appears:

    The component toolbar for an icon, with the 'Settings' option highlighted

  5. The Icons pop-up appears:

    The 'Icons' options pop-up

  6. At the top of the pop-up is a row of common file type icons you can quickly select.

    Tip: You can also add a document icon directly to text links when creating a link.

  7. If you Need something else, enter a search term in the box to display icons that match:

    The 'Icons' options pop-up, displaying results for 'arrow'

  8. Select the icon you want from the options presented, or alter or refine your search.

  9. Optionally, select the Flip horizontal or Flip vertical checkboxes if you want to mirror the icon's appearance in one or both directions.

  10. You can make the icon up to 5 times larger by selecting an option from the Icon size drop-down list.

  11. Optionally, change the orientation of the icon in 90-degree increments by selecting an option from the Rotate icon drop-down list.

  12. Select Add icon.

Related articles