Contents

Icon

Which symbol the icon component draws.

Where to find it
Labelled Icon in the "Selected Component" section of the Modify drawer.
Offered by
The Icon 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

This is where you choose the symbol itself, from a set of just over 1,700 line icons. Type in the search box and click the one you want.

The search looks at more than the icon names, which matters because you rarely know what an icon is called. Searching "launch" finds the rocket. Searching "trash" finds the bin. Type what the symbol means to you rather than guessing at its official name, and if the first word does not work, try the thing you would say out loud when pointing at it.

Like most settings, it can hold a different icon per device size. That is occasionally useful — a detailed symbol on desktop and a simpler one on phones — but most of the time one icon for every size is the right answer, which is why "Same icon for all device resolutions" starts ticked.

The icon has no colour or size of its own. It draws itself in whatever the surrounding text colour is and at 24 pixels square, and both are changed on the column rather than here.

When you would use it

  • Putting a symbol next to a label, a heading, or a list item.
  • A dense symbol reads poorly at phone size and a simpler one would work better.

How to change it

  1. Click the icon component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Icon".
  3. Search for the symbol you want and click it. The canvas updates as you go.
  4. Uncheck "Same icon for all device resolutions" if you want a different symbol per device.
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

  • An icon on its own says nothing to a blind visitor — it is deliberately hidden from screen readers, because a decorative symbol being read aloud is worse than silence. If the symbol carries meaning that is not already in the words next to it, put that meaning in a piece of text.
  • To change the colour, set Text Color on the column. The icon follows the text colour around it, so it also picks up a colour inherited from a row or a parent column.
  • To change the size, set Width and Height on the column. There is no size setting on the component itself.
  • The drawing is saved into your page when you pick it, which is what makes icons appear instantly for visitors with nothing extra to download. It also means an icon already on a page keeps the drawing it was given: if the icon set later changes that symbol, pick it again to take the new version.
  • A fresh icon component shows a placeholder symbol until you choose one. It is a real icon, not an error, so it is easy to miss that you never made a choice.

Related settings

Where to go next