safelayout

<p>Safelayout Elegant Icons, adds an <strong>easy-to-use</strong> and <strong>powerful</strong> icon block to the WordPress <strong>Classic editor</strong>, <strong>Block editor</strong>, <strong>Elementor</strong> and <strong>WordPress menu</strong>.<br />
With the help of Safelayout Elegant Icons, you can add <strong>high quality SVG icons</strong> to your WordPress website, and it helps you add beautiful social media icons to your website.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/8PlkfvJWT74?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 allow-popups-to-escape-sandbox"></iframe></span>
<p><a href="https://youtu.be/cDp6K_Uij8E" rel="nofollow ugc">How to add icons to the navigation menu of your WordPress website.( Block Themes )</a></p>
<p><a href="https://youtu.be/TiA7gSP3ynk" rel="nofollow ugc">How to add icons to the navigation menu of your WordPress website.( Classic Themes )</a></p>
<p><a href="https://youtu.be/mjaWpggXoHw" rel="nofollow ugc">How to add beautiful icons into the text.( Elementor )</a></p>
<p><a href="https://youtu.be/Ip82xAIFuGs" rel="nofollow ugc">How to add beautiful icons into the text.( Block editor )</a></p>
<h4>Features</h4>
<ul>
<li>Available in Block editor, Classic editor and Elementor.</li>
<li>Ability to add icons to the menu. (Classic themes and Block themes)</li>
<li>No icon fonts, just inline SVG.</li>
<li>High quality SVG icons.</li>
<li>Include “Social Share Icons” block.</li>
<li>Include “Icon Box” block.</li>
<li>Include “Box Ribbon” block.</li>
<li>Include “Box Button” block.</li>
<li>Include multi color icon packs.</li>
<li>Many beautiful icon effects.</li>
<li>Choose which icon packs to load.</li>
<li>Adding icons to text blocks ( Paragraph, Heading, Button, … ).</li>
<li>Gradient color for icon fill and stroke as well as background color.</li>
<li>38 Hover animation effects.</li>
<li>Fully compatible with Full-Site Editing.</li>
<li>Cross browser compatible.</li>
<li>Fully customizable.</li>
<li>Work with Any Theme.</li>
</ul>
<h4>Live Demo</h4>
<p><a href="https://safelayout.com/safelayout-elegant-icons-pro-demo/" rel="nofollow ugc">Safelayout Elegant Icons Demo.</a></p>
<h4>Pro Version</h4>
<p>Safelayout Elegant Icons <strong>Pro</strong> is available. <a href="https://safelayout.com" rel="nofollow ugc">Upgrade to pro version</a> and get full features!</p>
<h4>Pro Version Icon Packs (4700+ icons)</h4>
<ul>
<li>Themeisle (100 icons) <a href="https://themeisle.com/free-icons/" rel="nofollow ugc">https://themeisle.com/free-icons/</a></li>
<li>WordPress Dashicons (337 icons) <a href="https://developer.wordpress.org/resource/dashicons/" rel="nofollow ugc">https://developer.wordpress.org/resource/dashicons/</a></li>
<li>WordPress (285 icons) <a href="https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/" rel="nofollow ugc">https://github.com/WordPress/gutenberg/blob/trunk/packages/icons/src/library/</a></li>
<li>Flat color icons by Icons8 (312 icons) <a href="https://icons8.github.io/flat-color-icons/" rel="nofollow ugc">https://icons8.github.io/flat-color-icons/</a></li>
<li>Linecons (48 icons) <a href="https://designmodo.com/linecons-free/" rel="nofollow ugc">https://designmodo.com/linecons-free/</a></li>
<li>Filled icon set by Icons8 (200 icons) <a href="https://icons8.com/" rel="nofollow ugc">https://icons8.com/</a></li>
<li>Genericons Neue (103 icons) <a href="https://genericons.com/" rel="nofollow ugc">https://genericons.com/</a></li>
<li>Font Awesome regular (163 icons) <a href="https://github.com/FortAwesome/Font-Awesome" rel="nofollow ugc">https://github.com/FortAwesome/Font-Awesome</a></li>
<li>Font Awesome brands (467 icons) <a href="https://github.com/FortAwesome/Font-Awesome" rel="nofollow ugc">https://github.com/FortAwesome/Font-Awesome</a></li>
<li>Font Awesome solid (1390 icons) <a href="https://github.com/FortAwesome/Font-Awesome" rel="nofollow ugc">https://github.com/FortAwesome/Font-Awesome</a></li>
<li>Material Design (1261 icons) <a href="https://developers.google.com/fonts/docs/material_icons" rel="nofollow ugc">https://developers.google.com/fonts/docs/material_icons</a></li>
<li>Meteocons – weather (47 icons) <a href="https://www.alessioatzeni.com/" rel="nofollow ugc">https://www.alessioatzeni.com/</a></li>
</ul>
<h4>Safelayout other plugins</h4>
<p><a href="https://wordpress.org/plugins/safelayout-brilliant-buttons" rel="ugc">Safelayout Brilliant Buttons – WordPress Button block</a></p>
<p><a href="https://wordpress.org/plugins/safelayout-cute-preloader/" rel="ugc">Safelayout Cute Preloader – CSS3 WordPress Preloader</a></p>
<p><a href="https://wordpress.org/plugins/safelayout-animated-header-footer" rel="ugc">Safelayout Animated Header Footer</a></p>


Safelayout Elegant Icons – WordPress icons

Beautiful SVG icons, available in Block editor, Classic editor, Elementor and WordPress Menu. Beautiful "Icon Box" and "Social Share Icons" block.

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.

Safelayout Elegant Icons – WordPress icons vs Lordicon