# The Design page: themes, icon packs and custom icons URL: https://www.panoramr.com/help/design-hub Category: Design and branding Keywords: design hub, design page, icon packs, sandbox, custom icons, upload icon, svg icon, preview theme, glyph glossary, hotspot icon pack, account design Last checked: 2026-10-22 The account's Design page in four parts: Overview, Themes, Icon packs and Sandbox. What each button does, and what it cannot do. The account's Design page is where you look at themes, tune hotspot icon packs and keep your own icons, without opening a tour. It cannot apply a theme or change a tour: that is done on the tour's **Design** tab ([Choose a look for your tour](https://www.panoramr.com/help/themes-and-my-designs)). Open it from the account's row of tabs (Dashboard, Tours and so on) by clicking **Design**. **Who can use it.** Everyone signed in, on every plan. A theme card here shows **Pro** or **Free** as on the tour's Design tab; previewing a **Pro** theme is open to everyone ([Pro themes](https://www.panoramr.com/help/pro-themes)). **What is saved.** Playing in the **Sandbox** saves nothing until you press **Save Icon Pack**. The part that is open is in the address (`/design?tab=sandbox`), so a reload or a link comes back to the same part. A short video of the four parts plays from the **Help** button at the top right, beside **Open sandbox**. ## The four parts ### Overview A first look at everything: four themes, the icon packs and a place for your own icons. **Where:** **Design** in the account's row of tabs > **Overview**. The page opens here. **Default:** shown first, unless the address names another part with `?tab=`. **What it does:** Shows the first four themes with a **Preview** button and an **All themes** link; the platform's **Icon packs** with **Load in sandbox** and an **Open sandbox** link; your saved packs under **My saved icon packs** with **Load in sandbox** and **Delete**; and **Custom icons** with **Paste vector** and **Upload icon**. **What visitors see:** Nothing. Visitors of a tour never see this page. **Related:** **Themes**, **Icon packs**. ### Themes The full list of themes, with your saved designs after them. **Where:** **Design** in the account's row of tabs > **Themes**. **Default:** none **What it does:** Shows a card for each theme: a picture of a tour in it (or its colors as dots), a `Theme` tag (with a **Pro** tag beside it on a Pro theme) and the theme's name, a description and the icon pack it uses. A heading counts them (`N themes`). A theme that staff have hidden is not listed for you, and you cannot apply a theme from this page. **What visitors see:** Nothing. **Related:** **Preview Live Tour**, **Customize Pack**. ### Icon packs The hotspot icon packs you can load into the sandbox, and your own icons. **Where:** **Design** in the account's row of tabs > **Icon packs**. **Default:** none **What it does:** Lists the platform's packs under `System Curated Packs` and yours under `My Custom Icon Packs` (`No custom icon packs created yet` until you save one). **Load in Sandbox** opens a pack in the sandbox, **View pack** shows every icon of it, and a bin button deletes one of yours. The `Hotspot Icon Packs` heading adds a **Design Custom Icon Pack** button that opens the sandbox. Below are `My Custom Icon Library` (your uploaded icons) and the `Icon Glyph Glossary`, a searchable list of the icon shapes with a button to copy an icon's reference. **What visitors see:** Nothing until a pack is applied to a tour from its Design tab. A pack sets the colors, hover effect and glow of the tour's hotspots, and a tour keeps its own copy of a pack. **Related:** [Customize hotspot icons with SVG and PNG uploads](https://www.panoramr.com/help/customizing-hotspot-icons-with-svg-and-png-uploads), [Hotspot looks and presets](https://www.panoramr.com/help/hotspot-looks-and-presets). ### Sandbox A practice tour where you tune a hotspot style and see it move. **Where:** **Design** in the account's row of tabs > **Sandbox**, or the **Open sandbox** button beside the page's title. **Default:** a blue-violet style with a pulse on hover. **What it does:** A **Sandbox customiser** sets the base, secondary and background colors, the icon color, scale, background blur, opacities, hover glow radius and opacity, and the hover animation of hotspots and of the interface. The canvas shows hotspots and a bottom bar; hover over them to test each animation. **Style Preset Pack** loads a pack's settings. The settings become compiled CSS variables in a tour. **What visitors see:** Nothing until you save the style as a pack and apply it to a tour. **Related:** **Save Icon Pack**, [Hotspot looks and presets](https://www.panoramr.com/help/hotspot-looks-and-presets). ## Themes and previews ### Preview Opens a window showing the theme on your most recent tour. **Where:** **Design** > **Overview**, on each of the first four theme cards. **Default:** none **What it does:** Shows your most recently edited tour wearing the theme, without saving anything. With no tour yet the window says `Create a tour first, then come back to preview themes on it.` **Close** shuts it. **What visitors see:** Nothing. **Related:** **Preview Live Tour**. ### Preview Live Tour The same preview, from the full list of themes. **Where:** **Design** > **Themes**, on each theme card. **Default:** none **What it does:** Opens the window `Previewing on ` with the tour in that theme. It changes nothing in the tour. **What visitors see:** Nothing. **Needs:** At least one tour of your own. **Related:** **Preview**. ### Customize Pack Loads a theme's icon pack into the sandbox. **Where:** **Design** > **Themes**, on each theme card. **Default:** none **What it does:** Opens the **Sandbox** with the settings of the pack the theme uses. A theme with no pack of its own loads the first built-in pack. **What visitors see:** Nothing; the theme is not changed. **Related:** **Save Icon Pack**. ## Icon packs and your icons ### Load in Sandbox Opens one icon pack in the sandbox. **Where:** **Design** > **Icon packs** or **Overview**, on each pack card. **Default:** none **What it does:** Copies the pack's colors, scale, blur, opacities, hover animations and glow into the sandbox and switches to it. **What visitors see:** Nothing. **Related:** **Save Icon Pack**. ### Save Icon Pack Keeps the sandbox style as a pack of your own. **Where:** **Design** > **Sandbox** > **Save Icon Pack**. **Default:** none **What it does:** Opens `Save Custom Icon Pack`. Give it an **Icon Pack Name** and a **Description**, and choose a hotspot icon for each type under **Hotspot Icons**. When you started from one of your own packs the choice is **Overwrite Active** or **Save as New**: overwriting replaces the pack's saved settings, and tours that use it show the new values the next time they are published. The window lists the parameters it includes. `Icon pack saved.` or `Icon pack updated.` confirms it. **What visitors see:** Nothing until a tour uses the pack. **Related:** [Customize hotspot icons](https://www.panoramr.com/help/customizing-hotspot-icons-with-svg-and-png-uploads). ### Upload Image Icon Adds a picture as one of your own icons. **Where:** **Design** > **Icon packs** > `My Custom Icon Library` > **Upload Image Icon**, or **Upload icon** on the **Overview**. **Default:** none **What it does:** Takes a file by drag and drop or **Browse**: transparent PNG, WebP, JPG or SVG, up to 5 MB. A **Display Name (Optional)** names it. The library lists it with its size and a tag. `Custom icon uploaded successfully.` confirms it. **What visitors see:** Nothing until a hotspot uses it. **Needs:** A verified email address where the site asks for one. **Related:** **Paste Vector SVG**. ### Paste Vector SVG Adds an icon from SVG code. **Where:** **Design** > **Icon packs** > `My Custom Icon Library` > **Paste Vector SVG**, or **Paste vector** on the **Overview**. **Default:** none **What it does:** Takes an **Icon Name** and the raw SVG code (up to 200,000 characters). The code is cleaned before it is kept. `Vector custom icon saved successfully.` confirms it. **What visitors see:** Nothing until a hotspot uses it. **Related:** **Upload Image Icon**. ### Copy Key Copies an icon's reference. **Where:** **Design** > **Icon packs** > `My Custom Icon Library`, under each icon. **Default:** none **What it does:** Copies the icon's key (`custom_icon_`) and shows `Copied!`. A bin button next to it deletes the icon after a question that names where the icon is still used. **What visitors see:** Nothing. **Related:** [Customize hotspot icons](https://www.panoramr.com/help/customizing-hotspot-icons-with-svg-and-png-uploads). ## Troubleshooting **Preview Live Tour shows nothing.** The preview needs one of your tours; make one first. **I cannot apply a theme here.** Apply themes on a tour's own **Design** tab: the Design page only previews them. **An icon will not upload.** It must be a PNG, WebP, JPG or SVG up to 5 MB. A vector must be SVG code. ## Video transcript: The Design hub: themes, icon packs and the sandbox The Design hub keeps the looks you can use on any tour. The Overview shows your themes, and the hotspot icon packs, at a glance. Themes lists every theme. Preview shows one on a tour of yours, without saving anything, and Customize Pack takes its icon pack to the sandbox. You apply a theme from a tour's own Design tab. Icon packs are hotspot styles: the colours, the hover effect and the glow. Load one in the sandbox, or view all its icons. Your own icons are here too: upload an image, or paste an SVG, and use it as a hotspot. The sandbox is the playground. Start from a preset, change the colours, the size and the hover animation, and watch the hotspots in the picture. Save it as your own icon pack, then apply it from a tour's Design tab.