Skip to content

Toggle Icon Options

Lets you select which icon is displayed for accordion items in their closed state.

Quick Reference

What it controls: Icon selection for the closed-state toggle indicator from the Divi icon library Where to find it: Content Tab → Toggle Icon Available on: Accordion module only Responsive: No — icon selection applies across all breakpoints ET Docs: Official documentation

Overview

The Toggle Icon options group provides an icon picker for choosing the visual indicator shown when an accordion item is collapsed. By default, Divi uses a standard icon (such as a plus symbol or arrow) to indicate that content can be expanded. This options group lets you replace that default with any icon from the available Divi icon library.

This setting is located in the Content tab of the Accordion module settings panel. It controls only the icon selection itself; for icon color and size styling, see the separate Accordion Icon options group in the Design tab.

Choosing an appropriate icon is important for usability. Icons like a plus sign, downward arrow, or chevron are universally recognized as expand/collapse indicators. The icon should clearly communicate that the content can be toggled, and it should visually align with the overall style of your site.

For additional reference, see the official Elegant Themes documentation.

Settings Reference

Setting Type Description
Icon Icon picker Selects the icon displayed on accordion items in the closed state. Choose from the Divi icon library.

Which Elements Use This

The Toggle Icon options group is used by the Accordion module in Divi 5. It determines which icon appears next to the title of collapsed accordion items, serving as a visual cue for expandable content.

Code Examples

/* Override the toggle icon with a custom font icon */
.et_pb_accordion .et_pb_toggle_close .et-pb-icon::before {
  content: "\e050"; /* Divi icon code */
}