Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Icon Box for Elementor Feature boxes with an icon, a title, text and a button

The Elementor icon box widget puts an icon, a title, a description and an optional button in one block. Use it as an Elementor feature box, a service box or an info box on service lists and feature grids. Pick one of six styles, add a hover fill or an icon tilt, and link the button or the whole box.

Try it free See the live demos
  • 6 Icon Box styles
  • Hover fill from any side
  • Button or whole-box link
  • Free on WordPress.org

Classic widget · Elementor 3 and 4Updated

Live demos

Ten icon box designs, live

Ten ways to lay out an Elementor icon box, each on a small site. Hover the boxes, or tap them on a phone. Rows with a Replay button use a Pro scroll entrance.

Arolax®WorkServicesStudio
Brand services

Everything your brand needs, in four steps

Brand Strategy

Research and positioning that tell your team where the brand stands.

Discover Brand Strategy

Brand Identity

Logo, type and colour rules that make you look like yourself.

Discover Brand Identity

Brand Guidelines

One living guide for layout, spacing and type across every channel.

Discover Brand Guidelines

Brand Support

A designer on call for launches, campaigns and quick fixes.

Discover Brand Support
Agency services

Service cards for a brand agency

An Elementor service box for an agency: four dark cards, each with a white line icon, a title, grey text and an underlined Discover button. This is an Elementor icon box with button.

Hover Discover: the line shrinks

Set Icon Box Style to One and Link Type to Button. In the Button section, set Style to Underline. The dark card comes from the Box section in the Style tab.

Shally DevStackWorkHire
What we build with

Four teams, one studio

Frontend
Development

  • + HTML & CSS
    + React and Node.js
    + JavaScript

Backend
Development

  • + WordPress
    + Python
    + PHP & Laravel

Web
Development

  • + WordPress
    + C++
    + Core Java

Android
Development

  • + Flutter
    + C++
    + Core Java
Skills and team lists

Skill boxes that fill on hover

Four boxes for a dev studio, each one a link. A small tab waits on the right edge and grows to fill the box in 0.3 seconds. This is the Elementor icon box hover effect of style Five.

Hover a box: the tab on the right fills it

Set Icon Box Style to Five and Link Type to Wrapper. In the Style tab, open Hover and set Hover Start From to Right and Transition to 0.3.

Northlight StudioProcessWorkContact
How we work

From a blank page to launch

Branding

A brand identity that holds up, whether you start fresh or rebrand.

Scratch

Unlimited requests while you subscribe, like an in-house designer.

Thinking

A shared task board where you and your team can review progress.

Execution

A fast turnaround on every request, from first sketch to final file.

Process steps

Process steps with no box

Four steps on a plain background: a bold geometric icon, a title and grey text, with no card around them. Each step fades up 40 px in one second, one after another (Pro entrance).

Press Replay to see the steps rise in

Leave Icon Box Style on Default and Link Type on None. Set the icon Size to 90 in the Icon section of the Style tab. The fade up is the Animation tab of Animation Addons Pro.

Halden LawPracticePeopleContact
Practice areas

Advice for people and companies

Personal

Family Law

Criminal

Criminal Law

Corporate

Business Law

Civil

Civil Law

Personal

Health Care Law

Business

Employment Law

Foreign Policy

International Law

Education

Education Law

Practice areas

Practice area tiles that wipe white

Eight tiles for a law firm. On hover a white background wipes in from the left, the icon and text turn dark and an arrow slides into the corner. The tiles also show how an Elementor info box can work as a menu of topics.

Hover a tile: it turns white

Set Icon Box Style to Three. In the Style tab, open Hover and choose the box background, the icon, title and description colours, and the arrow Color.

HaldenProductPricingDocs
What teams use Halden for

One place for the whole week

Shared Boards

Plan the work on one board that everyone can open.

See how Shared Boards

Weekly Reports

A summary of what shipped, sent every Monday morning.

See how Weekly Reports

Team Budgets

Set a limit per team and watch spend as it happens.

See how Team Budgets

Quick Commands

