Today we’re introducing Jooosi Icon, a WordPress plugin that brings icons into the places where you already build. It gives you one consistent way to find and use icons in the block editor, popular page builders, custom fields, and your own theme code.
🔎 One icon workflow for WordPress#
Icons often come from different libraries, media folders, and snippets of copied SVG. That can make a simple task—adding the right icon to a button, a feature list, or a navigation item—feel more fragmented than it needs to be.
Jooosi Icon brings those sources together. Search for an icon, preview it, and insert it from the editor you’re already using. When you need a brand mark or a one-off illustration, add your own SVG and keep it available in an organized icon set.
🧩 Use icons where you build#
Jooosi Icon connects its icon picker to the WordPress tools people use to design and manage sites:
- Gutenberg and the WordPress Block Editor, with a dedicated icon block and live preview
- Elementor, Bricks, Breakdance, LiveCanvas, and Divi 5, with editor-native integrations
- Advanced Custom Fields, with an icon field and flexible return formats
- Etch, with a web component and icon picker
Each integration gives you a familiar way to browse and choose an icon. You can keep working in your preferred editor instead of switching to a separate icon library every time.
📚 Choose from three icon sources#
Your own SVG icons#
Upload custom SVGs and organize them into sets for a project, client, or brand. Jooosi Icon checks uploaded files and sanitizes SVG markup before use, so you can manage custom artwork through WordPress without hand-editing each file into a code snippet.
Bundled icons#
The plugin also includes bundled icons for commonly used graphics and sponsor logos. These are ready to use alongside your own icons.
Iconify’s icon collections#
Search more than 200,000 icons across 150+ collections, including Lucide, Material Design Icons, Bootstrap Icons, Heroicons, and Font Awesome. That gives you a wide range of styles and familiar symbols from one picker.
💻 Use the same component in your own code#
If you work in a theme template or a custom content area, you can use the <jooosi-icon> web component directly. For example:
<jooosi-icon name="lucide:arrow-right"></jooosi-icon>
<jooosi-icon name="local:brand-mark" width="48" height="48"></jooosi-icon>The same component supports size and color attributes, and existing <omni-icon> markup remains supported as a compatibility alias for sites already using the former Omni Icon name.
🛡️ Built for everyday performance and safety#
Jooosi Icon can render icons on the server, so they appear in the page markup without waiting for a client-side request. Lazy loading and caching help keep icon use efficient. Your uploaded SVGs and bundled icons are available locally; icons from Iconify are retrieved through the Iconify API and cached by the plugin.
🚀 Get started with Jooosi Icon#
Jooosi Icon is free to get started with. Install it from WordPress.org, then use its picker in your preferred editor. Visit the Jooosi Icon product page for the latest product details, release notes, and support links.
Whether you need one small interface symbol or a growing collection of client assets, Jooosi Icon helps keep the work of finding and using icons close to where you build.
