Contents

Icon

An optional symbol shown beside the button label.

Where to find it
Labelled Icon in the "Selected Component" section of the Modify drawer.
Offered by
The Button component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

A button can carry a small symbol next to its words — an arrow on "Continue", a download glyph on "Get the report", a bin on "Delete". You pick it from the same set of just over 1,700 line icons the Icon component uses, and the search matches meanings as well as names, so "launch" finds the rocket.

The symbol sizes itself to the button. It is drawn at the height of the label text and in the same colour, so it stays right as you change the button preset or the font size, with nothing to adjust.

Leaving this empty is the normal case. Most buttons on most pages are better as plain words, and an icon earns its place when it says something the label cannot say as quickly.

When you would use it

  • An arrow or chevron on a button that moves the visitor forward.
  • A recognisable symbol that speeds up scanning — download, external link, delete.
  • An icon-only button in a tight space, paired with a written label for screen readers.

How to change it

  1. Click the button on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Icon".
  3. Search for the symbol you want and click it.
  4. To remove it again, clear the selection.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • The symbol is hidden from screen readers, because the button is already named by its words. That is the right behaviour for decoration and the wrong behaviour for an icon-only button, which needs a written label of its own.
  • Two icons on one button is usually one too many. If both ends need a symbol, the button is probably doing two jobs.
  • The drawing is saved into your page when you pick it, so a button already published keeps the symbol it was given. If the icon set later redraws that symbol, pick it again to take the new version.

Related settings

Where to go next