---
title: How To Customize Hotspot Icons And Color
description: "In the last couple of lessons, you learned how you can add hotspots and use them properly. In this [**WP VR**](https://rextheme.com/wpvr/) lesson, you will learn how you can customize hotspot icons and colors. ## **Using Custom Hotspot Icons From Plugin**…"
url: "https://rextheme.com/docs/wp-vr-customize-hotspot-icons-and-color/"
updated: "2026-01-08"
category: "WP VR / Use Hotspots for Navigation & Information"
---

# How To Customize Hotspot Icons And Color

In the last couple of lessons, you learned how you can add hotspots and use them properly.

In this [**WP VR**](https://rextheme.com/wpvr/) lesson, you will learn how you can customize hotspot icons and colors.

## **Using Custom Hotspot Icons From Plugin**

While creating a hotspot, on the left side, you will see three fields called

- **Hotspot Custom Icon**
- **Hotspot Custom Icon Color**
- **Hotspot Animation**

[![Hotspot settings ](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-1.png)](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-1.png)

These allow you to use custom icons provided by [**WP VR**](https://rextheme.com/wpvr/) for your hotspots.

Follow these steps below to use these custom icons properly.

**1.** Click on the option under **Hotspot Custom Icon**.

**2.** Here you will be able to choose from over 900+ Fontawesome icons that you can use as the hotspot icons.

[![Hotspot custom icon](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-3-1.png)](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-3-1.png)

**3.** Next, click on the option below **Hotspot Custom Background Color** and **Hotspot Custom Icon Color** to assign the color you want your hotspots to have.

[![Hotspot ](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-4.png)](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-4.png)

**4.** On **Hotspot Animation**, by default, it is turned on. This will give a continuous ripple animation on the hotspot to be more noticeable. You can turn it off if you don't want any animation for the custom icons.

**5.** You can also change the **Hotspot Shape** by choosing the options from the dropdown.

Hotspot Shapes:

- Rounded
- Square
- Hexagon

[![How To Customize Hotspot Icons And Color 1](https://rextheme.com/wp-content/uploads/2019/02/image-4.png)](https://rextheme.com/wp-content/uploads/2019/02/image-4.png)

**6.** You can also customize the **Hotspot Border**. By default, it is off. Once you turn it on you'll see the options to customize it.

[![Hotspot Border](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-5.png)](https://rextheme.com/wp-content/uploads/2019/02/Add-New-Tour-‹-skinCafe-—-WordPress-5.png)

**7.** Now, these are custom icons and cannot be viewed on the tour preview. So, publish the tour and embed it on a page/post. Then preview the page/post and you will be able to see how it looks.

![Hotspot with custom icon and color](https://rextheme.com/wp-content/uploads/2020/08/Hotspot-with-custom-icon-and-color.jpg)

**These customizations are based on each hotspot. So if you want to customize a second hotspot, you need to select that hotspot and then use these customizations.

That's it. That's how you can customize hotspot icons and colors.