Press one key to search, assign or file anything.

See how Quick Commands
Feature lists

Features with the title on top

An Elementor feature box with the name first: the title sits above the icon, then a line of text and an underlined button. It reads like a feature list on a product page.

Hover Discover: the line shrinks

Set Icon Box Style to Four, which prints the title above the icon. Set Link Type to Button and the button Style to Underline.

Halden BuildServicesProjectsContact
What we build

Construction from plan to keys

Planning

Site studies, permits and a fixed budget before the first brick is laid.

Contracting

One contract for every trade, with a site manager you can call.

Commercial

Offices and shops built on time, around the way your business runs.

Residential

Homes and extensions with careful finishing and a ten-year warranty.

Service lists

Thin line drawings for a builder

Four services for a construction firm, with thin line drawings, uppercase titles and a divider between the columns. The boxes fade in from the sides in 1.5 seconds (Pro entrance).

Press Replay: the boxes slide in

Leave Icon Box Style on Default and set the icon Size to 100. The fade from the sides is the Animation tab of Animation Addons Pro.

Malepère CapitalAdvisoryFundingContact
Advisory

Money matters, made clear

Economic advisory

Plans that keep cash flowing while you take on new customers.

Grow revenue

Pricing and offers that bring in new buyers and keep the old ones.

Fund instantly

Short-term funding in days, so a good order is never too big.

Increase productivity

Simple numbers each week that show where time and money go.

Legal advisory

Contracts and terms checked before you sign, not after.

Risk advisory

A clear view of what could go wrong, and a plan for each case.

Advisory and finance

Elementor icon box grid with thin lines

Six boxes on a grid of thin lines for an advisory firm. Each box is a single link, so the icon, title and text all click through together.

Click any box: each is one link

Set Link Type to Wrapper and add a Link. Keep Icon Box Style on Default and set the icon Size to 40. The thin lines are a border set in Box.

Northlight ElectricServicesAreasBook
Electrical services

Safe power for homes and sites

Repair and Maintenance

Fault finding and repairs for new builds and older homes.

Read More about Repair and Maintenance

Substation and Earthing

Earthing checks and substation work, tested and certified.

Read More about Substation and Earthing

Voltage Maintenance

Regular checks that keep high and low voltage systems safe.

Read More about Voltage Maintenance

Cable Jointing Services

Clean, tested joints for power and data cables of every size.

Read More about Cable Jointing Services
Local trades

Cards where the bulb tilts

Four service cards for an electrician, each with a light bulb that turns 40 degrees on hover and casts a soft shadow. The Read More button fills with a cross on hover.

Hover a card: the bulb tilts

Set Icon Box Style to Two and switch on Enable Icon Hover Effect. In the Button section, set Hover Style to Cross. The cards slide in from the left with the Pro Animation tab.

HaldenProductPricingDocs
One platform

Payments, hosting and help in one place

Various Payment Gateways

Take cards, wallets and bank transfers in 40 currencies.

Learn More about Various Payment Gateways

Premium Cloud Management

Servers that grow with your traffic, with hourly backups.

Learn More about Premium Cloud Management

Customer Support Platform

Chat, email and calls in one inbox your whole team shares.

Learn More about Customer Support Platform
Product features

White cards with an orange border

Three centred white cards with coloured icons and a Learn More link with an arrow after the text. The border turns orange on hover.

Hover a card: the border turns orange

Set Alignment to Center in Box, the icon Size to 80, and Icon Position to After in the Button section. The cards slide in from the left with the Pro Animation tab.

ShallyStudioWorkContact
Brand studio

Four ways we grow a brand

Brand Positioning

A clear place in the market, written down in one page your team can use.

Discover Brand Positioning

Visual Identity

Icons, type and colour that look like you on every screen.

Discover Visual Identity

Design Standards

Spacing, layout and button rules that keep each page consistent.

Discover Design Standards

User Engagement

Small motion and clear buttons that invite people to click.

Discover User Engagement
Studio services

Pastel cards with 3D icons

