This is a documentation for a free WordPress plugin that lets you insert and customize animated icons in a blink of an eye.
Lordicon WordPress Plugin
Features
-
Easy Upload: Upload icons in JSON (Lottie) format from the Lordicon library or any other Lottie animation. Don't want to host icons in Media Library? Use the icon URL from the "Embed HTML."
-
Animation Triggers: Choose among "hover," "click," "forward and reverse," "forward, hold and reverse," "auto loop," or "still" animation player options.
-
Adjust Icon: Change each icon's size, color, or stroke size.
-
Shortcode: Happy with adjustments? Copy the easy-to-read shortcode and paste it anywhere from Divi, Elementor, or a custom theme.
We use Gutenberg editor as a platform to host Lordicon WordPress Plugin. It works the best with Lottie files as it gives immediate feedback after customizing icons or setting different animation triggers.
Build-in Animation Triggers
Hover
It plays animation from start to finish when the mouse cursor hovers over the icon.
Loop
Autoplay the animation as a perfect loop from the first to the last frame infinitely, with no user interaction.
Loop on hover
It plays animation on loop whenever cursor hovers over the icon or parented area. After moving the cursor away, the animation stops.
Click
It plays animation from start to finish when user clicks on the icon.
Morph
Hover the icon to play the animation from the first to the last frame. After moving the cursor away, the animation plays in reverse.
Morph two way (Boomerang)
When you hover, the icon animation will play from the first to the last frame and immediately reverse.
Video Tutorial
How to add Lottie animated icons to WordPress with Lordicon Plugin
7:00
YouTube videos require cookies, you must accept their cookies to view.