Elementor Icon Box Widget
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor icon box widget is a feature card: an icon, a title, a short description and an optional link. Use it for services, benefits, features or contact details.
- Widget name MoxKit Icon Box
- Panel category MoxKit Addons
- Settings 32+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor icon box widget?
Place the icon on top, left or right, and style the icon box, the card and every text separately.
Like every MoxKit widget, the Icon Box has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Any icon from the Elementor Icon Library.
- Icon position: top, left or right.
- Title with H2, H3, H4 or div tag; description; link text and link.
- Icon color, hover color, size and gap; icon box background.
- Card background, border, radius, shadow and padding.
How to add the Elementor icon box widget
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Icon Box" or scroll to the MoxKit Addons category.
- Drag the Icon Box widget into a Container.
- Pick the icon and type the title and description.
- Choose the Icon position.
- Type a link text (leave it empty to hide the link) and the link.
- Style the card in Style > Card.
- Click Update (or Publish) to save the page.
Designs and examples
These screenshots were taken from a live WordPress site running MoxKit 1.4.4 and Elementor. They show the Icon Box with the settings described in each caption.
Elementor icon box widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 1 sections and about 8 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Content
| Setting | Type | Options and notes |
|---|---|---|
| Icon | Icon | |
| Title | Text | |
| Description | Text area | |
| Title tag | Select | H2, H3, H4, DIV (default: H3) |
| Icon position | Select | Top, Left, Right (default: Top) |
| Link text (empty = hidden) | Text | |
| Link | Link | |
| Alignment per device | Choice | Left, Center, Right |
Elementor icon box widget settings: Style tab
The Style tab controls the look of every part of the widget: 6 sections, about 24 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Icon
| Setting | Type | Options and notes |
|---|---|---|
| Color | Color | |
| Card hover color (hover) | Color | |
| Size per device | Slider | |
| Icon spacing per device | Slider |
Title
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Description
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Link
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Hover / focus color (hover) | Color | |
| Bottom spacing per device | Slider |
Icon box
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Card
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Tips and best practices
- Use three or four boxes in a row Container for a features section.
- Keep descriptions to about 20 words.
Icon Box FAQ
Can I hide the link?
Yes. Leave Link text empty.
Can the icon sit beside the text?
Yes. Set Icon position to Left or Right.
Summary
The Elementor icon box widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Library icon on top, left or right, title, description and link, with full card styling. Free. Install MoxKit Addons for Elementor from WordPress.org, drag the Icon Box widget onto a page and start with the settings above.