Icons now show up across your Experiences: on your Launcher (its button, title, items, and welcome button), on the buttons and titles of your Steps, and on the small cues that open a Step or Tooltip on the page. Pick them from a built-in icon library or upload your own, then set where each icon sits and what color it takes.
Availability & Usage
🧑💼 Anyone who can edit Styling can choose the icon library, upload icons, and set icon colors. Anyone building an Experience can add an icon
📍 Works with Launchers, and with the Steps of your Tours, Tooltips and other Experiences
⚙️ Manage from Product Context → Styling → Assets
Choose your account's icon library
Your account starts on Phosphor Icons, so you can add icons straight away. You can switch to Lucide Icons, Iconoir, Remix Icons, Heroicons, or Material Symbols. The choice is shared by your whole team, so pick the set that best matches your product's own style.
Go to Product Context → Styling → Assets
In the Icon Library card, click the library you want
If live Experiences already use an icon from your current library, you'll see "Switch icon library?" with a list of them. Click "Switch icon library" to go ahead
ℹ️ Switching libraries doesn't change icons already in use: those Experiences keep their current icon, and only new icons come from the new library. Your custom icons aren't affected.
Upload your own icons
If your product already has its own icon set, upload it so your Experiences match. Custom icons sit alongside your icon library wherever you pick an icon, up to 250 per account.
Add icons
Go to Product Context → Styling → Assets, and in the Custom Icons card click "Upload icons"
Choose one or more SVG files. Other file types aren't supported, and each icon must be under 8 KB
Check or edit the name for each icon (each name must be unique), then click Add
Rename, replace, or delete an icon
Each icon's card shows whether it's in use, for example "Used in 2 live Experiences" or "Not in use".
Open the menu on the icon's card
Choose Rename, Replace, or Delete. To delete, tick "I understand this can't be undone." first
⚠️ Replacing or deleting a custom icon only changes what's offered from now on. Experiences that already use it keep showing the version they were set up with.
Add an icon to a button, title, or Launcher item
Wherever an icon option is available (a Step's buttons or title, or your Launcher's button, title, items or welcome button), open the icon picker to choose one.
Search by name, or browse the grid
If you've uploaded custom icons, switch between the Custom Icons tab and your library's tab. A search looks across both at once
Icons you've used recently, and the one already selected, show at the top so you don't have to scroll to find them again
The picker stays open after you pick an icon, so you can try a few against the live preview before settling on one. To take an icon off, click "Remove icon".
Set an icon's color and placement
Under "Icon placement", choose where the icon sits: Before or After the text. On buttons and the Launcher's welcome button you can also choose Icon only, which hides the text. An icon-only button still reads its label out to screen readers.
Anyone who can edit Styling can set a color for a library icon. Leave it unset and the icon matches the text around it, including switching between your light and dark Theme. A custom icon always keeps the colors it was uploaded with.
Add an icon to an on-page trigger
A Step or Tooltip that opens from a small cue on the page, rather than automatically, can use an icon from your library as that cue. Your Launcher's button can use one too.
Open the Step or Tooltip's trigger settings
Choose Icon or Text as the cue type (the other options are Element and Hotspot)
For Icon, pick one under "Select from Icon Library". For Text, type your text. The cue updates right away so you can see it in place
An Icon or Text cue has a background behind it, which you can turn off. Corner and Padding options show while the cue has a background or a border.
The cue you replaced shows beside the picker, so you can click it to switch back.
Key Takeaways
Your account starts on Phosphor Icons. Switch library, or upload your own SVG icons, from Product Context → Styling → Assets
Icons can go on your Launcher's button, title, items and welcome button, on Step buttons and titles, and on on-page trigger cues
Custom icons keep their own colors. Library icons match your text color unless you set one, and follow light and dark mode
Switching library, or replacing or deleting a custom icon, never changes Experiences already using an icon
Experiences that don't use any icon look exactly the same as before