A modern WordPress plugin that seamlessly integrates icons across the WordPress ecosystem with support for multiple page builders, custom icon uploads, and access to 200,000+ icons from Iconify.

Add beautiful icons to your WordPress site with seamless integration across Gutenberg, Elementor, Bricks, Breakdance, LiveCanvas, or anywhere with the <omni-icon> web component.

• ✅ Multi-source Icon System: Upload custom icons, use 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
• 🚀 Smart Caching: Multi-layer caching (memory, filesystem, IndexedDB) for optimal performance
• 📦 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

Seamless integration with the most popular visual/page builders and custom field plugins:

• 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 with multiple return formats
• Etch — Web Component with icon picker
• Divi 5 — Native module

Upload your own SVG icons via admin page or manually place them in the storage directory:

• Format: local:icon-name or custom-set:icon-name
• Organized in sets via subdirectories
• SVG sanitization for security
• Manual upload (optional): Place SVG files in the storage directory

Storage: wp-content/uploads/omni-icon/local/

Pre-packaged icons included with the plugin:

• Prefix: omni:icon-name
• Sponsored icons

Storage: /svg directory in plugin folder

Access to 150+ icon collections with 200,000+ icons:

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

Visit Iconify to browse available icons.

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="omni:windpress" color="#3b82f6"></omni-icon>
<omni-icon name="fa6-solid:heart"></omni-icon>

Features:

• Server-side rendering for instant display
• Lazy loading with smart caching
• Attribute reactivity (changes update in real-time)
• Error handling with visual indicators

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

• ✅ Lazy Loading: Web components loaded on-demand
• ✅ Multi-layer Caching: Memory → Filesystem → IndexedDB
• ✅ SSR Support: Icons pre-rendered on server for instant display
• ✅ Smart Invalidation: mtime-based cache invalidation

All SVGs are validate for the MIME type and sanitized to prevent XSS (enshrined/svg-sanitize)

Want to contribute or customize the plugin? Check out our DEVELOPMENT.md guide for detailed information about:

• Setting up your development environment
• Understanding the architecture
• Contributing guidelines

If you like this project, please consider supporting us by becoming a sponsor. Your sponsorship helps us maintain and improve all our free WordPress plugins, not just Omni Icon.

As a sponsor, you'll receive benefits across our entire plugin ecosystem:

• 🎨 Your product/brand icon SVG bundled in Omni Icon releases (via omni:your-brand prefix)
• 📝 Your logo and link featured in the README of all our current and future free plugins
• ⭐ Recognition in the admin area sponsor section across all our plugins
• 💼 Direct exposure to thousands of WordPress developers and designers using our plugin ecosystem
• 🌟 Unified sponsor listing - one sponsorship covers your presence in our entire plugin family

Your icons will be permanently accessible to all Omni Icon users through the omni: prefix, and your brand will gain visibility across our growing collection of WordPress tools.

Supporting one plugin means supporting all our open-source efforts!

• GitHub Sponsors
• Ko-fi

Thank you to our amazing sponsors who support all our plugin development! 🥰🫰🫶

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

For issues, questions, or feature requests, please open an issue on GitHub.