Symbol picker in the Gutenberg editor with a live preview of all icons from the sprite file.
The SVG Forge Icon Manager Block loads a central SVG sprite file (by default the bundled i.svg), shows all contained <symbol> elements in a convenient picker and inserts the selected icon as <svg><use href="/i.svg#symbol-id"> into your content.
<use> element (SVG 2). All current browsers support it — no polyfill, no build step.currentColor, inline styles and custom viewBox values. WordPress 7.1’s sanitizer allows only <svg>, <path> and <polygon> and breaks most stroke-based sets.echo sfim_get_icon( 'icon-id' );Developers who maintain their own sprite file. Every icon must exist as a <symbol> in a sprite you build and version — there is no icon manager UI.
WordPress 7.1 ships its own icon system (wp_register_icon(), wp_get_icon()). That is enough for a few icons registered in PHP. If you run a sprite, use this plugin: no frontend code, and it works on WordPress 6.6 and later.
.svg or .svgz).foreignObject, no unknown tags. Same engine as Safe SVG.sfim_sprite_url filter overrides the sprite file (e.g. get_theme_file_uri()).rel including noopener/noreferrer).get_block_wrapper_attributes().core/icon) from the editor.echo sfim_get_icon( 'close', [ 'size' => 20 ] );The SVG sprite file is resolved in this order (first existing source wins):
sfim_sprite_url – the canonical override (has priority).sprite.svg in the plugin directory.Override with a filter (recommended, versionable with the theme) in the theme’s functions.php:
add_filter( 'sfim_sprite_url', fn () => get_theme_file_uri( 'assets/ico.svg' ) );
or point it at a CDN:
add_filter( 'sfim_sprite_url', fn () => 'https://cdn.example.com/icons/ico.svg' );
If you have no sprite yet, this tutorial walks you through building your own icon set step by step.
Classic themes (and any other custom PHP) can print icons from the sprite without using the block:
// Decorative icon: hidden from screen readers, sizes with the font (1em).
echo sfim_get_icon( 'close' );
// Sized, labelled and linked.
echo sfim_get_icon( 'close', [ 'size' => 20, 'label' => 'Close', 'link' => get_permalink() ] );
sfim_get_icon() returns the same `<svg><use>` fragment the block renders, so icons look identical in a template and in post content. It is a plain function of the plugin – no `require`, no `use`, just call it. Useful arguments: `size` (or `width`/`height`), `color`, `background`, `padding`, `class`, `label`, `link`, `target` and `rel`.
Development is done on GitHub.