• Icons
  • Docs
  • Lordicon
  • Lordicon
  • Pricing
  • More
  • Log in Sign up
WordPress
  • Foundations
  • Library Tour
  • Icon styles
  • Animation
  • Triggers
  • Formats
  • All about GIFs
  • UX Designers
  • Best practices
  • Figma
  • Adobe XD
  • Developers
  • HTML/JS
  • Mobile/Native
  • No-code CMS
  • WordPress
  • Webflow
  • Other platforms
  • Content Design
  • Presentations
  • Newsletters
  • Canva
  • Adobe After Effects

Adding animated icons to WordPress

There are many ways to add Lottie animated icons to your WordPress projects. You can either use Lordicon WP Plugin or proceed with built-in Lottie options for common WordPress themes.

To get the most of animated icons and achieve the best performance, you can add them by code. Visit HTML/JS docmentation

Lordicon WordPress Plugin

  • 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.

Gutenberg site is the only place to use the plugin. We provide a shortcode option that lets you embed icons from Divi, Elementor, or into a custom theme.

Note: Updating the plugin from v1.6.0 to v2.0.0 will automatically break all previously embedded icons added with older versions of the Lordicon WordPress plugin. You will need to add them one more time. This happens because now, instead of adding icons to the FTP server, we do it directly to Media Library.

Download PDF Guide
GitHub Documentation
Download Lordicon Wordpress Plugin

WordPress Lottie integrations

Divi
Learn more
Divi Lottie Module
Learn more
WP Bakery
Learn more
Elementor
Learn more
Unlimited Elements
Learn more
Slider Revolution
Learn more
Beaver Builder
Learn more
Oxygen
Learn more

Video Tutorials

  • Lordicon WordPress Plugin
  • WordPress Lottie integrations
  • Video Tutorials
Mobile/Native Webflow