How to change WordPress Tab icon?

Updated On : April 15, 2026By : Reading Time : 1 minute

Key Takeaways

  • Nexter Blocks Tabs Tours block allows users to add and change icons in tab titles.
  • Users can customize tab titles by turning on the Show Inner Icon toggle and selecting icons from the icon library.
  • The Show Outer Icon (Pro) toggle enables users to set an additional icon for the tab title.
Table of Contents

By default WordPress Tabs blocks don’t have icons but with the Nexter Blocks Tabs Tours block, you can easily add and change icons in your tab titles.

Customizing the tab icons can be a great way to make your website stand out and give it a professional touch.

To check the complete feature overview documentation of the Nexter Blocks Tabs Tours block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure its installed & activated to enjoy all its powers.

LIVE BLOCK LINK

To add an icon add the Tabs Tours block on the page and go to a particular tab.

Turn on the Show Inner Icon toggle to add the main icon to the tab title, from the icon library you can add or change the icons.

You can even set your custom images for your tab title or if you want you can set it to none to have no icons.

tabs tours tabs icons new1

You can also set an additional icon to the tab title by turning on the Show Outer Icon (Pro) toggle.

tabs icon preview

Also, check How to Change WordPress Tabs on Hover.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer
LinkedIn X Website

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What should I do if the icon doesn't show up in my tab title?

If the icon isn't appearing, ensure that you have activated the 'Show Inner Icon' toggle for the specific tab in the Tabs Tours block. This toggle is essential for displaying the main icon. If the icon still doesn't show, check if the Nexter Blocks are properly installed and activated, as this block is part of that ecosystem.

What is the best practice for choosing tab icons?

When selecting icons for your tabs, consider using visuals that clearly represent the content of each tab. This improves user experience and helps visitors navigate your site more intuitively. Using recognizable icons can make your website look more professional and engaging.

Does the Nexter Blocks Tabs Tours block work with other page builders?

The Nexter Blocks Tabs Tours block is built specifically for WordPress with Gutenberg as the primary builder. While it supports Elementor and Bricks, it is designed to function optimally within the Gutenberg environment. If you're using a different page builder, functionality may vary.

How can I change the tab icons on hover?

To change the tab icons on hover, refer to the guide on How to Change WordPress Tabs on Hover. This feature allows for dynamic interaction, enhancing user engagement by providing visual feedback as users navigate through your tabs.

Last reviewed: April 15, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123……………………………………………………………51