joelmelon

This plugin allows you to use SVG icons within WordPress as shortcode and/or as Gutenberg Block and adds SVG support with the SVG-Sanitizer library.
<h3>License</h3>
Use this code freely, widely and for free. Provision of this code provides and implies no guarantee. 
Please respect the GPL v3 licence, which is available via http://www.gnu.org/licenses/gpl-3.0.html

SVG Icons

This plugin allows you to use SVG icons within WordPress as shortcode and/or as Gutenberg Block and adds SVG support with the SVG-Sanitizer library.

<h3>Omni Icon: Modern icon management solution for WordPress</h3>
Omni Icon is a comprehensive icon management solution that seamlessly integrates icons across the WordPress ecosystem. Upload custom icons, use bundled icons, or access 200,000+ icons from Iconify with support for Gutenberg, Elementor, Bricks, Breakdance, and LiveCanvas.
<h3>Features</h3>
Omni Icon is packed with features designed to make icon management effortless:
<ul>
<li>Multi-source Icon System: Upload custom SVG icons, use pre-bundled icons, or access 200,000+ Iconify icons</li>
<li>Icon Search & Discovery: Powerful search across all icon sources with intelligent caching</li>
<li>Server-Side Rendering (SSR): Icons pre-rendered on server for instant display and optimal performance</li>
<li>Smart Caching: Multi-layer caching (memory, filesystem, IndexedDB) for blazing fast load times</li>
<li>Web Component: Use <code><omni-icon></code> custom element anywhere in your theme or content</li>
<li>Secure: SVG sanitization prevents XSS attacks on uploaded icons</li>
<li>Modern Architecture: Built with PHP 8.0+ attributes, Symfony DI, and auto-discovery</li>
<li>Lightweight: Small footprint with lazy loading won’t slow down your site</li>
</ul>
Visit <a href="https://github.com/nabasa-dev/omni-icon" rel="nofollow ugc">our GitHub repository</a> for more information.
<h3>Seamless Integration</h3>
Omni Icon works perfectly with the most popular visual/page builders:
<ul>
<li><a href="https://wordpress.org/gutenberg" rel="ugc">Gutenberg</a> / Block Editor — Custom Icon block with live preview</li>
<li><a href="https://be.elementor.com/visit/?bta=209150&brand=elementor" rel="nofollow ugc">Elementor</a> — Native widget with Elementor controls</li>
<li><a href="https://bricksbuilder.io/" rel="nofollow ugc">Bricks</a> — Native element with full theme compatibility</li>
<li><a href="https://breakdance.com/ref/165/" rel="nofollow ugc">Breakdance</a> — Element Studio integration with SSR</li>
<li><a href="https://livecanvas.com/?ref=4008" rel="nofollow ugc">LiveCanvas</a> — Custom block with panel controls</li>
<li><a href="https://www.advancedcustomfields.com/" rel="nofollow ugc">Advanced Custom Fields (ACF)</a> — Custom field type for icon selection</li>
<li><a href="https://etchwp.com?aff=bce0d1ab" rel="nofollow ugc">Etch</a> — Web Component with icon picker</li>
<li><a href="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47622" rel="nofollow ugc">Divi 5</a> — Native module</li>
<li>More integrations coming soon!</li>
</ul>
<h3>Icon Sources</h3>
Local Icons (Custom Uploads) 
Upload your own SVG icons and organize them in custom sets. All uploads are sanitized for security.
Bundle Icons 
Pre-packaged icons included with the plugin, including sponsor logos and commonly used icons.
Iconify Icons 
Access to 150+ icon collections with 200,000+ icons including:
<ul>
<li>Material Design Icons (mdi)</li>
<li>Font Awesome (fa6-brands, fa6-regular, fa6-solid)</li>
<li>Bootstrap Icons (bi)</li>
<li>Hero Icons (heroicons)</li>
<li>Lucide (lucide)</li>
<li>And 150+ more collections</li>
</ul>
Browse available icons at <a href="https://icon-sets.iconify.design/" rel="nofollow ugc">Iconify</a>
<h3>Usage</h3>
Gutenberg:
<ul>
<li>In the block editor, add a new “Omni Icon” block</li>
<li>Click the icon picker to browse or search icons</li>
</ul>
Elementor:
<ul>
<li>Add the “Omni Icon” widget</li>
<li>Click “Browse Icons” to open the icon picker</li>
</ul>
Bricks:
<ul>
<li>Add the “Omni Icon” element</li>
<li>Click “Browse Icons” to open the icon picker</li>
</ul>
Breakdance:
<ul>
<li>Add the “Omni Icon” element</li>
<li>Click “Browse Icons” to open the icon picker</li>
</ul>
LiveCanvas:
<ul>
<li>Add the “Omni Icon” element</li>
</ul>
Advanced Custom Fields (ACF):
<ul>
<li>Create or edit an ACF Field Group</li>
<li>Add a new field and select “Omni Icon” as the field type</li>
<li>Configure return format (string, array, or HTML)</li>
</ul>
Etch:
<ul>
<li>Add the “omni-icon” Element from the menu element on the bottom of screen</li>
<li>Browse or search icons in the icon picker</li>
<li>Confirm selection to copy the code to clipboard </li>
<li>Paste the copied code into the HTML editor</li>
</ul>
Web Component Usage
Use the <code><omni-icon></code> web component directly in your theme or content:
<pre><code><omni-icon name="mdi:home"></omni-icon>
<omni-icon name="local:my-logo" width="64" height="64"></omni-icon>
<omni-icon name="fa6-solid:heart" color="#3b82f6"></omni-icon>
</code></pre>
<h3>Performance & Security</h3>
<ul>
<li>Lazy Loading: Web components loaded on-demand</li>
<li>Multi-layer Caching: Memory → Filesystem → IndexedDB</li>
<li>SSR Support: Icons pre-rendered on server for instant display</li>
<li>SVG Sanitization: All uploaded SVGs sanitized to prevent XSS</li>
<li>MIME Type Validation: Server-side validation of uploaded files</li>
</ul>
<h4>Love Omni Icon?</h4>
<ul>
<li>Give a <a href="https://wordpress.org/support/plugin/omni-icon/reviews/" rel="ugc">5-star review</a></li>
<li>Join our <a href="https://www.facebook.com/groups/1142662969627943" rel="nofollow ugc">Facebook Group</a></li>
<li>Sponsor us on <a href="https://github.com/sponsors/suasgn" rel="nofollow ugc">GitHub</a> or <a href="https://ko-fi.com/Q5Q75XSF7" rel="nofollow ugc">Ko-fi</a></li>
</ul>
<h4>Credits</h4>
<ul>
<li>Built with <a href="https://github.com/symfony/ux-icons" rel="nofollow ugc">Symfony UX Icons</a></li>
<li>Powered by <a href="https://iconify.design/" rel="nofollow ugc">Iconify</a></li>
<li>SVG sanitization by <a href="https://github.com/darylldoyle/svg-sanitizer" rel="nofollow ugc">enshrined/svg-sanitize</a></li>
</ul>
Affiliate Disclosure: This readme.txt may contain affiliate links. If you decide to make a purchase through these links, we may earn a commission at no extra cost to you.

Omni Icon – Modern SVG icon library for WordPress

A modern SVG icon library for WordPress with support for custom uploads and 200,000+ Iconify icons across block editor, page builders, and themes.

SVG Icons vs Omni Icon – Modern SVG icon library for WordPress