In this guide, we will show you how to add the “Icon Box widget” to your Elementor website. This powerful widget helps you showcase features, services, or categories with a clean and stylish layout that combines icons, customizable titles, and descriptions in a single content box. Perfect for boosting visual appeal and delivering clear messaging, it makes engaging your visitors easier than ever. Best of all, it’s completely free.
Let’s explore the customization options available in the “Icon Box widget” for Elementor below.
Add a Free Icon Box to Elementor
Add a Free Icon Box Widget to an Elementor Page
Elementor Icon Box Widget General Settings
Icon
Choose an icon from Elementor’s library or upload a custom SVG.
Title
Set a short, catchy heading for the Icon Box.
Description
Add rich text or a paragraph describing the feature/service.
Link Text
Define the CTA text like “Learn More” or “View Details.”
Link
Set the URL to direct users to a page, section, or file.
Hover Effect
Add entrance or hover animations to the Icon Box for better interactivity.
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce In
Bounce Out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Vertical
Wobble To Top Right
Wobble Top
Wobble Bottom
Wobble Skew
Buzz
Buzz Out
Make All Box Link
Toggle to make the entire box clickable or just the link text.
Show Icon
Displays the selected icon.
Show Title
Displays the title text.
Show Separator
Adds a line between the title and description.
Show Text
Shows the description content.
Show Button
Displays the link/button text.
Show Line Effect
Adds a decorative line effect.
Show Badge
Displays a badge label on the box.
Elementor Icon Box Widget Style Settings
Text Align
Aligns text inside the box.
Center
Left
Right
Box Radius
Round the corners of the box.
Box Padding
Adds space inside the box (top, right, bottom, left).
Box Border Type
Sets the border style.
Default
None
Solid
Double
Dotted
Dashed
Groove
Box Border Width
Defines the thickness of the box border.
Box Border Color
Sets the color of the box border.
Box Shadow
Adds a shadow around the box for depth.
Box Background Type
Defines the style of the box background. Choosing Solid Color applies a single, uniform color instead of a gradient or image.
Box Background Color
Let you pick the specific solid color used as the box background.
Box Background Image
Allows you to add an image as the background of the box.
Background Hover
Changes the background color or gradient of the icon box on user hover.
Border Hover Type
Defines the border style when the icon box is hovered over.
Default
None
Solid
Double
Dotted
Dashed
Groove
Shadow Hover
Adds or modifies a box shadow effect visible when the icon box is hovered over.
Icon Size
Adjusts the overall size of the icon.
Icon Inner Size
Controls the size of an inner element within the icon (if applicable).
Icon Background Color
Sets the background color behind the icon.
Icon Inner Color
Defines the color of the icon itself.
Icon Radius
Rounds the corners of the icon’s background shape.
Icon Margin
Adds space around the icon.
Icon Border Type
Selects the border style around the icon.
None
Solid
Double
Dotted
Dashed
Groove
Icon Rotate
Rotates the icon by a specified degree.
Separator Spacing
Adjusts vertical space above and below the separator line.
Separator Color
Sets the color of the separator line.
Separator Height
Defines the thickness of the separator line.
Separator Width
Controls the horizontal length of the separator line.
Separator Width Hover
Changes the separator line width on hover.
Button Typography
Controls the font, size, weight, and other text styles of the button's text.
Button Background Color
Sets the background color of the button in its default state.
Button Background Color Hover
Changes the background color of the button when hovered.
Button Padding
Adjusts internal space between the button's content and its borders (Top, Right, Bottom, Left).
Button Radius
Round the corners of the button.
Button Text Color
Sets the color of the button's text in its default state.
Button Text Color Hover
Changes the color of the button's text on hover.
Button Spacing
Controls the margin or space around the entire button.
Button Border Type
Defines the button border style. Options.
None
Solid
Double
Dotted
Dashed
Groove
Button Style
Determines how the button is displayed.
Button Border Hover Type
Defines the border style on hover.
None
Solid
Double
Dotted
Dashed
Groove
Icon Box Widget Design Examples For Elementor
Here are some live use cases for the Icon Box widget.
Icon Box with Hover Animations.
Icon Box with Gradient Background.
Thank you for using the Icon Box widget for Elementor! This versatile tool lets you combine icons with customizable titles and descriptions in a clean, stylish box, making it easy to highlight key features, services, or categories on your website. With a visually appealing layout that encourages user engagement, it helps you present information clearly and attractively. Best of all, it’s completely free. For questions or inspiration, feel free to reach out or explore our demo.
