Elementor Animated Icon Widget
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor animated icon widget shows a library icon in a default, stacked or framed style and adds attention effects: layered filled pulses, outline ring pulses, a soft glow or a turning dashed ring.
- Widget name MoxKit Icon
- Panel category MoxKit Addons
- Settings 31+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor animated icon widget?
Icons can also bounce, float, swing, spin, wobble, shake or tada in a loop, and grow, shrink, rotate, spin, float or pop on hover.
Like every MoxKit widget, the Icon 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
- Views: default, stacked, framed; shapes: circle, square, rounded.
- Pulse effects: filled, rings, glow, dashed; number of layers; always or on hover.
- Looping icon animations: beat, bounce, float, swing, spin, wobble, shake, tada, with speed.
- Hover effects: grow, shrink, rotate, spin, float, pop.
- Link and accessible label.
How to add the Elementor animated icon 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" or scroll to the MoxKit Addons category.
- Drag the Icon widget into a Container.
- Choose the icon, view and shape.
- Under Animation pick a pulse effect and an optional icon animation.
- Add a link and an Accessible label if the icon is clickable.
- Click Update (or Publish) to save the page.
Elementor animated icon widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 2 sections and about 12 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Icon
| Setting | Type | Options and notes |
|---|---|---|
| Icon | Icon | |
| View | Select | Default, Stacked, Framed (default: Stacked) |
| Shape | Select | Circle, Square, Rounded (default: Circle) |
| Link | Link | |
| Accessible label | Text | Read by screen readers. Recommended when the icon is a link. |
| Alignment per device | Choice | Left, Center, Right (default: Center) |
Animation
| Setting | Type | Options and notes |
|---|---|---|
| Pulse effect | Select | None, Layered pulse (filled), Ring pulse (outline), Glow pulse, Turning dashed ring (default: Layered pulse (filled)) |
| Layers | Slider | |
| Play pulse | Select | Always, On hover only (default: Always) |
| Icon animation | Select | None, Heartbeat, Bounce, Float, Swing (bell), Spin, Wobble, Shake, Tada (default: None) |
| Icon animation speed (s) | Slider | |
| Hover effect | Select | None, Grow, Shrink, Rotate, Spin once, Float up, Pop (default: Grow) |
Elementor animated icon widget settings: Style tab
The Style tab controls the look of every part of the widget: 2 sections, about 19 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Icon
| Setting | Type | Options and notes |
|---|---|---|
| Size per device | Slider | |
| Padding per device | Slider | |
| Rotate per device | Slider | |
| Primary Color | Color | Icon (Default / Framed) or background (Stacked). |
| Secondary Color | Color | Icon (Stacked) or background (Framed). |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Primary Color (hover) | Color | |
| Secondary Color (hover) | Color | |
| Box shadow (hover) | Group | All the usual Elementor box shadow settings. |
| Transition duration (ms) | Slider | |
| Border Width per device | Slider | |
| Border Radius per device | Spacing |
Pulse
| Setting | Type | Options and notes |
|---|---|---|
| Color | Color | Empty = primary color. |
| Second color (alternate layers) | Color | |
| Starting opacity | Slider | |
| Spread (× icon box) | Slider | |
| Cycle duration (s) | Slider | |
| Line thickness | Slider | |
| Easing | Select | Soft out, Linear, Ease in-out, Accelerate (default: Soft out) |
Tips and best practices
- A ring pulse on a phone icon is a classic "call us" cue.
- Give clickable icons an accessible label so screen readers can announce them.
Icon FAQ
Can the pulse play only on hover?
Yes. Set Play pulse to On hover.
Which icons can I use?
Any icon from the Elementor Icon Library, including Font Awesome and uploaded SVG icons.
Summary
The Elementor animated icon widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Default, stacked or framed views, filled pulses, ring pulses, glow and 8 looping animations. Install MoxKit Addons for Elementor from WordPress.org, drag the Icon widget onto a page and start with the settings above.