Icon Element

Last Updated on

The Icon element allows you to display a variety of available icons in various shapes and effects. The source of the icons is Font Awesome and some custom Jupiter X icons. It also offers many features like a custom link, hover effect, etc. There are multiple shapes and effects that allow you to create different icons. You can change the size, color, border, container background and much more.

Font Icons Shortcode - demo

Common Uses:

  • Simple icon
  • Hover icon
  • Redirection icon link
  • Document download link
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Icon, you need to look for it in the Elementor knowledgebase

 

In this article

 


Displaying an Icon Element

To add an Icon element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for an “Icon”.

4
Drag and drop the Icon element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
Icon Adds the desired icon.
Link Adds a link to the icon.
Container Adds background container to the icon.
Shape Sets the shape of the container which is either circle or square. It will only show up when you select the Container option on.
Hover effect Sets the hover effect for the container.

Style

SettingDescription
Icon Color Type Sets the color type of the icon which is solid or gradient.
Icon Color Sets the color of the icon.
Icon Size Sets the size of the icon.
Icon Rotate Rotates the icon.
Icon Alignment Aligns the icon.
Icon Padding Sets padding to the icon.
Container Background Type Sets the type for the container background.
Container Color Sets the color of the container.
Container Border Type Sets the type of border for the container.
Container Border Radius Sets the border-radius for the container.
Container Box Shadow Sets the shadow for the container.

Creating a Solid color Icon

To create a solid icon, follow the steps below:

1
Follow the steps in Displaying an Icon Element section to add the icon to your page.
2
Configure the settings like shown below:

Content

SettingDescription
Icon Pick your desired icon.

Style

SettingDescription
color #de4192
Size 60px
Alignment Center
3
Configure the rest of settings as you desire and publish or update the page.

To create the icon, follow the steps below:

1
Follow the steps in Displaying a Icon Element section to add the icon to your page.
2
Configure the settings like shown below:

Content

SettingDescription
Icon Pick your desired icon.
Link Add the link which will work on icon click.

Style

SettingDescription
Color Type Set this option to the gradient.
Color #f74747
Location 0
Second color #16e235
Location 100
Type Linear
Angle 180
Size 90px
3
Configure the rest of settings as you desire and publish or update the page.

Creating an icon with a background container

To create the icon, follow the steps below:

1
Follow the steps in Displaying a Icon Element section to add the icon to your page.
2
Configure the settings like shown below:

Content

SettingDescription
Icon Pick your desired icon.
Container Enable this option.
Shape Set the shape of the container to either a circle or a square.

Style

SettingDescription
Color Type Set this option to the solid.
Color #f5875b
Size 90px
Alignment Center
Container Background Type Classic
Container Color #f4f4f4
Border Type Dotter
Border Color #f5875b
3
Configure the rest of settings as you desire and publish or update the page.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Icon element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket