Icons are a great visual tool to attract readers to a specific part of your text. The great thing about icons are that they are vector (SVG) files, so once you have the base icon, you can pretty much change the styling to whatever you want. So you can change the size, color, or any other styling attribute.
In this Elementor tutorial, we will walk you through how to use icons in Elementor, including uploading your own custom icons and inserting your icons inside a block of text.
How To Add Icon In Elementor
Step 1: Find the icon widget
Drag and drop it to the page
Step 2: Set the Elementor Icon
1. Choose a Font Awesome icon from the icon library.
2. Click insert 
3. From the view menu, choose between default, stacked, and framed.
4. Put in the link’s URL for the item.
5. Place the icon in left, center, or right alignment.
Step 3: Customize the Icon Styles
You can change the styles of the icon under the Style tab.
To customize the icon, under the icon menu there are normal and hover states.
3.1 Normal
1. Choose the icon’s primary and secondary colors.
2. Increase or decrease the icon’s size.
3. Rotate the icon.
3.2 Hover
1. Set the hover colors.
2. Set a hover state animation of your choosing.
3. Set the icon’s exact size.
4. Rotate the icon.
If you select Stacked or Framed view, you have the following options:
Step 1: Set the Elementor Icon
1. Select a Font Awesome icon from the icon library.
2. From the view menu, choose between stacked or framed.
3. Choose either a circle or a square for the shape of the stack or frame.
4. Put in the link’s URL for the item.
5. Place the icon in left, center, or right alignment.
Step 2: Customize the Icon Stacked or Framed Styles
To customize the icon, under the icon menu there are normal and hover states.
3.1 Normal
1. Choose the primary color (the background or frame) for the icon.
2. Choose the icon’s secondary color.
3. Set the icon size.
4. To change the size of the stack o frame, adjust the padding around the icon.
5. Rotate the icon 360 degrees.
6. Set the border radius to control the roundness of the stack or frame’s corners.
3.2 Hover
1. Choose the primary color (the background or frame) for the icon.
2. Choose the icon’s secondary color.
3. Select a hover animation effect, such as Grow, Pulse, Skew, etc.
4. Control the size of the stack or frame by adjusting the padding around the icon.
5. Rotate the icon 360 degrees.
6. Set the border radius to control the roundness of the stack or frame’s corners.
If you want to change the style of your icon, simply click the “advanced” option.
The following are the numerous available style options:
How to Place Icons Inside Elementor’s Text Editor
Since icons are their own element, using icons inside a text paragraph is not as simple as dragging the icon element inside the text editor.
However, putting icons inside a paragraph is possible, here’s how.
Step 1: Install the Font Awesome plugin and activate it
Step 2: Go to Font Awesome’s website
Step 3: Search for the icon you want and filter out by “FREE”
If you aren’t paying for a Font Awesome membership, then you need to filter out by free icons, or the icons won’t appear on your site.
Step 4: Click on the icon of your choice and copy the HTML code. The code should look something like this. The example below is an address card icon.
<i class="fa-solid fa-address-card"></i>
Step 5: Changing the size and color
In the code below, I am changing the size of the address card icon.
<i class="fa-solid fa-address-card fa-2x"></i>
The extra sizing code is the fa-2x. You can change that number to a larger number if you want the icon to be bigger.
Here is how to change the color of the icon.
<i class="fa-solid fa-address-card" style="#fc0303"></i>
In the example above, the #Fc0303 dictates the color of the icon.
Now if I want to change both size and color, I just combine the two codes above.
<i class="fa-solid fa-address-card fa-2x" style="color:#fc0303"></i>
Step 6: Paste html code into text editor
Be sure you are pasting it into the “text” tab, which is the html tab of the text editor
So here is an example
And that code would produce this icon
Adding Custom Icons Into Elementor
If Elementor’s huge library just doesn’t do it for you, you can actually upload your own custom icons into Elementor. Here’s how to do that.
Step 1: Create your custom icon set at Fontello, IcoMoon, or Fontastic
Icons at its core are fonts, and also need to be in SVG format. The three sites above will enable you to create icons from any of your SVG images.
Step 2: Go to your dashboard and upload the zip file
Go to Elementor>Custom Icons and then click Add New
