---
title: How to Add Icons in WordPress With Elementor
description: Want to know how to add icons in WordPress? The Icon widget lets you add icons to the pages you create with Elementor page builder. There are many icons to choose from, the entire Font Awesome icon list. To learn more about using the many widgets and features
---
[Skip to content](https://customers.lookitdesign.com/knowledge-base/how-to-add-icons-in-wordpress-with-elementor#main-content)
English - United States
Show submenu for translations
Open main navigation
Close main navigation
- English - United States
Show submenu for translations
- Contact us
Contact us
How can we help you?
- There are no suggestions because the search field is empty.
1. [Lookit Knowledge Base](https://customers.lookitdesign.com/knowledge-base?hsLang=en-us)
2. [Website Editing](https://customers.lookitdesign.com/knowledge-base/website-editing?hsLang=en-us)
3. [Elementor](https://customers.lookitdesign.com/knowledge-base/website-editing?hsLang=en-us#elementor)
# How to Add Icons in WordPress With Elementor
## Want to know how to add icons in WordPress? The Icon widget lets you add icons to the pages you create with Elementor page builder. There are many icons to choose from, the entire Font Awesome icon list. To learn more about using the many widgets and features
### Transcript:
hey everyone this is Noah from Elementor the icon widget is incredibly useful for
displaying icons and numerous tiles on your page I’ll now show you how with
Elementor you can add them along with cool features and effects so first I’ll
search for the widget and drag it in and once it’s dragged into place you’ll see
the content area in the style area in the concert area you have full control
over the widgets contents so for view you could set it as default stacked or
framed so you can see with these two other icons it’s stacked and framed with
a border icon here you could choose from the list of icons from the font awesome
website say I choose refresh icon link in this field you could insert a link
for your icon and set it to open in a new tab by clicking here and I have the
alignment as left center or right moving on to the style tab here you have full
control over the icon style and the icon hover style
in the icon style you could choose the primary color now note that if you set
the icon as stacked or framed a secondary color option is added here I
will show you this soon with these two icons next you have the icon size where
you could choose the size of the icon and you have icon rotate where you could
rotate the icon completely
we’ll move on to the icon over style options here I have the primary color
where I could set the offer color for the icon say black as you can see it’s
black when I move the mouse over it and the animation I have here a big list of
animations see skew or wobble etc now
I’ll show you this second icon where as you can see it is a stacked icon so it
also has a shape option to choose as circled or squared and in the style as
you can see the secondary color is added which is actually the color of the icon
itself another added feature is the icon padding where you could set the inner
padding of the icon this is great forexample if you reduce the size of the
icon then add its padding and you have the border radius where you would set
the border as rounded or even rounder or squared etc now same goes for the third
icon over here which is set as framed and as circle shapes now in the icon
hover settings for both of these icons you also have the secondary color now
watch this I could set a really cool hover effect by setting the over colors
as a negative so say I give the primary white and the secondary color is blue
and now I give it an animation of pop see how cool that looks
now that you know how to use this great icon widget you can add creative and
dynamic icons to your page
I hope you enjoyed this video
- [Getting started](https://customers.lookitdesign.com/knowledge-base/getting-started?hsLang=en-us#main-content)
- [Email](https://customers.lookitdesign.com/knowledge-base/getting-started?hsLang=en-us#email)
- [Website Editing](https://customers.lookitdesign.com/knowledge-base/website-editing?hsLang=en-us#main-content)
- [Elementor](https://customers.lookitdesign.com/knowledge-base/website-editing?hsLang=en-us#elementor)
- [ADA compliance](https://customers.lookitdesign.com/knowledge-base/ada-compliance?hsLang=en-us)
[](https://lookitdesign.com)
800 E 17th St. Brooklyn, NY 11230
[mailto:email@email.com](mailto:email@email.com)
Copyright © 2024, Lookit Design