The Divi Icon List module lets you create visually engaging lists by pairing text with custom icons. You can choose from Divi’s icon library or upload your own, adjust icon size, color, and spacing, and style the text for a consistent look. It’s ideal for highlighting features, benefits, or steps in a way that’s easy to scan and complements your site’s design seamlessly.
Add The Divi Icon List Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Icon List module and click on it to load it. Alternatively, you can use the Search option to find it.
The Divi Icon List Module Use Cases
Feature Highlights on a Product Page: Display your product’s main benefits with each feature paired to a relevant icon, making it easy for visitors to scan and understand.
Step-by-Step Service Process: Display the stages of your service, from inquiry to delivery, using numbered or symbolic icons for quick visual guidance.
Contact Information Display: List your phone number, email address, and address alongside matching icons for a clean and accessible contact section.
Icon List Module Settings Breakdown
Once you've added the Icon List module, its settings will automatically appear. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
Inside the Content tab, you can add or remove Icon List items and set their toggle icon, link, and background styles.
Add, Edit, and Remove - Allows you to add new Icon List items, remove existing Icon List items, or edit them.
Link - Make the entire Icon List module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the background styles for the Icon List module.
Loop - Enables the loop builder.
Order - Choose the Flexbox order of the module.
Admin Label - Choose the label text for the Icon List module to help you keep things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Icon List module are in this tab.
Layout - Choose between the Block and Flexbox layout.
Icon - Choose the Icon List module's Icon design options.
Text - Choose the overall text styles for the Icon List module.
Body Text - Choose the body text styles from the Icon List module.
Sizing - Choose the desired sizing for the Icon List module.
Spacing - Choose the spacing for the Icon List module.
Border - Choose the border styles for the Icon List module.
Box Shadow - Choose the Icon List module's Box Shadow styles.
Filters - Choose the Icon List module's filters, including hue shifts, saturation changes, and blending modes.
Transform - Choose the Icon List module's advanced design effects, including scaling, rotating, skewing, and translating.
Animation - Choose the Icon List module's animation styles to add personality and interactivity while maintaining a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Icon List module, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions: Create custom interactions, such as showing or hiding the Icon List module, and many more.
Visibility - Choose the visibility of the Icon List module for different devices.
Transitions - Choose how long the Icon List's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Icon List's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Icon List module behaves and transforms during scrolling.
Add, Edit, and Delete Icon List Items
Open the Icon List Module: Click on the Icon List module on your page or click the Gear icon to open its settings.
Edit an Item: Click the Gear icon next to the Icon List item you want to update(1). Modify the title, body content, or design settings as needed.
Add a New Item: In the Content tab, click Add New Icon List Item (2). Enter the title and body content, then customize design options like background color, text style, or icons. Click the arrow icon at the top left to return to the main module settings.
Delete Item: Click the Trash icon (3)
next to the Icon List item to delete it.
Styling Individual Icon List Items
When you edit the design styles of the Icon List module, the changes apply to all Icon List items.
However, you can style an Icon List item individually. In that case, you can click the Gear icon next to the item, which brings up the individual Content and Design settings.
They are the same settings as demonstrated above, but will only apply to that specific Icon List item you edit.
To return to the main module settings, click the Arrow icon 
at the top left corner of the module window.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
