Icon Box

Before setting up the Icon Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Icon Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Icon Widget in Elementor lets you display fully customizable icons with control over size, color, alignment, hover effects, and links, enhancing both design and interactivity.

Key Use Cases for the Icon Box Widget in Elementor:

• Use the Icon Box widget to showcase services, features, or key offerings with icons and descriptive text.
• Create visually engaging sections to highlight important information, enhancing user experience and interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Icon Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Icon Widget in the list.
• Toggle it on to enable the widget.

Now, the Icon Widget is ready to use!

How to Add the Icon Widget in Elementor:

• Open the page where you want to add the Icon Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Icon Widget”.
• Drag the widget to your desired section.

The Icon Widget is now ready for customization!

How to Configure the Icon Widget in Animation Addons:

• In the Elementor panel, search for the “Icon Widget.”
• Drag anddrop the widget into the desired section.
• Customize icon settings like type, size, color, hover effects, and link using the available options.

Your Icon Widget is now ready to use! Use the tabs to style and personalize it for a visually engaging effect.

Configuring Icon Box Widget in Animation Addons: A Step-by-Step Guide.

The Icon Box Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

Icon Box 

Under the Content section of the Icon Widget, you’ll find the Icon settings, where you can customize the following:

• Icon Box Style: Choose the layout style for the icon and text.
• Icon: Select the icon you want to display.
• Title: Add a custom title next to or below the icon.
• Title HTML Tag: Choose a suitable HTML tag for the title (like H1–H6, div, span).

• Description: Add short supporting text or details below the title.
• Media: Upload or link media content if needed.
• Paragraph: Insert additional text or context as a paragraph.

Each setting allows you to personalize the widget for a clean, functional design.

Button

In the Button section of the Icon Widget, you’ll find the following customization options:

• Style: Choose the default look of the button.
• Hover Style: Set the visual effect when users hover over the button.
• Text: Enter the button label or call-to-action.
• Link: Add a URL where the button will redirect.

• Icon: Select an icon to show with the text.
• Icon Position: Place the icon before or after the text.
• Direction: Set the direction of the button content (row or column).
• Icon Spacing: Adjust the space between the icon and text.

These settings help you design engaging, clickable buttons for a better user experience.

Style Settings

Style settings provide the flexibility to fine-tune and enhance your content, improving its visual appeal. Within this section, you’ll find options for Box, Icon, Content, Button, and Hover Effects. Let’s explore how each of these works:  

In the Style section of the Icon Widget, you’ll find four key areas to customize:

• Box: Adjust background, border, padding, and overall box layout.

• Icon: Change icon size, color, spacing, and hover effects.

• Content: Style the title and description with typography, color, and spacing.

• Button: Customize button appearance, including colors, typography, border, and hover animations.

These controls let you perfectly style the widget to match your site design.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Icon Box in Elementor to effectively customize and display dynamic counters on your website.

If you need further assistance, feel free to reach out to our support team!