Adds a native Gutenberg block for inserting 334 WordPress Dashicons as inline SVG — fast, lightweight, and fully customizable.
Contributors: Tamas Rottenbacher
Tags: dashicons, svg, gutenberg, block, icons
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.4
Stable version: 1.3.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Donate: rotistudio.hu
Hungarian: Magyar nyelvű bővítmény leírás
This plugin adds a Gutenberg block that lets you pick a Dashicon and render it on the frontend as an inline SVG. The icons are lightweight, scalable, and fully customizable, making them ideal for modern WordPress block-based sites.
The plugin does not rely on the traditional icon rendering approach (CSS-based icon fonts with pseudo-elements and large icons.css files). Instead, it uses a far more optimized yet fully compatible method. There is no separate CSS icon font file, and not a single extra asset is loaded on the frontend. Only the pure SVG icon markup is embedded and rendered by the browser. There are no image files and no CSS files involved, while icons remain perfectly sharp at any size.
- Easily use Dashicons on the frontend
- Choose from 334 icons
- Core Web Vitals friendly
- No icon font or CSS file loading
- No images or image files
- No overengineered or unnecessary features
- No accessibility-hindering CSS pseudo-elements
- Icons scale to any size and stay sharp
- SVG icons appear as clean inline code in the content
- Secure and validated
The Dashicons set is finally available as a native block element. No HTML hacks, no font dependency — just clean inline SVG markup directly from the editor.
Instead of downloading and rendering icon fonts, icons appear instantly in the HTML. No FOIT, no CSS pseudo-elements, no CLS risk — better Core Web Vitals and predictable rendering.
No SVG uploads, no sanitizer, no risky pipeline. The plugin exclusively uses the official SVG sources of WordPress Dashicons — deterministic, verified markup.
No icon library JavaScript, no sprite loader, no runtime processing. SVG is static HTML — ideal for SSR, static caching, and block themes.
The Dashicons picker block uses a fast, familiar UI. Simple and consistent to use. Content creators choose icons — not edit code.
The plugin can be easily and quickly translated on the official translate.wordpress.org platform, making it even easier to use in your own language.
Do you have other plugins? Yes, check: https://rotistudio.hu/
More about my work: https://rottenbacher.hu/
- Upload the plugin folder to
/wp-content/plugins/svg-block-for-dashicon-rotistudio - Activate the plugin in Plugins → Installed Plugins
Install and activate the plugin. In the Gutenberg editor, type /svg in a paragraph block, or search for SVG when adding blocks.
334 Dashicons in SVG path format (no files).
SVG path markup has long been supported by all modern browsers.
Yes. Inline styles ensure compatibility with all block themes and most classic themes.
Yes. Minimal, performance-optimized code. Only the selected SVG is rendered on frontend and editor.
Yes: size, color, background, border, border-radius, padding, margin.
The block editor compares icon color with page background, which may differ from the icon background used on frontend.
Editor check: text vs page background
Frontend reality: text vs icon background
Frontend colors are applied directly to the SVG element, ensuring correct contrast where it matters.
Yes. Fully internationalized. Hungarian included. WordPress 4.6+ loads translations automatically.
No. Gutenberg-only block.