Four pastel cards for a brand studio with colourful 3D icons and a Discover button. The icon tilts on hover. Each card has its own background and text colour.

Hover a card: the icon tilts

Set Icon Box Style to Two and the icon Size to 100. In the Button section, set Hover Style to Cross. Give each box its own background in Box.

Features

Key features of Icon Box

What the widget gives you, each tied to a setting in the Elementor panel.

Six Icon Box styles

Pick a layout in Icon Box Style: Default, One, Two, Three, Four or Five. Style Four puts the title above the icon.

Hover fill from any side

Style Five grows a colour from a small tab on one edge. Choose Hover Start From and the Transition time for an Elementor icon box hover effect.

Wipe and arrow

Style Three wipes a new background across the box and slides in an arrow. Set the colours in the Hover section.

Icon tilt on hover

Style Two turns the icon 40 degrees and adds a soft shadow. Switch it with Enable Icon Hover Effect.

Any icon or SVG

Icon takes the Elementor icon library or an uploaded SVG, so an Elementor icon box SVG works like any other icon. Set Size, Icon Color, Icon BG Color, padding and radius.

Button or whole-box link

Link Type adds a button, makes the whole box one link with Wrapper, or turns links off.

Animation Addons buttons

The Button section has seven styles, hover styles such as Cross and Rollover, and an icon before or after the text.

Box, text and hover styling

Style the Box (colour or gradient, border, radius, shadow, padding, Alignment), the title and description in Content, and on styles Three and Five the hover colours of the box, icon, title, description and button. Together they turn the widget into any Elementor feature box, service box or info box you need.

Step by step

How to add an icon box in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons for Elementor, then turn on Icon Box in Animation Addons → Elements.

  2. In Elementor, search the panel for Icon Box and drag it onto the page.

  3. Pick an Icon Box Style, choose the Icon, and write the Title and Description.

  4. Set Link Type: fill in the Button section, or choose Wrapper and add a Link for the whole box.

  5. Style the Box, Icon and Content in the Style tab, then the Hover section on styles Three and Five.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Icon Box

How do I add an icon box in Elementor?

Add the Icon Box widget, choose an icon, and write a title and a description. Then pick an Icon Box Style and a Link Type and style it in the Style tab. No code is needed.

Is there a free Elementor icon box widget?

Yes. Icon Box is part of the free Animation Addons plugin on WordPress.org and works with Elementor Free and Elementor Pro.

What do the six Icon Box Styles do?

Default is a plain icon with text. One is a dark blue, centred card. Two tilts the icon on hover, Three wipes a new background across the box, Four puts the title above the icon, and Five fills the box from one edge.

How do I make an Elementor icon box with button?

Set Link Type to Button, then open the Button section to set the text, link, style and icon. Choose Wrapper instead if you want the whole box to be the link.

How do I set an Elementor icon box link?

Set Link Type to Wrapper and add a Link, and the whole box becomes one link. Choose Button to link only the button, or None for no link.

How do I make an Elementor icon box hover effect?

Use style Five for a fill that grows from the top, right, bottom or left, or style Three for a wipe with an arrow. The Hover section sets the colours of the box, icon, title, description and button.

Why is my Elementor icon box not working?

Check the Icon Box Style first. The Hover section in the Style tab only appears for styles Three and Five, and Enable Icon Hover Effect only for style Two. Other styles have no hover effect.

How do I use an Elementor icon box SVG icon?

In Icon, choose Upload SVG and pick your file, or choose a library icon. You can then set its size, colour, background, padding, border and radius.

Elementor icon box vs image box: which to use?

Use Icon Box when a small icon carries the point, as in a feature list. Use the Image Box widget when a photo should lead, as in a portfolio or a team grid.

How is it different from Elementor's Icon Box?

Elementor's widget can place the icon beside the text and has Stacked and Framed icons. This one adds six styles, hover fills, an icon tilt, a button and a whole-box link.

Animation Addons Pro · Elementor 4

Icons, titles and text, in one box

Feature boxes with six styles and hover effects, built and styled in Elementor.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license