Use your own SVG or image icons for hotspots
Upload a PNG, JPG, WebP or SVG icon in the Design Hub and choose it for a type of hotspot on a tour's Design tab. There is no icon setting on a single hotspot.
Guide5 min read Updated
On this page
The short answer
To use your own icon, add it to My Custom Icon Library in the Design Hub, then choose it in the tour's Hotspots Setup panel (in the Advanced view) and click Save & Render. A single hotspot has no icon setting: a tour chooses one icon for each type of hotspot, and every hotspot of that type in the tour uses it.
Who can do it
- Adding an icon: any signed-in account, on every plan. Icons count against your library storage (250 MB on Free, 2 GB on Pro, 10 GB on Agency, no limit on Enterprise), plus the room each running Vault adds (500 MB for a Vault of 10 up to 5 GB for a Vault of 250). While your email address is not confirmed, an upload can send you to the Check your inbox page (sign up and verify email).
- Choosing icons for a tour: the owner, and Admin collaborators by default. Save & Render also needs the Settings tab, which Admins have. A collaborator's lists show the tour owner's icons, not their own.
- Visitors: a tour in a free theme, the Default Theme, shows yours on its public page and in embeds, on every plan. A tour in a Pro theme that has never been hosted, on a Free plan, shows the free Default look, and a free download is the Standard design: both have the standard icons. The editor, Preview and the Design preview show yours. A paid plan, or a tour that is in a Vault or was in one, shows yours to visitors too, in any theme.
Add an icon to your library
- Click Dashboard, then Design, and open the Hotspots & Icons tab of the Design Hub.
- In My Custom Icon Library, click Upload Image Icon or Paste Vector SVG.
- For a file, drop it or browse for it, give it a name if you like (Display Name (Optional), up to 50 characters) and click Upload Custom Icon. For SVG code, type an Icon Name, paste the whole
<svg>element into Raw SVG XML Code and click Save Vector Icon. A green message confirms it, and the icon appears in the grid.
| Picture file | SVG file or pasted code | |
|---|---|---|
| Accepts | JPG, PNG or WebP | An SVG file, or code pasted into the window |
| Limit | 5 MB | 5 MB for a file, 200,000 characters of pasted code |
| What is kept | The picture is shrunk to fit inside 512 by 512 pixels, never enlarged, and saved as a WebP. A transparent PNG stays transparent. | Scripts, event handlers and links to other sites are removed |
Choose it for a tour
- Open the tour's Design tab and click Advanced. The icon lists are hidden in the Basic view.
- Under Component Modules, click Hotspots Setup (click Advanced at the right end of the tab row first if you are in Basic).
- Open the list for the type of hotspot. Your icons are in the group Custom Icons, under the names you gave them with
.webpor.svgadded. The row of sample hotspots in the panel shows your choice at once. - Click Save & Render. If Draft Workflows is on, click Publish Changes too (my changes do not show).
| List | Hotspots that use it |
|---|---|
| Info Hotspot Icon | Info hotspots: Classic Panel, Modern Tooltip, Simple Tooltip, Full Modal Popup, Pulsing Icon and Use Global Setting |
| Video Hotspot Icon | Video |
| Audio Hotspot Icon | Audio Narration, both kinds |
| Link Hotspot Icon | External Web Link |
| Navigation Arrow Icon | Link hotspots, the arrows between scenes |
Image Gallery and E-Commerce Product always draw their own icon, and Surface Media has no badge, so none of them has a list. Your icon is drawn in the same box as the built-in icons, scaled to fit.
Troubleshooting
The window says Failed to upload custom icon. or Failed to save vector icon. The server refused it for a reason the window does not show. One cause is a full library: open the Asset Library, check the Library storage bar and delete what you no longer need.
The file field must be a file of type: jpg, jpeg, png, webp, svg. The file is another type, a GIF for example. The file field must not be greater than 5120 kilobytes. The file is over 5 MB.
A pasted <path> does not work. The window's hint mentions a bare <path>, but only a complete <svg>…</svg> element is accepted.
My icon does not show. Check that you chose it in the list for that type of hotspot, that you saved, and that Icon Style in the same panel is not Legacy PNG, which draws the old built-in pictures for info and navigation hotspots. On a Free plan, a tour in a Pro theme that has never been hosted shows the standard icons.
My icon changed back. Choosing a theme or an Icon Pack, or applying a preset you saved from this panel, replaces the icon choices. Choose your icons last.
My SVG is the wrong color. A hotspot is drawn in the look's icon color, and an SVG that sets its own colors keeps them. Draw it with currentColor to follow the look.
Deleting an icon. In the Design Hub the trash button (tooltip Permanently Delete Icon) asks first, names the tours, packs, themes and presets that use the icon, and deletes it for good. In the Asset Library the Icons tab can instead move it to the Trash, where it can be restored. Once its stored copy is refreshed, a tour that used the icon draws the default icon for that type.
Next steps
Was this article helpful?