lordicon

<p>Lordicon offers a unique library of modern, animated icons designed to bring life and interactivity to your WordPress site. With this plugin, you can seamlessly browse, customize, and insert Lordicon icons directly into the Gutenberg editor.</p>
<p>Built to be fast, lightweight, and easy to use, the Lordicon plugin helps you enrich your content with motion graphics that stay performance-friendly. Whether you need subtle interactions or eye-catching animations, Lordicon provides the flexibility to match your brand and design style.</p>
<h3>Features</h3>
<ul>
<li>Extensive free icon set (with attribution)</li>
<li>Full icon library available in PRO version (no attribution)</li>
<li>Insert icons directly into Gutenberg blocks  </li>
<li>Customize color, stroke, animation type, and trigger  </li>
<li>Optimized rendering with image fallbacks and lazy-loading for performance</li>
</ul>
<h3>Why Choose Lordicon?</h3>
<p><strong>Fully Customizable</strong></p>
<p>Modify icons directly within WordPress: choose colors, animation triggers (hover, click, loop), and more.</p>
<p><strong>Peak Performance</strong></p>
<p>Icons are rendered using image fallbacks on initial load and transition to animated formats only when users interact with them—keeping your pages fast and smooth.</p>
<p><strong>License-Friendly</strong></p>
<p>Stay compliant with free personal or commercial use through clearly defined licensing plans.</p>
<h3>License</h3>
<p>The plugin code is licensed under GPLv2 or later.<br />
However, the Lordicon icons themselves are licensed separately under the <a href="https://lordicon.com/licenses" rel="nofollow ugc">Lordicon License Terms and Conditions</a>.</p>
<h3>Development</h3>
<p>Source code is available on GitHub:<br />
https://github.com/lordicondev/plugin-wordpress</p>
<p>This plugin includes a frontend build step for its Gutenberg block UI.</p>
<ul>
<li>Source files: <code>/ui</code> directory (JavaScript/TypeScript, styles, etc.)  </li>
<li>Build tool: <a href="https://vitejs.dev/" rel="nofollow ugc">Vite</a>  </li>
<li>Build output: <code>/dist</code> directory (included in the distributed plugin)  </li>
<li>PHP files: top-level plugin files – no build process required  </li>
</ul>
<h3>Build instructions</h3>
<p>Clone the repository and run:</p>
<pre><code>cd ui
npm install
npm run build
</code></pre>
<p>This will generate the production-ready frontend assets in <code>/dist</code>.</p>


Lordicon

Enhance Gutenberg pages with animated icons from Lordicon. Add motion and style with high performance.

baszczewski

<p><strong>IMPORTANT</strong>: If you update the plugin from 1.X version to 2.X version, it 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.</p>
<p>Insert and customize interactive animated graphics (Lottie – .json) using a simple to use Lordicon plugin supported by the Gutenberg editor.</p>
<p>It is essential to note that it doesn’t mean that the Gutenberg post is the only place to use the plugin. We provide a shortcode option that lets you <strong>embed those icons directly to web builders such as Divi, Elementor, or custom themes.</strong></p>
<p><strong>Easily Upload</strong><br />
Upload hundreds of icons as JSON (Lottie) format from the <a href="https://lordicon.com/icons" rel="nofollow ugc">Lordicon library</a> or any other Lottie animation. Don’t want to host icons in the Media Library? Use icon URL from the „Embed HTML”.</p>
<p><strong>Adjust icon</strong><br />
Change the size, colors or stroke size of each icon.</p>
<p><strong>Triggers</strong><br />
Set animation on “hover”, “loop”, “loop with delay” or “click” and more.</p>
<p><strong>Shortcode</strong><br />
Happy with adjustments? Save the post or copy the easy-to-read shortcode and paste it to web builders such as Divi, Elementor, or custom themes.</p>
<h3>Usage</h3>
<p>You are able to not only add icons by Lordicon but also your own animation exported as a .json (Bodymovin AfterEffects plugin, Lottie Files). Color & Stroke controls works only with Lottie animations from Lordicon library. <a href="https://lordicon.com/help" rel="nofollow ugc">Learn more on how to create animated graphics that are supported by Lordicon controls.</a></p>
<p>A quick guide on how to add more icons:<br />
1. Install and activate a plugin.<br />
2. Create new post with Gutenberg Editor<br />
3. Click the “Plus” button and search for the “Lordicon Element” block.<br />
4. Add Lordicon animated icons directly from Media Library or copy&paste icons’ URL from “Embed HTML” code that can be found in <a href="https://lordicon.com/icons" rel="nofollow ugc">Lordicon Library</a><br />
5. Adjust colors, stroke or icon size. Note: Colors and stroke size controls work only with Lordicon animated icons.<br />
6. Set an animation trigger.<br />
7. Use icon either in post created with Gutenberg or copy the easy-to-read shortcode and paste it to web builders such as Divi, Elementor, or custom themes.</p>
<h3>Video Walkthrough</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/Kd2sTpi0zRQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe></span></p>
<p>This plugin includes 1 animated icon “198-upload” which is licensed MIT or later</p>
<p>Download hundreds of free and thousands of paid icons from the library at https://lordicon.com/icons</p>
<h3>Important</h3>
<p>This plugin is a Lordicon branded generic uploader. It does not install remote images or files. All files are stored inside the plugin zip file.</p>


Lordicon Animated Icons

IMPORTANT: If you update the plugin from 1.X version to 2.X version, it will automatically break all previously embedded icons added with older versio …

Lordicon vs Lordicon Animated Icons