Course Content
MODULE 8: Getting Additional Support
0/1
Tweak It Yourself (TIY)

Icon lists are a great way to present information in a clean, visually engaging way — instead of bullet points or numbers, you use small icons beside each line. In this lesson, you’ll learn how to edit, add, and style your icon list elements in Elementor.


🎯 What You’ll Learn

  • What an icon list is

  • How to edit text and icons in the list

  • How to reorder, duplicate, or delete items

  • How to add a new icon list to a page

  • How to style the icons (e.g. color)


💡 What Is an Icon List?

An icon list is a visual list of items where each line has:

  • An icon (like a checkmark, phone, email symbol)

  • A short line of text or information

They look modern and help highlight key points or contact details quickly.


🛠 Step-by-Step: Editing an Existing Icon List

✅ Step 1: Open the Page in Elementor

  • Go to the page you want to edit

  • Click on the pencil icon next to the icon list section

You’ll now see all the icon list items appear in the left-hand Elementor sidebar.


✅ Step 2: Edit the Content

Each item in the list is editable:

  • ✏️ Click on the text to change the words

  • 🌟 Click on the icon to change to a different one

You can also:

  • Reorder items by dragging them up or down

  • Duplicate an item to save time

  • Delete an item using the X icon

💡 Pro Tip: Duplicating saves time — no need to reselect the icon each time.


➕ Adding a New Icon List to the Page

Want to insert a brand new icon list somewhere else on the page?

  1. Click on the + plus icon to add a new element

  2. In the Elementor sidebar, search for “Icon List”

  3. Drag and drop the Icon List widget where you want it on the page

  4. Start editing the text and icons just like before


🎨 Styling Your Icon List

To make the icon list match your website’s look:

  1. Click on the icon list widget

  2. Go to the Style tab

  3. Under Icon, choose:

    • Icon color

    • Icon size

    • Space between icon and text

🎨 You can also use your global colors for consistency across the website.


🗑 How to Delete an Icon List

If you no longer need the icon list:

  • Right-click on the widget

  • Select Delete

  • It will be removed from your page


✅ Final Step: Save Your Work

Once you’re happy:

  • Click Update to make it live

  • Or Save Draft if you’re still working on it


🎉 That’s It!

You’ve now mastered how to:

  • Edit icon lists

  • Add new ones

  • Style them to fit your brand

This is a great way to keep your site clean, structured, and user-friendly.

Scroll to Top