safelayout

<p><strong>Safelayout Elegant Icons</strong> adds <strong>high quality SVG icons</strong> to your WordPress website, and it helps you add beautiful social media icons to your website.<br />
It’s a performance-focused plugin that drops pre-configured icon layouts directly into your content with a single click. Instead of forcing you to build complex layouts manually, this plugin provides instant, high-quality SVG Icons across your entire site layout ecosystem.</p>
<h3>🌐 Triple-Editor Integration & Site Menu Support</h3>
<p>Enjoy absolute workflow flexibility. Safelayout Elegant Icons integrates seamlessly as a <strong>Gutenberg Block</strong>, an <strong>Elementor Widget</strong>, and a tool within the <strong>WordPress Classic Editor</strong>. Beyond post content, you can add SVG icons directly into your website navigation Menus—fully supporting both traditional <strong>Classic Themes</strong> and modern Full-Site Editing <strong>Block Themes</strong>.</p>
<h3>🚀 High-Quality Inline SVG Icons (Built for Performance)</h3>
<p>Protect your website loading speeds. Every graphic in this library renders as a <strong>100% pure inline HTML SVG icon</strong>. Because it completely eliminates bulky, render-blocking webfont files (like FontAwesome), your pages load lightning-fast with flawless cross-browser clarity on both mobile and desktop viewports.</p>
<h3>📦 Ready-Made Conversion Blocks & Visual Layouts</h3>
<p>Transform your plain text into structured, eye-catching sections using our pre-built layout modules:<br />
* <strong>“Icon Box” Block with Premium Accents:</strong> Drop in beautiful info boxes featuring decorative <strong>“Box Ribbon”</strong> overlays and integrated <strong>“Box Button”</strong> wrappers for instant promotional callouts.<br />
* <strong>“Icon List” Block:</strong> Effortlessly swap out boring default bullets for beautifully aligned vector item markers.<br />
* <strong>“Social Share Icons” Block:</strong> Instantly position responsive social bookmarks across your content layout streams to boost page shares.</p>
<h3>🎨 Multi-Color Icon Packs & Advanced Gradient Customization</h3>
<p>Break away from boring monochrome graphics. The plugin includes dedicated <strong>multi-color icon packs</strong> featuring multi-toned vector elements. Take full creative control over your palette with global gradient options: apply rich <strong>gradient colors across the icon fill, the icon stroke, and the background container color</strong> simultaneously.</p>
<h3>⚡ 38 Hover Animation Effects & Design Feedback</h3>
<p>Bring your user interfaces to life with interactive micro-interactions. Access a library of <strong>38 distinct hover animation effects</strong> and beautiful icon transitions.</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 site 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 List” 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 in Gutenberg, Elementor, Classic Editor and Site Menu. High-quality "Icon List", "Icon Box" and "Social Share Icons".

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