Description
Safesprite Icons is a secure SVG icon library for WordPress that compiles used icons into a footer SVG spritesheet and renders them with lightweight <use> references – so you reuse brand icons without duplicating raw SVG markup on every page.
Upload your own custom SVG icons, organize them in collections, sanitize every file on upload, and insert them with a shared icon picker in Gutenberg, Elementor, Classic Editor (TinyMCE), nav menus, shortcode, or PHP.
Why SVG sprites?
- One spritesheet in the footer (
<symbol>definitions) instead of repeating full SVG code - Body output stays small:
<svg><use href="#..."></svg> - Better for performance when the same icons appear many times (menus, cards, loops)
- Site-owned assets only – no remote icon CDNs in v1
Security first
- SVG uploads are accepted only through the plugin Icon Library
- This plugin does not enable SVG uploads in the WordPress Media Library (it is not a “Safe SVG / SVG Support” Media Library plugin)
- Uploads are sanitized with the vendored
enshrined/svg-sanitizelibrary (GPL-2.0-or-later), shipped inside the plugin - Front-end output uses sanitized
<symbol>sprites +<use>– not raw uploaded files as<img src="....svg">
Features
- Secure SVG icon library with collections (folders)
- Rename icon titles and collection names (slugs stay stable for shortcodes/blocks)
- Trash / restore / permanent delete
- Shared icon picker across editors
- Gutenberg SVG icon block (size + color controls)
- Elementor SVG icon widget (loads only when Elementor is active)
- TinyMCE button
- Shortcode:
[sfsi_icon slug="my-icon"] - PHP helper:
sfsi_icon( 'my-icon' ) - Nav menu item icons
- Automatic footer SVG spritesheet compiler
For developers
- Shortcode:
[sfsi_icon slug="my-icon"] - PHP helper:
sfsi_icon( 'my-icon' )in themes or plugins - Settings hooks:
sfsi_register_settings_fields(action),sfsi_sanitize_settings(filter)
Who is this for?
- Sites that need brand icons and custom SVGs without opening Media Library SVG uploads
- Developers who want SVG sprite / spritesheet rendering instead of heavy inline SVG bloat
- Teams using Gutenberg and/or Elementor with one shared library
Screenshots
Blocks
This plugin provides 1 block.
- SVG Icon
Installation
- Upload the
safesprite-iconsfolder to/wp-content/plugins/ - Activate the plugin through the Plugins menu
- Open Safesprite in wp-admin, create a collection, upload SVGs
- Insert icons via block, shortcode, TinyMCE, menus, or Elementor
FAQ
-
Is this a Safe SVG / Media Library SVG plugin?
-
No. Safesprite does not allow SVG uploads in the Media Library. Icons live only in the plugin Icon Library, are sanitized on upload, and render via spritesheet +
<use>. -
Does this create an SVG sprite / spritesheet?
-
Yes. Icons used on a page are compiled into a single footer SVG spritesheet (
<symbol>tags). Content references them with lightweight<use href="#...">markup. -
Can I use custom brand SVG icons in Elementor and Gutenberg?
-
Yes. Upload icons in Safesprite, then pick them from the shared icon picker in the Gutenberg block or Elementor widget.
-
Yes. Attach icons to nav menu items from Appearance Menus.
-
Is there a shortcode?
-
Yes:
[sfsi_icon slug="my-icon"]. Developers can also usesfsi_icon( 'my-icon' )in PHP templates. -
Where are files stored?
-
Sanitized SVG files live under
wp-content/uploads/safesprite-icons/with opaque filenames. Metadata is stored in plugin custom tables (not as custom post types). -
What happens on uninstall?
-
By default, data is kept. Enable “Delete all plugin data on uninstall” under Safesprite Settings if you want tables and files removed.
-
What PHP extensions are required?
-
PHP 7.4+ with the
domandlibxmlextensions (used by the SVG sanitizer).
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Safesprite Icons” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Safesprite Icons” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- First wordpress.org release candidate
- Secure Icon Library with sanitized uploads and footer spritesheets
- Gutenberg, Elementor, TinyMCE, Nav Menus, shortcode, and PHP helper
- Hardened SVG sanitization (no Media Library SVG enablement)
0.2.15
- Security: strip SVG
<style>/style=and remote hrefs after sanitize - Performance: skip upload-dir ensure on front requests; memoize icon lookups
- Fix: nav menu icon meta no longer wiped on unrelated saves
- Packaging: exclude list moved to docs (no
.distignorein plugin – Plugin Check)
0.2.14
- Plugins list: Settings action link to Safesprite -> Settings
0.2.13
- Rename icon titles and collection names (slugs unchanged)
- Icon picker: search by title or slug
- Nav menus: icon preview and Clear control
0.2.12
- Gutenberg editor: size and color preview match Elementor (no fixed admin tile CSS)
0.2.11
- Elementor canvas: fix size slider and custom color live preview
0.2.10
- Elementor editor: show inline icon preview (canvas has no footer spritesheet)
0.2.9
- Elementor & Gutenberg: visual icon picker, size slider (16-256px), inherit or custom color
0.2.8
- Trash: bulk select, restore, and permanently delete icons and collections
0.1.0
- Initial release candidate build