Icon Name

Which icon an icon component displays, chosen from a searchable list.

Where to find it
Labelled Icon Name in the "Selected Component" section of the Modify drawer.
Per device
No — this setting has a single value that applies on every screen.

In plain English

Components that show an icon — an icon button, a floating action button — need to know which one. This setting is a searchable list of every available icon, so you can type "cart" or "arrow" and pick from what comes back rather than remembering names.

Choose an icon whose meaning is already well established. A magnifying glass means search, a house means home, three stacked lines mean a menu. An icon that needs explaining is doing less work than a word would.

When you would use it

  • Setting up an icon button or a floating action button.
  • Changing an icon whose meaning has not been landing with visitors.

How to change it

  1. Click the icon component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Icon Name".
  3. Type part of what you want — "search", "chevron", "trash" — and pick from the results.

Watch out for

  • An icon on its own is ambiguous to many visitors and invisible to screen readers unless the component provides a label. Pair icons with text wherever the meaning is not universally obvious.
  • Stick to one icon family across a page. Mixed line weights and styles read as unfinished.

Related settings

Where to go next