Icon Box Widget

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. In this video tutorial, you will see the various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.

Content Tab

In the content tab, you have full control over the widget’s content. 

  • View – Set the view of the icon as ‘Default’, ‘Stacked’ or ‘Framed’. Stacked is with a background and framed is with a frame surrounding the icon.
  • Choose Icon – Here you have a list of the entire collection of Font Awesome icons.
  • Title & Description – Insert the title and description of your Icon Box widget.
  • Link to – Insert a link, and choose if it will opens on a new window.
  • Icon Position – Set the position of the icon on the left, top or right side of the box (on Mobile view it will stay centered).
  • Title HTML Tag – Choose the title tag, from H1..H6, Div, Span or P. 

Style Tab

1. Icon

  • Primary Color – note that if you choose stacked or framed icon box, you will also have a secondary color.
  • Icon spacing – The space between the icon and the heading.
  • Icon size – Scale up and down the size of the icon.
  • Icon Rotate – Rotate the icon.

2. Icon Hover

Choose the primary and secondary color for the icon hover. 

Animation – Choose from a long list of animations for the hover.

3. Content

a. Title

  • Alignment – Left, centers, right or justified.
  • Vertical Align – Top, middle and button.
  • Title Spacing – Set the spacing between the title and the description.
  • Title color – Change the color of the title.
  • Typography – Here I can customize the typography of the title.

b. Description

  • Description color – Change the color of the description.
  • Typography – Choose custom to change the typography, just like with the title.


Set the Advanced options that are applicable to this widget

Share it on social networks

Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page

Birthday Sale: Up to 50%30% Off
Birthday Sale: Last 24 hours!
Birthday Sale: Last 24 hours:
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount