Omni Icon – Modern SVG icon library for WordPress

Description

Omni Icon: Modern icon management solution for WordPress

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.

Features

Omni Icon is packed with features designed to make icon management effortless:

• Multi-source Icon System: Upload custom SVG icons, use pre-bundled icons, or access 200,000+ Iconify icons
• Icon Search & Discovery: Powerful search across all icon sources with intelligent caching
• Server-Side Rendering (SSR): Icons pre-rendered on server for instant display and optimal performance
• Smart Caching: Multi-layer caching (memory, filesystem, IndexedDB) for blazing fast load times
• Web Component: Use <omni-icon> custom element anywhere in your theme or content
• Secure: SVG sanitization prevents XSS attacks on uploaded icons
• Modern Architecture: Built with PHP 8.0+ attributes, Symfony DI, and auto-discovery
• Lightweight: Small footprint with lazy loading won’t slow down your site

Visit our GitHub repository for more information.

Seamless Integration

Omni Icon works perfectly with the most popular visual/page builders:

• Gutenberg / Block Editor — Custom Icon block with live preview
• Elementor — Native widget with Elementor controls
• Bricks — Native element with full theme compatibility
• Breakdance — Element Studio integration with SSR
• LiveCanvas — Custom block with panel controls
• Advanced Custom Fields (ACF) — Custom field type for icon selection
• Etch — Web Component with icon picker
• More integrations coming soon!

Icon Sources

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:

• Material Design Icons (mdi)
• Font Awesome (fa6-brands, fa6-regular, fa6-solid)
• Bootstrap Icons (bi)
• Hero Icons (heroicons)
• Lucide (lucide)
• And 150+ more collections

Browse available icons at Iconify

Usage

Gutenberg:

• In the block editor, add a new “Omni Icon” block
• Click the icon picker to browse or search icons

Elementor:

• Add the “Omni Icon” widget
• Click “Browse Icons” to open the icon picker

Bricks:

• Add the “Omni Icon” element
• Click “Browse Icons” to open the icon picker

Breakdance:

• Add the “Omni Icon” element
• Click “Browse Icons” to open the icon picker

LiveCanvas:

• Add the “Omni Icon” element

Advanced Custom Fields (ACF):

• Create or edit an ACF Field Group
• Add a new field and select “Omni Icon” as the field type
• Configure return format (string, array, or HTML)

Etch:

• Add the “omni-icon” Element from the menu element on the bottom of screen
• Browse or search icons in the icon picker
• Confirm selection to copy the code to clipboard
• Paste the copied code into the HTML editor

Web Component Usage

Use the <omni-icon> web component directly in your theme or content:

<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>

Performance & Security

• Lazy Loading: Web components loaded on-demand
• Multi-layer Caching: Memory → Filesystem → IndexedDB
• SSR Support: Icons pre-rendered on server for instant display
• SVG Sanitization: All uploaded SVGs sanitized to prevent XSS
• MIME Type Validation: Server-side validation of uploaded files

Love Omni Icon?

• Give a 5-star review
• Join our Facebook Group
• Sponsor us on GitHub or Ko-fi

Credits

• Built with Symfony UX Icons
• Powered by Iconify
• SVG sanitization by enshrined/svg-sanitize

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.