# Icon bar settings in the Design tab

URL: https://www.panoramr.com/help/design-icon-bar
Category: Design and branding
Keywords: icon bar, action bar, toolbar, navigation buttons, floating pill, bar position
Last checked: 2026-10-22

Every setting of the Icon bar panel in the Design tab: where it is, what it starts as, what it does and what visitors see.

The icon bar is a bar of round buttons over the tour: previous and next room, zoom, play, full screen, map and more. This page lists every setting of the Icon bar panel (Design tab > Icon bar) in the **Design** tab, in the order the panel shows them. To choose which bars a tour has, start with [Customize the player's bars, sidebar and gallery](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars).

**Who can use it.** The owner and, by default, an Admin collaborator can open the Design tab; it is not open to Editors or Viewers. Every plan has the icon bar. In the **Basic** view the panel shows **Enable icon bar** and the **Icons** tab; the **Advanced** view adds the **Placement** and **Style** tabs. A tour on a Free plan that wears a Pro theme and has never been hosted shows visitors the free Default look, which has the icon bar off: see [What visitors get](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars#what-visitors-get).

**When visitors get a change.** The preview beside the panels shows it at once. Visitors get it after you click **Save & Render**, or after **Publish changes** when the tour uses Draft Workflows ([My changes do not show for visitors](https://www.panoramr.com/help/when-do-changes-show)).

## Turn the bar on

### Enable icon bar

The switch at the top of the panel puts the bar in the tour. It starts off.

**Where:** the Icon bar panel (Design tab > Icon bar), the switch at the top. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds the bar to the tour's player. The other settings of the panel only matter while it is on. A dot beside **Icon bar** in the list of modules shows that it is on.
**What visitors see:** A bar of round buttons over the picture. With the switch off they see no bar. On a screen 768 pixels wide or narrower the bar is not drawn when the tour has the phone's own bars, which the default settings give it.
**Related:** [Mobile navigation and the phone layout](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars#on-a-phone).

## Where the bar sits

These settings are on the **Placement** tab, in the card **Layout**. The tab is in the **Advanced** view only.

### Style

Choose the shape of the bar: a pill with a gap around it, or a strip along a whole edge.

**Where:** the Icon bar panel (Design tab > Icon bar), **Placement** tab > card **Layout** > **Style**. Advanced view.
**Default:** **Floating pill** (`floating`)
**What it does:** **Floating pill** is a rounded bar with a gap round it. **Full width** is a strip that runs the whole length of the edge you choose in **Position**: across it at the bottom or the top, down it at the left or the right. Any style can go at any edge.
**What visitors see:** A pill stands in the middle of its edge. At the foot of the player it stands above the thumbnails of **Bottom nav – thumbnails** when they are showing, and above the closed handle of the **Info and media panel**. A strip at the foot pushes the thumbnails up so that it does not cover them. A bar at the top starts under the top nav bars.
**Related:** **Position**, **Margin (px)**.

### Position

Choose which edge of the player the bar is on.

**Where:** the Icon bar panel (Design tab > Icon bar), **Placement** tab > card **Layout** > **Position**. Advanced view.
**Default:** **Bottom** (`bottom`)
**What it does:** Puts the bar at the **Bottom**, **Top**, **Left** or **Right** of the player. At the left or the right the buttons stand one above the other instead of side by side.
**What visitors see:** The bar at that edge. At a side it makes way for the side menu when that is open on the same side.
**Related:** **Style**.

### Margin (px)

Set the gap between a floating pill and the edge it is at.

**Where:** the Icon bar panel (Design tab > Icon bar), **Placement** tab > card **Layout** > **Margin (px)**. Advanced view.
**Default:** `10` pixels
**What it does:** A number from 0 to 100. The field shows only while **Style** is **Floating pill**; a strip has no gap.
**What visitors see:** The pill that many pixels from its edge. The thumbnails and the Info and media panel keep that gap too when the pill stands above them.
**Needs:** **Style** set to **Floating pill**.
**Related:** **Style**, **Position**.

## Which buttons the bar has

These settings are on the **Icons** tab, in the card **Icons in the bar**. The tab is there in both views. The card has a row for each button: a handle, its picture, its name and a switch. The card's heading says how many are on, for example `3 on`.

### Icons in the bar

The order of the rows is the order of the buttons. Drag a row, or press the up and down arrows beside it, to move it.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > card **Icons in the bar**. Basic and Advanced view.
**Default:** `prev, next, zoom, play, grid, move, vr, fullscreen, accessibility, info, floorplan, map, lang, listRooms`
**What it does:** Sets the order of the buttons. The rows are named as the same buttons are in the other bars: an icon has one name everywhere. A row that is switched off keeps its place in the list.
**What visitors see:** The buttons that are on, in that order: from left to right in a bar at the bottom or the top, from top to bottom in a bar at a side. **Field of View Zoom** and **Pitch Movement** are a pair of buttons each, and a pair stays together in its row's place.
**Related:** [Icon lists of the other bars](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars).

### Prev Navigation

Goes to the previous room.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Prev Navigation**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a button with the tooltip `Previous Room`.
**What visitors see:** A press moves to the room before the one on show, in the order of the tour's panoramas. From the first room it goes to the last.
**Related:** **Next Navigation**.

### Next Navigation

Goes to the next room.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Next Navigation**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a button with the tooltip `Next Room`.
**What visitors see:** A press moves to the room after the one on show. From the last room it goes to the first.
**Related:** **Prev Navigation**.

### Field of View Zoom

Zooms the picture in and out.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Field of View Zoom**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a pair of buttons: `Zoom Out (Wider FOV)` and `Zoom In (Narrow FOV)`.
**What visitors see:** Holding a button zooms until it is let go, with the mouse or a finger.
**Related:** [Restrict how far visitors can look and zoom](https://www.panoramr.com/help/restricting-vertical-viewing-angles).

### Autorotate

Starts and stops the tour turning by itself.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Autorotate**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a play and pause button with the tooltip `Toggle Auto-Rotation`.
**What visitors see:** The button shows a play triangle while the picture is still and a pause sign while it turns. Pressing it starts or stops the turning, and the button goes back to the play sign when a visitor presses on the picture with the mouse. At the start it shows what the tour is doing; for a visitor who asked their device for less motion the tour does not turn by itself.
**Related:** [Kiosks and autorotate](https://www.panoramr.com/help/configuring-auto-rotate-and-autoplay-for-kiosks-and-displays).

### Room Pictures

Opens a window with a picture of every room.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Room Pictures**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a button that opens the Media Window on its pictures. Its tooltip is the **Modal button label** of the **Media window** panel, `View all Panos` to start with.
**What visitors see:** The window of room pictures.
**Needs:** **Room Pictures** must also be on in the **Foot links** of **Side nav – list menu** (it is on to start with): the button is left out of the bar when that link is switched off.
**Related:** [Customize the player's bars](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars).

### Pitch Movement

Looks up and down.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Pitch Movement**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a pair of buttons: `Pitch Up` and `Pitch Down`.
**What visitors see:** Holding a button tilts the view up or down until it is let go.
**Related:** **Field of View Zoom**.

### VR Mode

Enters virtual reality.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **VR Mode**. Basic and Advanced view.
**Default:** `on`
**What it does:** Adds a goggles button with the tooltip `Enter VR`.
**What visitors see:** A press loads the VR part of the player and starts VR. How it behaves in a headset was not tried for this page; [VR mode and Cardboard](https://www.panoramr.com/help/virtual-reality-mode-and-cardboard-support) says what the player sends.
**Related:** [VR mode and Cardboard](https://www.panoramr.com/help/virtual-reality-mode-and-cardboard-support).

### Fullscreen

Fills the screen with the tour.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Fullscreen**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `Toggle Fullscreen`.
**What visitors see:** A press fills the screen with the tour, and a second press leaves full screen; the picture on the button changes with it. Where the browser does not allow full screen the button does nothing.

### Accessibility Mode

Opens the text version of the tour.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Accessibility Mode**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `Accessibility Linear View`.
**What visitors see:** A press reloads the page as the text version of the tour, the same address with `?accessibility=true`.
**Related:** [Accessibility settings](https://www.panoramr.com/help/accessibility-settings-reduced-motion-and-screen-reader-support-in-360).

### Room Info

Shows what the tour says about the room on show.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Room Info**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `Information` that opens the Media Window on the room's text and media, and the tour's media.
**What visitors see:** In a room with no text and no media, and with none for the whole tour, the button is dimmed and cannot be pressed; its tooltip reads `No Information Available`.
**Needs:** The room's **Description**, or media attached to the room or the tour.
**Related:** [The Info & Media Panel](https://www.panoramr.com/help/info-and-media-panel).

### Floor Plan

Opens the tour's floor plan.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Floor Plan**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `View Floorplan`.
**What visitors see:** A press opens the floor plan in the Media Window. A tour with no floor plan shows no button.
**Needs:** A floor plan on the **Floor Plans** tab (in the **Advanced** view).
**Related:** [Floor plans and minimaps](https://www.panoramr.com/help/adding-floor-plans-and-interactive-minimaps-to-your-tours).

### Map

Opens the map of where the panoramas were taken.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Map**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `View Map`.
**What visitors see:** A press opens the map. A tour in which no panorama has a position shows no button.
**Needs:** A position on at least one panorama.
**Related:** [Geolocation and OpenStreetMap](https://www.panoramr.com/help/adding-geolocation-data-and-openstreetmap-integrations).

### Language Switcher

Lets a visitor change the language of the tour.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **Language Switcher**. Basic and Advanced view.
**Default:** Nothing is saved for a new tour. The switch reads off, but until it has been switched on and off once a tour in more than one language still shows the globe.
**What it does:** Adds a globe button with the tooltip `Change Language`.
**What visitors see:** The globe opens a list of the tour's languages by code (`EN`), and choosing one reloads the tour in that language. A tour with one language shows no globe.
**Needs:** At least one added language.
**Related:** [Make a tour in several languages](https://www.panoramr.com/help/how-to-create-a-360-virtual-tour-in-multiple-languages).

### List All Rooms

Opens a list of every room by name.

**Where:** the Icon bar panel (Design tab > Icon bar), **Icons** tab > **Icons in the bar** > **List All Rooms**. Basic and Advanced view.
**Default:** `off`
**What it does:** Adds a button with the tooltip `View All Rooms`. Switching it on also gives the Media Window its **Room list** tab.
**What visitors see:** The list of rooms in the Media Window.
**Related:** **Media window**.

## Colors of the bar

These settings are on the **Style** tab, which is in the **Advanced** view only.

### Use your own colours

Colors the icon bar apart from the rest of the player.

**Where:** the Icon bar panel (Design tab > Icon bar), **Style** tab > **Use your own colours**. Advanced view.
**Default:** `off`
**What it does:** While it is off the bar wears the colors and the glass effect of **Global aesthetics**. Switching it on shows the three fields below.
**What visitors see:** With it on, the bar and its buttons in the colors below; with it off, the tour's global colors.
**Related:** [Brand colors](https://www.panoramr.com/help/adding-custom-logos-and-brand-colors-to-the-tour-player).

### Interface Icon Color

The color of the buttons' pictures.

**Where:** the Icon bar panel (Design tab > Icon bar), **Style** tab > **Interface Icon Color**. Advanced view.
**Default:** `#ffffff`
**What it does:** Sets the color of every icon in the bar. It counts only while **Use your own colours** is on.
**What visitors see:** The icons in that color.
**Needs:** **Use your own colours** on.

### Action Bar Background Color

The color of the bar itself.

**Where:** the Icon bar panel (Design tab > Icon bar), **Style** tab > **Action Bar Background Color**. Advanced view.
**Default:** `#07077d`
**What it does:** Sets the bar's color. The bar is drawn with the glass opacity of **Global aesthetics**, 60 percent to start with, so the picture shows through. It counts only while **Use your own colours** is on.
**What visitors see:** The bar in that color.
**Needs:** **Use your own colours** on.
**Related:** **Global aesthetics**.

### Hover Brightness

How much a button lightens under the pointer.

**Where:** the Icon bar panel (Design tab > Icon bar), **Style** tab > **Hover Brightness**. Advanced view.
**Default:** `25` percent
**What it does:** A slider from 0 to 100. It sets how much white is laid over a button while the pointer is on it. It counts only while **Use your own colours** is on.
**What visitors see:** The button lighter by that share when the pointer is over it.
**Needs:** **Use your own colours** on.

## A setting with no control

### Info image

A picture that older tours kept for the Room Info button. The panel has no field for it any more.

**Where:** Nowhere in the Design tab. The panel's field for it went when **Room Info** began to open the Media Window.
**Default:** `none`
**What it does:** Nothing is shown from it. A tour that had saved a picture here still holds it, and the asset library names it "info image" where it is used.
**What visitors see:** Nothing. **Room Info** opens the room's text and media, not this picture. A picture of the whole tour goes in the tour's media on the **Tour** tab.
**Related:** **Room Info**.

## Troubleshooting

**There is no icon bar in my tour.** Check **Enable icon bar**. On a screen 768 pixels wide or narrower the bar is not drawn while the phone's bars are in use. On a Free plan, a tour in a Pro theme that has never been hosted shows the free Default look, which has the bar off. A change that is not saved or published does not reach visitors yet.

**A button I switched on is missing.** **Floor Plan** needs a floor plan, **Map** needs a panorama with a position, and **Language Switcher** needs a tour in more than one language. **Room Pictures** is left out when its link is off in the side menu's **Foot links**.

**A button is dimmed and does nothing.** **Room Info** is dimmed in a room that has no text or media, and no media for the whole tour.