---
title: "How to Add Icons to Elementor Tabs Widget?"
url: https://theplusaddons.com/docs/add-icons-to-elementor-tabs/
date: 2023-02-13
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Icons make tab titles easier to scan, especially when there are many tabs. The Tabs/Tours widget from The Plus Addons for Elementor can show an icon before each title (inner..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/Tours-Widget_-1024x536.jpg
word_count: 411
---

# How to Add Icons to Elementor Tabs Widget?

## 

- Adds icons to the Elementor Tabs widget using The Plus Addons for Elementor.
- Utilizes the Show Inner Icon toggle to select icons from Font Awesome, Font Awesome 5, Icons Mind, or custom images.
- Enables an additional icon with the Show Outer Icon toggle, offering the same icon selection options.

Icons make tab titles easier to scan, especially when there are many tabs.

The **Tabs/Tours** widget from The Plus Addons for Elementor can show an icon before each title (inner icon), and in Pro a second icon after it (outer icon).

*To check the complete feature overview documentation of The Plus Addons for Elementor Tabs/Tours widget, [click here](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/tabs/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Free for Font Awesome and Font Awesome 5 inner icons. Icons Mind and image icons, and the outer icon, need The Plus Addons for Elementor Pro.- **Widget to enable:** Tabs/Tours, switched on under **The Plus Addons > Widgets**.

## How to Add an Icon to a Tab Title

- Add the **Tabs/Tours** widget and open a tab in **Content**.- Turn on **Show Inner Icon**.- Choose the **Icon Type**: **Font Awesome**, **Font Awesome 5**, **Icons Mind** (Pro) or **Image** (Pro).- Click the pencil icon next to the icon type and pick your icon, or your image.- Repeat for the other tabs.

![The Show Inner Icon switch and Icon Type dropdown of a tab item in the Tabs/Tours widget](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-inner-icon.webp)

![Tab titles on the front end with an icon before each title](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-result-icons.webp)

## Add an Outer Icon (Pro)

Turn on **Show Outer Icon** in the same tab, choose **Font Awesome** or **Font Awesome 5** and pick the icon. It appears after the title, between that tab and the next one.

![The Show Outer Icon switch of a tab item in the Tabs/Tours widget](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-outer-icon.webp)

![Tab titles with icons in a live example](https://theplusaddons.com/wp-content/uploads/2023/02/tabs-with-icon.png)

## Style the Icons

In the **Style** tab, the **Inner Icon** section (**Main Icon** in the free plugin) sets the size, spacing and the normal and active colours, plus **Full Width Icon** (Pro). The **Outer Icon** section (Pro) has its own size, spacing and colours, and **Hide Outer Icon**.

## Limitations

- **Use Font Awesome 5.** A new tab starts with Show Inner Icon on and a plus icon from the older **Font Awesome** library. The widget does not load that icon font, so on a page without it the icon space is empty. Font Awesome 5 icons showed correctly in our tests.- If you do not want an icon, turn **Show Inner Icon** off for each tab.- Icons Mind, Image and the outer icon are not part of the free plugin.

## Troubleshooting

### There is an empty space before the title

The tab uses the Font Awesome icon type, whose font is not loaded on the page. Switch **Icon Type** to **Font Awesome 5**, or turn off **Show Inner Icon**.

### The outer icon does not show

The outer icon needs The Plus Addons for Elementor Pro.

## Related Docs

- [Tabs/Tours widget: settings overview](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/)- [Create vertical tabs](https://theplusaddons.com/docs/vertical-tabs-in-elementor/)- [Open tabs on hover](https://theplusaddons.com/docs/elementor-tab-on-hover/)