Icons are small but powerful visual elements that help enhance your website’s clarity and appeal. In this lesson, you’ll learn how to identify, change, and style icons on your site using Elementor.
🎯 What You’ll Learn
-
What icons are and how they differ from images
-
How to locate and change icons on a page
-
How to adjust icon colors (including using hex codes or global colors)
💡 What Are Icons?
Icons look like tiny images (e.g. a phone, envelope, checkmark), but they’re not traditional image files. Instead, they’re part of a built-in icon library and are easy to customize.
They’re commonly used for:
-
Services lists
-
Contact info
-
Feature highlights
-
Buttons or callouts
🛠 Step-by-Step: Editing an Icon
✅ Step 1: Locate the Icon
-
Go to your Elementor editor
-
Find the section that has the icon you want to edit
-
Hover and click the pencil icon next to it
This opens the widget settings in the left sidebar.
✅ Step 2: Change the Icon
-
In the sidebar, click the current icon
-
A pop-up with available icons appears
-
Select a new icon (e.g. switch from a phone to a plus sign)
-
Click Insert to apply the new icon
✔️ Your icon is now changed!
🎨 Step 3: Change Icon Color
-
Still in the same widget, click the Style tab
-
Under Primary Color, you have two options:
-
Use a global color (for brand consistency)
-
Pick a custom color from the palette
-
Or paste a hex code manually (e.g.
#FF5733)
-
🎨 This gives you full control over the icon’s appearance.
🧪 Example Use Cases
-
Change the color of social icons to match your brand
-
Replace a default checkmark with a more stylish one
-
Add unique icons to visually separate services
✅ Final Step: Save Your Work
When done:
-
Click Update to save changes
-
Or Save Draft if you’re still editing the page
🎉 That’s It!
You now know how to:
-
Find and change icons
-
Customize their colors
-
Use your global brand colors or hex codes
Icons may be small — but they make a big difference in helping your site feel professional and easy to navigate.