---
title: Using Custom Icons For Navigation And Control Buttons In A Virtual Tour
description: "With [**WP VR**](https://rextheme.com/wpvr/), you can use custom navigation and control buttons to make the virtual tour more attractive. Here is how you can do it. ## **Setting Up Custom Control Buttons** When editing a tour, normally, you can use the Show…"
url: "https://rextheme.com/docs/wp-vr-custom-icons-navigation-control-buttons/"
updated: "2026-01-07"
category: WP VR / Setting Up Control Buttons
---

# Using Custom Icons For Navigation And Control Buttons In A Virtual Tour

With [**WP VR**](https://rextheme.com/wpvr/), you can use custom navigation and control buttons to make the virtual tour more attractive.

Here is how you can do it.

## **Setting Up Custom Control Buttons**

When editing a tour, normally, you can use the Show Controls option.

Click on the "**Preview"** button. It will display the simple control buttons - Zoom in, Zoom out, and Fullscreen.

[![Using Custom Icons For Navigation And Control Buttons In A Virtual Tour 1](https://rextheme.com/wp-content/uploads/2019/03/image.png)](https://rextheme.com/wp-content/uploads/2019/03/image.png)

However, you can rather use custom icons to place navigation and control buttons on your tour to make it more attractive.

***Enabling custom control buttons will disable the Show controls option and rather use the custom icons you assign.*

## **How to Customize the Control Buttons** Icons

Simply follow the steps below.

**1.** While editing a tour, go to the **Basic Settings** tab.

**2.** Next, on top, click on the **Advanced Controls** tab. Here, you will find the options to enable custom icons for navigation and control buttons. Now enable **Mouse Drag Control**

[![Using Custom Icons For Navigation And Control Buttons In A Virtual Tour 2](https://rextheme.com/wp-content/uploads/2019/03/Edit-crontrol-button-scaled.png)](https://rextheme.com/wp-content/uploads/2019/03/Edit-crontrol-button-scaled.png)

**3.** Here, you will be able to choose your desired icons and color for the navigation and control buttons.

You will be able to use custom icons for the following:

- **Move Up**
- **Move Down**
- **Move Left**
- **Move Right**

- **Zoom Out**
- **Full Screen**
- **Gyroscope**
- **Home**

**4.** Enable any of the four Movement options, or the Full-screen option to add a custom navigation pane on your tour on the bottom left side.

[![Using Custom Icons For Navigation And Control Buttons In A Virtual Tour 3](https://rextheme.com/wp-content/uploads/2019/03/Edit-button-1-scaled.png)](https://rextheme.com/wp-content/uploads/2019/03/Edit-button-1-scaled.png)

It will look something like this, depending on the icons and colors you choose.

![Control Buttons on Front-end](https://rextheme.com/wp-content/uploads/2020/07/CC-005.png)

**5.** Enable the **Mouse Zoom Control** options to add the zoom in and out icons on the top left side of the tour.

[![Using Custom Icons For Navigation And Control Buttons In A Virtual Tour 4](https://rextheme.com/wp-content/uploads/2019/03/zoom-button-scaled.png)](https://rextheme.com/wp-content/uploads/2019/03/zoom-button-scaled.png)

## **Changing Custom Icons And Color Of The Control Buttons**

For each option under the **Advanced Controls**, you can change the icon and color for the **Classic Layout.**

**1.** **Changing icon**:

For each option, you can click on the icon (as shown in the image below) to choose from several other **Fontawesome icons**.

[![Using Custom Icons For Navigation And Control Buttons In A Virtual Tour 5](https://rextheme.com/wp-content/uploads/2019/03/Edit-button-scaled.png)](https://rextheme.com/wp-content/uploads/2019/03/Edit-button-scaled.png)

**2. Changing color**:

For each option, you can click on the color box (as shown in the image below) to choose your desired color for the icon.

[![Using Custom Icons For Navigation And Control Buttons In A Virtual Tour 6](https://rextheme.com/wp-content/uploads/2019/03/color-edit-scaled.png)](https://rextheme.com/wp-content/uploads/2019/03/color-edit-scaled.png)

Here's how a tour looks with custom navigation and control buttons:

![Custom Control icons](https://rextheme.com/wp-content/uploads/2020/07/Enable-control-buttons-02.png)
(change this and put a more lighter tour image as example.)

## How The Control Buttons Work On A Tour

- **Move Up**: Clicking on it will move the view upwards on the tour.

- **Move Down**: Clicking on it will move the view downwards on the tour.

- **Move Left**: Clicking on it will move the view towards the left on the tour.

- **Move Right**: Clicking on it will move the view towards the left on the tour.

- **Zoom In**: Clicking on it will zoom in the view on the tour.

- **Zoom Out**: Clicking on it will zoom out the view on the tour.

- **Fullscreen**: Clicking on it will toggle the tour to be viewed on fullscreen mode.

- **Gyroscope**: The Gyroscope button will only work when the tour is displayed using a mobile device and the Gyroscope option is enabled (see docs). Clicking on it will enable/disable the Gyroscope mode on the tour.

- **Home**: Clicking on it will take the visitor back to the default scene (or first scene) of the tour.

***If you only want some of these icons to appear but not all, then simply enable those and keep the rest disabled.*

That's it. That's how you can easily use custom icons for navigation and control buttons in your virtual tour.