{"id":369199,"date":"2026-09-19T10:29:49","date_gmt":"2026-09-19T10:29:49","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/icon-library\/"},"modified":"2026-10-04T18:12:54","modified_gmt":"2026-10-04T18:12:54","slug":"sf-icon-manager","status":"publish","type":"plugin","link":"https:\/\/de-at.wordpress.org\/plugins\/sf-icon-manager\/","author":20174602,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.5.0","stable_tag":"0.5.0","tested":"7.1.2","requires":"6.6","requires_php":"8.3","requires_plugins":null,"header_name":"SVG Forge Icon Manager","header_author":"svgforge","header_description":"Gutenberg block that inserts SVG icons from a sprite file (ico.svg) via <use> and links them.","assets_banners_color":"","last_updated":"2026-10-04 18:12:54","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":192,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.3.3":{"tag":"0.3.3","author":"wpdynamics","date":"2026-09-19 10:52:34","revision":3703214},"0.3.4":{"tag":"0.3.4","author":"wpdynamics","date":"2026-09-19 14:51:28","revision":3703382},"0.4.0":{"tag":"0.4.0","author":"wpdynamics","date":"2026-09-30 13:49:31","revision":3721372},"0.5.0":{"tag":"0.5.0","author":"wpdynamics","date":"2026-10-04 18:12:54","revision":3727693}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3703245,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3703245,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":[],"assets_blueprints":{},"all_blocks":{"sf-icon-manager\/svg-icon":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"sf-icon-manager\/svg-icon","version":"0.2.0","title":"SVG Icon","category":"widgets","icon":"format-image","description":"Inserts an SVG icon from the plugin SVG Forge Icon Manager and can be linked.","keywords":["icon","svg","symbol","sprite"],"textdomain":"sf-icon-manager","supports":{"html":false,"align":["left","center","right"],"anchor":true,"className":true,"color":{"text":true,"background":true,"link":false,"heading":false,"button":false,"__experimentalSkipSerialization":true,"__experimentalDefaultControls":{"text":true,"background":true}},"spacing":{"margin":true,"padding":true,"__experimentalSkipSerialization":["padding"],"__experimentalDefaultControls":{"margin":true,"padding":false}},"dimensions":{"width":true,"__experimentalSkipSerialization":["width"],"__experimentalDefaultControls":{"width":true}}},"selectors":{"root":".wp-block-sf-icon-manager-svg-icon .svg-icon__svg","css":".wp-block-sf-icon-manager-svg-icon","spacing":{"margin":".wp-block-sf-icon-manager-svg-icon"}},"attributes":{"symbolId":{"type":"string","default":""},"url":{"type":"string","default":""},"opensInNewTab":{"type":"boolean","default":false},"rel":{"type":"string","default":""},"label":{"type":"string","default":""},"width":{"type":"string","default":"48px"},"height":{"type":"string"}},"editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","render":"file:.\/render.php"}},"tagged_versions":["0.3.3","0.3.4","0.4.0","0.5.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3703382,"resolution":"1","location":"assets","locale":"","width":1200,"height":869}},"screenshots":{"1":"Symbol picker in the Gutenberg editor with a live preview of all icons from the sprite file."}},"plugin_section":[],"plugin_tags":[148076,498,21077,2904],"plugin_category":[50],"plugin_contributors":[281572],"plugin_business_model":[],"class_list":["post-369199","plugin","type-plugin","status-publish","hentry","plugin_tags-gutenberg","plugin_tags-icons","plugin_tags-sprite","plugin_tags-svg","plugin_category-media","plugin_contributors-wpdynamics","plugin_committers-wpdynamics"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/sf-icon-manager\/assets\/icon-128x128.png?rev=3703245","icon_2x":"https:\/\/ps.w.org\/sf-icon-manager\/assets\/icon-256x256.png?rev=3703245","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/sf-icon-manager\/assets\/screenshot-1.jpg?rev=3703382","caption":"Symbol picker in the Gutenberg editor with a live preview of all icons from the sprite file."}],"raw_content":"<!--section=description-->\n<p>The SVG Forge Icon Manager Block loads a central SVG sprite file (by default the bundled <code>i.svg<\/code>), shows all contained <code>&lt;symbol&gt;<\/code> elements in a convenient picker and inserts the selected icon as <code>&lt;svg&gt;&lt;use href=\"\/i.svg#symbol-id\"&gt;<\/code> into your content.<\/p>\n\n<h4>Why another icon plugin?<\/h4>\n\n<ul>\n<li><strong>A W3C standard:<\/strong> every icon is referenced with the <code>&lt;use&gt;<\/code> element (<a href=\"https:\/\/www.w3.org\/TR\/SVG2\/struct.html#UseElement\">SVG 2<\/a>). All current browsers support it \u2014 no polyfill, no build step.<\/li>\n<li><strong>No frontend cost:<\/strong> the plugin loads no external CSS or JavaScript. The browser fetches the sprite once and renders every icon from it.<\/li>\n<li><strong>One cacheable file:<\/strong> a static SVG file, fetched once and reused by every icon on the site.<\/li>\n<li><strong>Full SVG survives:<\/strong> stroke icons, gradients, <code>currentColor<\/code>, inline styles and custom <code>viewBox<\/code> values. WordPress 7.1's sanitizer allows only <code>&lt;svg&gt;<\/code>, <code>&lt;path&gt;<\/code> and <code>&lt;polygon&gt;<\/code> and breaks most stroke-based sets.<\/li>\n<li><strong>Classic Themes<\/strong>: You can use php to output icons in your classic theme, <code>echo sfim_get_icon( 'icon-id' );<\/code><\/li>\n<\/ul>\n\n<h4>Who is this plugin for?<\/h4>\n\n<p>Developers who maintain their own sprite file. Every icon must exist as a <code>&lt;symbol&gt;<\/code> in a sprite you build and version \u2014 there is no icon manager UI.<\/p>\n\n<p>WordPress 7.1 ships its own icon system (<code>wp_register_icon()<\/code>, <code>wp_get_icon()<\/code>). 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.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li>Settings page to upload the sprite file (<code>.svg<\/code> or <code>.svgz<\/code>).<\/li>\n<li>Uploaded sprites are sanitized with a strict allowlist: no scripts, no event handlers, no <code>foreignObject<\/code>, no unknown tags. Same engine as <a href=\"https:\/\/wordpress.org\/plugins\/safe-svg\/\">Safe SVG<\/a>.<\/li>\n<li>Upload a sprite you already have, or build one with svgforge-cli.<\/li>\n<li><code>sfim_sprite_url<\/code> filter overrides the sprite file (e.g. <code>get_theme_file_uri()<\/code>).<\/li>\n<li>Symbol picker in the editor with a live preview.<\/li>\n<li>Icons from sprite subdirectories are grouped.<\/li>\n<li>Icons can be linked (new tab, <code>rel<\/code> including <code>noopener<\/code>\/<code>noreferrer<\/code>).<\/li>\n<li>Aria-label for screen readers.<\/li>\n<li>Fill and stroke colour as well as size per block.<\/li>\n<li>Server-side rendering with <code>get_block_wrapper_attributes()<\/code>.<\/li>\n<li>Alignment, anchor and additional CSS classes.<\/li>\n<li>Optional switch to remove the core Icon block (<code>core\/icon<\/code>) from the editor.<\/li>\n<li>Icon helper for classic themes: <code>echo sfim_get_icon( 'close', [ 'size' =&gt; 20 ] );<\/code><\/li>\n<\/ul>\n\n<h4>Honest limitations<\/h4>\n\n<ul>\n<li>Adding or editing icons means rebuilding the sprite file \u2014 typically with <a href=\"https:\/\/github.com\/svgforge\/svgforge-cli\/\">svgforge-cli<\/a>.<\/li>\n<\/ul>\n\n<h4>Configure the sprite file<\/h4>\n\n<p>The SVG sprite file is resolved in this order (first existing source wins):<\/p>\n\n<ol>\n<li>Filter <code>sfim_sprite_url<\/code> \u2013 the canonical override (has priority).<\/li>\n<li>Uploaded file from Settings \u2192 SVG Forge Icon Manager (backend upload).<\/li>\n<li>Fallback: <code>sprite.svg<\/code> in the plugin directory.<\/li>\n<\/ol>\n\n<p>Override with a filter (recommended, versionable with the theme) in the theme's <code>functions.php<\/code>:<\/p>\n\n<pre><code>add_filter( 'sfim_sprite_url', fn () =&gt; get_theme_file_uri( 'assets\/ico.svg' ) );\n<\/code><\/pre>\n\n<p>or point it at a CDN:<\/p>\n\n<pre><code>add_filter( 'sfim_sprite_url', fn () =&gt; 'https:\/\/cdn.example.com\/icons\/ico.svg' );\n<\/code><\/pre>\n\n<p>If you have no sprite yet, this <a href=\"https:\/\/svgforge.github.io\/blog\/posts\/custom-icon-sets\/\">tutorial walks you through building your own icon set<\/a> step by step.<\/p>\n\n<h4>Icons in theme templates<\/h4>\n\n<p>Classic themes (and any other custom PHP) can print icons from the sprite without using the block:<\/p>\n\n<pre><code>\/\/ Decorative icon: hidden from screen readers, sizes with the font (1em).\necho sfim_get_icon( 'close' );\n\n\/\/ Sized, labelled and linked.\necho sfim_get_icon( 'close', [ 'size' =&gt; 20, 'label' =&gt; 'Close', 'link' =&gt; get_permalink() ] );\n\nsfim_get_icon() returns the same `&lt;svg&gt;&lt;use&gt;` fragment the block renders, so icons look identical in a template and in post content. It is a plain function of the plugin \u2013 no `require`, no `use`, just call it. Useful arguments: `size` (or `width`\/`height`), `color`, `background`, `padding`, `class`, `label`, `link`, `target` and `rel`.\n<\/code><\/pre>\n\n<h3>Development<\/h3>\n\n<p>Development is done on <a href=\"https:\/\/github.com\/svgforge\/sf-icon-manager\">GitHub<\/a>.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code> (or install the ZIP via Plugins \u2192 Add New).<\/li>\n<li>Activate the plugin under \"Plugins\".<\/li>\n<li>Upload the sprite file (<code>ico.svg<\/code> with <code>&lt;symbol id=\"...\"&gt;<\/code> elements) via <strong>Settings \u2192 SVG Forge Icon Manager<\/strong> or reference your own file with the <code>sfim_sprite_url<\/code> filter.<\/li>\n<li>In the editor, add the \"SVG Icon\" block and choose an icon.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"where%20do%20the%20icons%20come%20from%3F\"><h3>Where do the icons come from?<\/h3><\/dt>\n<dd><p>From the central sprite file <code>ico.svg<\/code>. Each icon is a <code>&lt;symbol id=\"my-icon\" viewBox=\"0 0 24 24\"&gt;\u2026&lt;\/symbol&gt;<\/code> element. The sprite is a plain static SVG file; the browser pulls single icons out of it with the <code>&lt;use&gt;<\/code> element (<a href=\"https:\/\/www.w3.org\/TR\/SVG2\/struct.html#UseElement\">SVG 2, W3C<\/a>).<\/p><\/dd>\n<dt id=\"why%20not%20simply%20use%20the%20native%20svg%20icons%20of%20wordpress%207.1%3F\"><h3>Why not simply use the native SVG icons of WordPress 7.1?<\/h3><\/dt>\n<dd><p>WordPress 7.1 offers a native icon system with <code>wp_register_icon_collection()<\/code> \/ <code>wp_register_icon()<\/code> \/ <code>wp_get_icon()<\/code> \u2014 that is enough if you register a few icons directly in code. With a central SVG sprite this plugin goes further: the icons are served as standard SVG fragments (<a href=\"https:\/\/www.w3.org\/TR\/SVG2\/struct.html#UseElement\">W3C specification<\/a>) with no frontend PHP, CSS or JS, full SVG freedom (including stroke icons), existing sprites without per-icon PHP code, one cacheable file and per-instance block styling.<\/p><\/dd>\n<dt id=\"can%20i%20remove%20the%20built-in%20icon%20block%3F\"><h3>Can I remove the built-in Icon block?<\/h3><\/dt>\n<dd><p>Yes. On the settings page (WordPress core Icon block) you can enable \"Disable the WordPress core Icon block\". <code>core\/icon<\/code> is then removed from the block editor (also for blocks already saved in content) and from the block-types REST API, so the SVG Icon block is the only icon block while editing. This is a backend switch: the frontend is not touched and stored content keeps rendering as before, so you can switch it back on at any time.<\/p><\/dd>\n<dt id=\"does%20it%20work%20without%20js%20in%20the%20frontend%3F\"><h3>Does it work without JS in the frontend?<\/h3><\/dt>\n<dd><p>Yes. The frontend markup is generated server-side in <code>render.php<\/code>; the built JS is only needed in the editor.<\/p><\/dd>\n<dt id=\"how%20do%20i%20disable%20the%20color%20options%20for%20the%20block%3F\"><h3>How do I disable the color options for the block?<\/h3><\/dt>\n<dd><p>Put the block's color settings into your theme's <code>theme.json<\/code>:<\/p>\n\n<pre><code>{\n    \"version\": 3,\n    \"settings\": {\n        \"blocks\": {\n            \"sf-icon-manager\/svg-icon\": {\n                \"color\": { \"custom\": false, \"palette\": [] }\n            }\n        }\n    }\n}\n<\/code><\/pre>\n\n<p>That removes the standard Gutenberg Color\/Background panels for the SVG Icon block. As in the core Icon block, multi-color icons (e.g. Tango icon sets) keep their baked-in colors and are not affected by the color controls; monochrome icons follow the chosen color.<\/p><\/dd>\n<dt id=\"how%20do%20i%20offer%20preset%20sizes%20like%20font%20sizes%3F\"><h3>How do I offer preset sizes like font sizes?<\/h3><\/dt>\n<dd><p>The size is the standard Gutenberg Dimensions panel (<code>supports.dimensions.width<\/code>, like the core Icon block): the block is square, and size presets are standard theme.json <code>dimensionSizes<\/code> per block:<\/p>\n\n<pre><code>{\n    \"version\": 3,\n    \"settings\": {\n        \"blocks\": {\n            \"sf-icon-manager\/svg-icon\": {\n                \"dimensions\": {\n                    \"dimensionSizes\": [\n                        { \"name\": \"S\", \"slug\": \"s\", \"size\": \"32px\" },\n                        { \"name\": \"L\", \"slug\": \"l\", \"size\": \"64px\" }\n                    ],\n                    \"width\": true\n                }\n            }\n        }\n    }\n}\n<\/code><\/pre>\n\n<p>With presets the panel shows a slider that moves across the preset sizes, like the core Icon block. A toggle next to it switches to a custom value input with a slider, using the allowed units (<code>spacing.units<\/code>). <code>dimensions.width: false<\/code> disables sizing entirely, so the block always renders at its default size.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.5.0<\/h4>\n\n<ul>\n<li><code>sfim_get_icon()<\/code> renders a sprite icon as an <code>&lt;svg&gt;&lt;use&gt;<\/code> fragment from theme code, for classic themes and custom PHP (size, colors, padding, label, optional link and theme presets).<\/li>\n<li>Icon picker: new view-size toggle between Normal and Large (double size) icon previews.<\/li>\n<li>Icon picker: toolbar buttons are now reachable with the keyboard and focus the button itself.<\/li>\n<li>Icon picker: the toolbar stays visible while scrolling and the dialog no longer shows a second scrollbar.<\/li>\n<\/ul>\n\n<h4>0.4.0<\/h4>\n\n<ul>\n<li>Removed the experimental WordPress 7.1 native icon integration: core's SVG sanitizer was too strict for real sprite libraries.<\/li>\n<li>WordPress' own Icon block can now be removed with a checkbox (\"Disable the WordPress core Icon block\"). It only affects the editor, not the frontend.<\/li>\n<li>Uninstalling the plugin now also removes its own settings. The uploaded sprite file is kept.<\/li>\n<li>Readme leads with the plugin's advantages: no external CSS or JavaScript on the frontend, W3C-standard SVG fragments.<\/li>\n<li>Updated npm dependencies; the test suite now runs on Vitest.<\/li>\n<\/ul>\n\n<h4>0.3.4<\/h4>\n\n<ul>\n<li>Readme: clarified that the sprite is a static SVG fragment file loaded by the browser via <code>&lt;use&gt;<\/code> (no JS on the frontend), added the custom icon sets tutorial link and a \"Cache friendly\" selling point.<\/li>\n<li>High-resolution plugin screenshot.<\/li>\n<\/ul>\n\n<h4>0.3.3<\/h4>\n\n<ul>\n<li><code>Tested up to: 7.1<\/code> (wp.org plugin check rejects minor versions).<\/li>\n<\/ul>\n\n<h4>0.3.2<\/h4>\n\n<ul>\n<li>Admin stylesheet enqueued via <code>wp_enqueue_style<\/code>.<\/li>\n<li><code>composer.json<\/code> ships in the plugin ZIP (required when <code>vendor\/<\/code> exists).<\/li>\n<li>Test suite upgraded to WordPress 7.1.1 with PHPUnit 12.<\/li>\n<\/ul>\n\n<h4>0.3.1<\/h4>\n\n<ul>\n<li>Admin UI branded as \"SVG Forge Icon Manager\" (settings menu, page title, native icons collection label); translations regenerated.<\/li>\n<li><code>\/i.svg<\/code> no longer cached immutably: the local-file branch revalidates on every request (<code>no-cache, must-revalidate<\/code>) with real <code>304 Not Modified<\/code> responses, so sprite changes are picked up immediately.<\/li>\n<li>TypeScript sources, test files and type declarations no longer ship in the production plugin ZIP.<\/li>\n<\/ul>\n\n<h4>0.3.0<\/h4>\n\n<ul>\n<li>Short URL <code>\/i.svg<\/code> for the sprite, opt-in via the <code>sfim_short_url<\/code> filter.<\/li>\n<li>Stricter upload sanitization (allowlist via enshrined\/svg-sanitize instead of regex); automated dev releases from <code>main<\/code>; the plugin ZIP ships its vendored dependencies.<\/li>\n<li>Type declarations across the source (PHP 8.3+); padding applies to the SVG element, not the wrapper.<\/li>\n<li>New <code>docs\/api.md<\/code> API reference; settings page shows the short URL under \"Active sprite file\".<\/li>\n<\/ul>\n\n<h4>0.2.1<\/h4>\n\n<ul>\n<li>wp.org compliance: escaped SVG output with an input allowlist, direct-access guard in the render template, readme and changelog cleanup.<\/li>\n<li>Remove the now-discouraged <code>load_plugin_textdomain()<\/code> call; WordPress loads translations for the plugin slug automatically.<\/li>\n<\/ul>\n\n<h4>0.2.0<\/h4>\n\n<ul>\n<li>WordPress 7.1 native icon integration (experimental): symbols of the configured sprite are registered as an <code>sf-icon-manager<\/code> icon collection (setting \"WordPress native icon integration\", default Off).<\/li>\n<li>New setting mode \"Off + disable core Icon block\" deregisters the built-in Icon block in the editor (including in content) and its frontend rendering.<\/li>\n<li>Registration is lazy: it only runs when needed (core Icon block or REST), keeping page-load cost independent of the icon count.<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"SVG Icon Block: inserts icons from your own sprite via . No frontend PHP, CSS or JS, and one static, cacheable SVG file for all icons.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/369199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=369199"}],"author":[{"embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpdynamics"}],"wp:attachment":[{"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=369199"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=369199"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=369199"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=369199"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=369199"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/de-at.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=369199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}