Omni Icon
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.2+ 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
- 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
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>
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)
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.