--- title: "How to Add Icons in Elementor Accordion?" url: https://theplusaddons.com/docs/add-icons-in-elementor-accordion/ date: 2023-04-28 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "Icons make an accordion easier to scan: a plus/minus shows what opens, and a small icon per title shows what each item is about. The Accordion widget from The Plus..." image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Icons-in-Elementor-Accordion_-1024x536.jpg word_count: 283 --- # How to Add Icons in Elementor Accordion? ## - The Accordion widget from The Plus Addons for Elementor includes both a plus/minus open-close icon and a small icon per title, which makes each item easier to scan. - The open-close icon is Free, while Icons Mind icons need Pro, and the icon for each title also needs Pro; the widget is enabled under The Plus Addons > Widgets. - Content > Toggle Icon controls the open-close icon, with Show Icon on by default, alignment on the left or right, and Icon Font options including Font Awesome, Font Awesome 5, or Icons Mind (Pro). Icons make an accordion easier to scan: a plus/minus shows what opens, and a small icon per title shows what each item is about. The Accordion widget from The Plus Addons for Elementor has both. *To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, [click here](https://theplusaddons.com/docs/elementor-accordion-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/accordion/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** the open/close icon is Free (Icons Mind icons need Pro); an icon for each title needs Pro.- **Widget to enable:** Accordion, switched on under **The Plus Addons > Widgets**. ## Change the Open/Close Icon - Go to **Content > Toggle Icon** and keep **Show Icon** on (it is on by default).- Set **Alignment** to put the icon on the left or right of the title.- Pick an **Icon Font**: Font Awesome, Font Awesome 5, or Icons Mind (Pro). Each has a closed icon and an active (open) icon.- Optional: set **Title Tag** — the HTML tag of the titles (div by default; use h3 for FAQ titles under an h2). ![The Toggle Icon section with Show Icon, Alignment and Icon Font](https://theplusaddons.com/wp-content/uploads/2026/09/accordion-toggle-icon.webp) ## Add an Icon to Each Title (Pro) - Open an item in **Content** and turn on its **Show Icon**.- Pick the **Icon Font** and the icon.- Repeat for other items. Style these icons in **Style > Title**. ![Show Icon turned on inside an accordion item](https://theplusaddons.com/wp-content/uploads/2026/09/accordion-item-icon.webp) ![Accordion titles with icons](https://theplusaddons.com/wp-content/uploads/2023/04/accordion-icon-options-demo.png) ## Troubleshooting ### The icons don’t show on the published page These are font icons, so they need their icon font to be loaded on the page. On a page where nothing else loads Font Awesome, the widget does not load it by itself and the icons stay blank. This has been reported to the developers. ## Related Docs - [Accordion widget: settings overview](https://theplusaddons.com/docs/elementor-accordion-widget-settings-overview/)- [Accordion vs toggle](https://theplusaddons.com/docs/elementor-accordion-vs-toggle/) ## Frequently Asked Questions **Q: What do I need before adding icons in an Elementor accordion?** A: The key requirement is that The Plus Addons for Elementor is installed and activated, because the Accordion widget is part of it. The open and close icon is available in the Free edition, while Icons Mind icons and an icon for each title need Pro. The widget must also be enabled under The Plus Addons > Widgets, or the settings won’t appear in Elementor. **Q: How do I change the open and close icon in an accordion?** A: The open and close symbol is controlled from Content > Toggle Icon, where Show Icon should stay on. From there, you can set the alignment to place the icon on the left or right of the title and pick an icon font such as Font Awesome, Font Awesome 5, or Icons Mind. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses separate closed and active icons, so the accordion state stays clear at a glance. **Q: Can I add a different icon to each accordion title?** A: The per-title icon option is available in Pro and is useful when each item represents a different topic. Open an item in Content, turn on Show Icon, then choose the icon font and icon for that item. Repeat for the other items so each title gets its own visual cue. Styling for these icons is handled in Style > Title, which keeps the look consistent across the accordion. **Q: Why are my accordion icons blank on the published page?** A: Blank icons usually mean the font file was not loaded on that page. These are font icons, so they depend on their icon font being available when the page renders. The page notes that if nothing else loads Font Awesome, the widget does not load it by itself and the icons stay blank. That issue has been reported to the developers. **Q: Should I use a left or right icon position in an accordion?** A: Alignment matters because it changes how quickly people scan the titles. Putting the icon on the left makes it act like a label marker, while placing it on the right keeps more attention on the text itself. The widget lets you set this under Content > Toggle Icon, so you can match the layout to your content style without changing the structure of the accordion. **Q: What title tag should I use for accordion items in FAQ content?** A: Title Tag matters when you want cleaner document structure, especially for FAQ-style content. The default is div, but the page specifically suggests using h3 for FAQ titles under an h2. That keeps heading hierarchy sensible for both readability and page structure. In practice, this is a small detail that helps organize long FAQ sections without changing how the accordion looks.