Tab icons can make your Tabs module easier to scan and more visually polished by pairing each tab label with a clear visual cue. In this guide we show you how to add icons to individual tabs and style their appearance across the Tabs module.
Quick answer: Divi doesn’t include a built-in option for adding icons to Tabs module tab titles, but you can add this with the Divi Tabs Module – Tab Icons feature plugin. Once installed, open each tab’s settings, choose an icon from Content → Tab Icon, then style all tab icons from the parent Tabs module under Design → Tab Icon.
This is useful for feature comparisons, pricing sections, service pages, FAQs, product information, or any tabbed layout where icons can help users identify each tab more quickly.
How to Add Icons to Divi Tabs Module Tab Titles
This method uses the Divi Tabs Module – Tab Icons plugin to add a new Tab Icon setting to each individual tab, plus global icon styling controls to the parent Tabs module.
Add the Tab Icon Feature to Divi
Divi’s Tabs module lets you add tab titles and tab content, but it doesn’t include a built-in setting for adding icons beside individual tab titles.
To follow the steps below, first install the Divi Tabs Module – Tab Icons plugin. It adds a new Tab Icon setting inside each tab, so you can choose a different icon for each tab directly in the Divi Builder – no custom CSS required. The feature works with both Divi 5 and Divi 4.
Get the plugin below, then follow the steps to add and style your tab icons directly in the Divi Builder.
Divi Tabs Module – Tab Icons
Once installed and activated, the plugin adds the new Tab Icon controls to the Divi Tabs module. You can then open your Tabs module and start assigning icons to individual tabs.
Assign Tab Icons to Individual Tabs
Open the Tabs module settings, then click the gear icon for the tab you want to edit. In that tab’s settings, go to Content → Tab Icon and choose the icon you want to display next to the tab title.
Repeat this for each tab that should have an icon. Tabs where no icon is selected will continue to display as normal, with text only.
Style All Tab Icons
To style all tab icons at once, open the parent Tabs module settings, go to Design → Tab Icon, and adjust settings such as icon color and icon size. These settings apply to all tab icons in the module by default.
Style the Active Tab Icon
To give the selected tab a different icon style, go to Tabs module settings → Design → Active Tab Icon. This lets you make the active tab icon stand out with a different color or size.
Override the Icon Style for One Tab
To customize a single tab icon, open that individual tab’s settings, go to Design → Tab Icon, and adjust the icon styles there. These settings override the global Tab Icon styles for that tab only.
Save and View Your Tabs with Icons
Once you’ve assigned icons and styled them, save your changes in the Divi Builder. Then, exit the Visual Builder to preview your work on the front end of your site. You should see tabs with icons next to the titles where you chose them, and no icon on any tab where you left it unset.
In our example, the inactive tab icons use the global grey style, the active Plan tab uses a larger blue icon, and the Launch tab uses an individual amber icon override.
Troubleshooting – If Your Tab Icons Don’t Show
If the icons don’t appear on the front end, check that:
- The Divi Tabs Module – Tab Icons plugin is installed and activated.
- You have selected an icon inside the individual tab’s Content → Tab Icon settings.
- You have saved the module / page before checking the live page.
- Any caching plugin, server cache, or CDN cache has been cleared.
Continue Customizing Your Divi Tabbed Content
Once you’ve added icons to your tab titles, you may also want to:
- Display source code inside Divi tabs – useful if you’re creating documentation, tutorials, or comparison tabs with different code languages.
- Create flexible tab-style layouts with Divi Show / Hide Button – useful when the standard Tabs module is too restrictive and you want buttons or other modules to behave like tabs.
- Add icons to Divi Accordion titles – useful when you’re using accordions instead of tabs for FAQ or collapsible content sections.
Conclusion
Adding icons to Divi Tabs module titles is a simple way to make tabbed content easier to scan and more visually polished. With the Tab Icons feature, you can choose icons for individual tabs, style them globally, and fine-tune active or per-tab icon styles when needed.
Is there another Tabs module customization you’d like to make – such as changing the tab layout, adding images, adjusting mobile behavior, or styling individual tabs differently? Let me know in the comments and I’ll try to help.
0 Comments