- Where to find it
- Labelled Icon Position 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
When a button has an icon, this decides which side of the words it sits on. It does nothing at all when there is no icon.
The convention is worth following because it carries meaning. An icon that describes the action — a download glyph, a bin, a magnifier — goes before the label, where it is read as part of the name. An icon that points at what happens next — an arrow, a chevron, an external-link mark — goes after it, where it reads as direction.
What each option does
| Option | What you will see |
|---|---|
leading | The icon appears before the label. The default. |
trailing | The icon appears after the label. |
When you would use it
- Moving an arrow to the end of a "Continue" button.
- Keeping a descriptive symbol in front of the words, which is the default.
How to change it
- Click the button on the canvas.
- In the Modify drawer, open "Selected Component", then "Icon Position".
- Choose leading or trailing.
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
- This setting has no effect until an icon is chosen under Icon.
- An arrow before the words reads as "back" to most people, whatever the label says.
Related settings
Where to go next
- Back to the Button component — everything else it can do.
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.