---
title: "How to change WordPress Tab icon?"
url: https://nexterwp.com/docs/change-wordpress-tab-icon/
date: 2023-02-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A row of text-only tabs takes a moment to read; an icon next to each label is recognised instantly. Every tab in the Tabs Tours block can carry its own..."
image: https://nexterwp.com/wp-content/uploads/2024/05/change-wordpress-tab-icon-1024x519.jpg
word_count: 481
---

# How to change WordPress Tab icon?

## Key Takeaways

- Tabs Tours block permite que cada pestaña tenga su propio icono o una imagen pequeña, con Show Inner Icon, Icon Type y hasta 10 pestañas por bloque.
- Nexter Blocks Free funciona con Tabs Tours, y el bloque se activa en Nexter > Blocks dentro del panel de WordPress.
- Los iconos quedan dentro del título de la pestaña y se mueven con él en diseños horizontales y verticales, mientras que las imágenes usan tamaños registrados del sitio y una imagen grande puede estirar el título.

A row of text-only tabs takes a moment to read; an icon next to each label is recognised instantly.

Every tab in the Tabs Tours block can carry its own icon, or a small image if you would rather use your own artwork.

*For every Tabs Tours setting in one place, see the [Tabs Tours block guide](https://nexterwp.com/docs/add-tabs-on-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-tab-content/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Tabs Tours, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your sections planned:** one tab per section, and the block takes up to **10 tabs**.

## Steps

- Add the **Tabs Tours** block to your page and click **Design from Scratch**.

- Open the **Content** panel. Each item in **Tabs** is one tab — set its **Title**, and click **Add Tab** for more.

![The Tabs repeater with a tab's Title field](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-tabs-list.webp)

- Set each tab's **Content Type** and fill in its content.

![The Content Type setting on a tab](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-content-type.webp)

- Open the tab in the **Content** panel and switch **Show Inner Icon** on.

![A tab with Show Inner Icon switched on](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-inner-icon.webp)

- Set **Icon Type** to **Icon** and choose one under **Select Icon**, or set it to **Image** and pick a file plus an **Image Size**.

![The Icon Type setting with Icon and Image](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-icon-type.webp)

- Repeat for the other tabs, then publish.

## Icon or Image

| Icon Type | What it shows | Best for |
| --------- | ------------- | -------- |
| Icon | A font icon you pick, which takes the colour you set | Matching the icon colour to your tab styling |
| Image | A file from your Media Library at the size you choose | Logos, flags, product shots and anything an icon set does not cover |
| None | No icon | Turning an icon off again without losing the setting |

## How It Behaves

- The icon sits inside the tab title, so it moves with the title in both horizontal and vertical layouts.- Each tab has its own setting — you can give icons to some tabs and not others.- Font icons take a colour of their own, so they can match or contrast with the title text.- Image icons use your site's registered sizes, so choosing a small size serves a smaller file.- There is also a **Show Outer Icon** switch for an icon outside the title.

## Limitations

- Icons are decorative here and carry no text for screen readers, so keep a real title on every tab.- A large image icon stretches the tab title — pick a small image size.- Icon styling for the whole block lives in the **Style** tab, so you cannot colour one tab's icon differently from another's there.- The icon set depends on what your site has loaded.

## Troubleshooting

### No icon appears

Check **Show Inner Icon** is on for that tab and that an icon is actually selected — the switch alone does nothing.

### The image icon is huge

Change **Image Size** on the tab rather than resizing the original file.

### I changed the icon but the old one still shows

Republish the page and clear any page cache. Tab markup is saved with the page rather than built on each load.

## Related Docs

- [Tabs Tours block: all settings](https://nexterwp.com/docs/add-tabs-on-wordpress/)- [Put images inside a tab](https://nexterwp.com/docs/image-inside-wordpress-tabs/)- [Vertical tabs layout](https://nexterwp.com/docs/vertical-tabs-in-wordpress/)

## Frequently Asked Questions

**Q: Why is my WordPress tab icon not showing up after I add it?**
A: The inner icon only appears when both parts are set: Show Inner Icon must be on for that tab, and an actual icon has to be selected. The switch by itself does nothing. In Nexter Blocks, the Tabs Tours block saves the icon per tab, so a missing selection on one item will leave that tab text-only even if the others work.

**Q: Should I use an icon or an image for a tab label?**
A: Icons fit best when you want a small visual cue that matches the tab styling, because font icons take their own colour. Images are better for logos, flags, product shots, or anything outside a normal icon set. Nexter Blocks lets each tab use either option, so the choice depends on whether you need styling consistency or custom artwork.

**Q: Does the tab icon move in horizontal and vertical tab layouts?**
A: The icon sits inside the tab title, so it moves with the title in both horizontal and vertical layouts. That matters if you switch layouts later, because the icon stays attached to the label instead of becoming a separate element. Nexter’s Tabs Tours block also lets different tabs use icons while others stay plain text.

**Q: What is the best image size for a WordPress tab icon?**
A: A small image size is usually the safer choice because image icons use your site’s registered sizes, and a large image can stretch the tab title. Nexter Blocks lets you set Image Size per tab, which is better than resizing the original file after upload. Smaller files also keep the tab label from looking oversized or unbalanced.

**Q: Why does my old tab icon still show after I change it?**
A: Tab markup is saved with the page rather than rebuilt on every load, so stale output can stick around until you republish and clear any page cache. That makes this feel like a caching problem even when the setting changed correctly. In practice, republishing plus cache clearing is what forces the new icon to appear.

**Q: Can I add icons to some tabs and leave others without icons?**
A: Each tab has its own setting, so mixed setups are supported. You can turn Show Inner Icon on for one tab and leave another as text-only, or switch Icon Type to None to turn an icon off without losing the setting. That is useful when only a few tabs need extra visual emphasis.