In this guide, we’ll show you how to add the “Icon Card widget” to your Elementor website. The Icon Card widget is a free and versatile tool that lets you showcase contact information in a stylish, structured format perfect for contact pages, footers, or mega menus. It includes options for icons, titles, descriptions, and buttons, making it easy to enhance both functionality and design.
Let’s explore the customization features available in the “Icon Card widget” for Elementor below.
Add a Free Icon Card to Elementor
Add a Free Icon Card Widget to an Elementor Page
Elementor Icon Card Widget General Settings
Icon
Select or upload an icon to display on the card.
Heading
Enter the main heading or title for the icon card.
Content
Add descriptive content using a rich text editor. Supports formatting like bold, italic, lists, links, and media.
Button Text
Set the text displayed on the button.
Button Link
Paste the URL the button should link to when clicked.
Elementor Icon Card Widget Style Settings
Alignment
Controls the horizontal alignment of the content within the card box.
Left
Center
Right
Shadow
Toggle to enable or disable a box shadow around the card.
Box Radius
Adjusts the roundness of the card’s corners.
Box Border Type
Defines the style of the card’s border.
None
Solid
Dashed
Dotted
Top Background
Sets a background for the top section using a color or image.
Top Background Color
Select a solid color for the top background.
Top Background Image
Upload or choose an image for the top background.
Icon Size
Controls the size of the icon in the top section.
Icon Color
Sets the color of the icon.
Top Padding
Adjusts the inner spacing within the top section (Top, Right, Bottom, Left).
Bottom Padding
Adjusts internal spacing around content in the bottom section (Top, Right, Bottom, Left).
Text Color
Sets the color of descriptive text in the bottom section.
Text Typography
Customize font, size, weight, line height, letter spacing, and other text properties of the descriptive text.
Bottom Background Color
Sets the background color for the bottom section of the icon card.
Button Background Color
Sets the default background color of the button.
Button Background Color Hover
Changes the button’s background color on hover.
Button Padding
Adjusts internal spacing between the button’s text and edges (Top, Right, Bottom, Left).
Button Radius
Controls the roundness of the button’s corners (0 = sharp corners).
Button Text Color
Sets the default text color of the button.
Button Text Color Hover
Changes the button’s text color on hover.
Button Spacing
Adjusts the margin or space around the entire button.
Button Border Type
Defines the button border style.
None
Solid
Double
Dotted
Dashed
Groove
Button Border Hover Type
Sets the border style on hover.
None
Solid
Double
Dotted
Dashed
Groove
Button Style
Determines the display behavior of the button, such as Inline.
Button Border Color
Sets the color of the button's border. This setting is available for both Normal and Hover states.
Icon Card Widget Design Examples For Elementor
Here are some live use cases for the Icon Card widget.
Icon Card with Call to Action.
Icon Card with Custom Background.
Thank you for using the Icon Card widget for Elementor! This flexible widget allows you to display an icon, title, description, and button in a clean, structured card layout—ideal for showcasing contact details on pages, footers, or mega menus. With its sleek design and interactive elements, it enhances user engagement while keeping your content organized and visually appealing. For tips, inspiration, or support, feel free to explore our demo or reach out anytime.