Skip to content
Jooosi
Account
JI Jooosi Icon

Developer Reference

Browse documentation
Overview
Contents
On this page
  1. Use the web component
  2. REST API
  3. Register a custom source
  4. When an icon does not appear

Use the <jooosi-icon> web component in templates and other HTML contexts, query the REST API for icon data, or register an SVG collection from a theme or plugin. The picker and the developer interfaces use the same prefix:name icon names.

Use the web component#

Add the component where you want the icon to appear. Replace the example name with an icon available on your site.

example.htmlHTML
<jooosi-icon name="mdi:home" width="24" height="24" color="#2563eb"></jooosi-icon>

The plugin renders icons on the server where possible and loads its web component for client-side updates. Changing the name, size, or color attributes updates the element. Existing <omni-icon> markup and the legacy omni: source prefix remain supported.

REST API#

The public read-only endpoints use the jooosi-icon/v1 namespace. In URL paths, write the icon prefix and name as separate path segments instead of using a colon:

  • GET /wp-json/jooosi-icon/v1/icon/item/{prefix}/{name} returns icon data as JSON.
  • GET /wp-json/jooosi-icon/v1/icon/item/{prefix}/{name}.svg returns sanitized SVG markup.
  • GET /wp-json/jooosi-icon/v1/icon/search?query={text} searches available icons.
  • GET /wp-json/jooosi-icon/v1/icon/collections lists available collections.

For example, the name lucide:arrow-right maps to the path /icon/item/lucide/arrow-right.svg.

Register a custom source#

A theme or plugin can register a directory of SVG files with the jooosi-icon/service/icon:sources filter. Each registered source needs a unique prefix, a display name, and a filesystem path; its public URL is optional; this example leaves it unset.

functions.phpPHP
add_filter( 'jooosi-icon/service/icon:sources', static function ( array $sources ): array {
    $icon_dir = __DIR__ . '/icons';

    $sources['acme'] = [
        'name' => 'Acme Icons',
        'path' => $icon_dir,
    ];

    return $sources;
} );

With icons/logo.svg in that directory, use acme:logo in the picker and wherever Jooosi Icon renders icons. Register the filter before the first icon registry, collection, or search request, because sources are loaded lazily.

When an icon does not appear#

  • Check the spelling and the prefix:name format.
  • For Iconify icons, make sure the WordPress server can reach the Iconify API.
  • For uploaded SVGs, confirm the file is in the intended set and is within the upload size limit.
  • For editor integrations, confirm both Jooosi Icon and the corresponding editor or builder are active.

For source naming and upload details, see Icon Sources. For a complete setup walkthrough and a test search, see Register a Custom Source.