Beautiful SVG icons in Gutenberg, Elementor, Classic Editor and Site Menu. High-quality "Icon List", "Icon Box" and "Social Share Icons".

baszczewski

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

Lordicon

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

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>


Alternatives to Safelayout Elegant Icons – WordPress icons

Top alternatives