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
IconAdds the desired icon.
LinkAdds a link to the icon.
ContainerAdds background container to the icon.
ShapeSets the shape of the container which is either circle or square. It will only show up when you select the Container option on.
Hover effectSets the hover effect for the container.

Style

SettingDescription
Icon Color TypeSets the color type of the icon which is solid or gradient.
Icon ColorSets the color of the icon.
Icon SizeSets the size of the icon.
Icon RotateRotates the icon.
Icon AlignmentAligns the icon.
Icon PaddingSets padding to the icon.
Container Background TypeSets the type for the container background.
Container ColorSets the color of the container.
Container Border TypeSets the type of border for the container.
Container Border RadiusSets the border-radius for the container.
Container Box ShadowSets 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
IconPick your desired icon.

Style

SettingDescription
color#de4192
Size60px
AlignmentCenter
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
IconPick your desired icon.
LinkAdd the link which will work on icon click.

Style

SettingDescription
Color TypeSet this option to the gradient.
Color#f74747
Location0
Second color#16e235
Location100
TypeLinear
Angle180
Size90px
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
IconPick your desired icon.
ContainerEnable this option.
ShapeSet the shape of the container to either a circle or a square.

Style

SettingDescription
Color TypeSet this option to the solid.
Color#f5875b
Size90px
AlignmentCenter
Container Background TypeClassic
Container Color#f4f4f4
Border TypeDotter
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