SVG Block
for Dashicons
Quality icon block plugin for WordPress
Adds a new Gutenberg block that allows you to use Dashicons. It is fast, lightweight, easy to use, and fully customizable!
Choose from 334 SVG icons and style them to suit your needs!
Fast, lightweight, speed optimized
Highly customizable
Simple and intuitive to use
Good for all block themes
Plugin overview
A WordPress plugin that adds a new Gutenberg block to your editor, making it easy to insert icons into your website or online store. No complicated settings or code snippets are required.
The icons are highly customizable. You can choose size, colors, and additional styling options. This allows you to select SVG icons that match any design.
When creating the SVG Block plugin, speed was a key focus. The plugin is fast and does not slow down page load times. It is ideal for modern, fast WordPress websites.
- Easy use of Dashicons
- Choose from 334 icons
- Fast andCore Web Vitals‑friendly
- Accessible (screen reader‑friendly)
- No icon font, CSS, or image files needed
- No unnecessary features
- Icons scalable to any size
- Safe, supported and verified
WPCS (WP Code Standard)
PCP (WP Plugin Check Plugin)
ESLint
W3C
Benefits Compared to Icon Fonts
Instead of downloading and rendering icon fonts, icons appear immediately as HTML. This approach does not negatively impact Core Web Vitals, avoids FOIT, avoids CSS pseudo‑elements, and offers predictable rendering. It is compatible with caching, optimization plugins, and static rendering approaches.
Simple, lightweight code base
The SVG Icon Block plugin is free of unnecessary elements and features. There’s no export/import or complex code, and it builds solely on WordPress’s native block editor capabilities.
For users, no coding required
The Dashicon selector block is designed for users, offering a quick and familiar interface. Content creators can choose icons without editing code.
Compatibility and Accessibility
This WordPress plugin is compatible with other plugins such as AMP, cache plugins, and optimization tools. It also delivers improved accessibility compared to other icon plugins by avoiding CSS pseudo‑elements and offering support for focus handling.
Translation Ready
The plugin can be easily and quickly translated via the official WordPress translation platform, allowing usage in any language.
Standards and Verified code
The SVG Block for Dashicons plugin follows WordPress Code Standards (WPCS), is linted with ESLint, and passes PCP and W3C validity checks.
Active Support and Docs
Active support is available both in the official forums and through the plugin’s own support channels, including documentation and video guides.
Reviews and Ratings
Uploading…
If you would like to submit feedback, you can do so in the contact menu or in the official repo here. Thanks for that!
Frequently Asked Questions and Answers
The description about this can be viewed install article here.
In the Gutenberg editor, click the blue + button in the top left corner. You can find the block either in the Text group or by typing “svg block” into the search field that appears, then click the small smiling icon.
Another way is to add a regular paragraph block and start typing /svg block in the paragraph. Then click the block in the popup that appears.
You can use the Gutenberg Columns, Row, or Grid block for this. By placing icons inside one of these blocks, you can arrange them in a single row.
It is possible to apply global formatting to all icons inserted by the plugin, which is why class identifiers are included. Inline style values can be overridden using !important.
div.wp-block-rsdsb-dashicon { ... } //wrap
div.wp-block-rsdsb-dashicon a { ... } //ikon
div.wp-block-rsdsb-dashicon svg.rsdsb-svg-dashicon { ... } //svgIf you don’t want to use a WP-CLI command, the simplest way is to modify and rename the file /wp-content/plugins/svg-block-for-dashicon-rotistudio/languages/svg-block-for-dashicon-rotistudio-hu_HU-rsdsb-dashicons-svg-block-editor.json. Replace the country code both in the file name and on line 10 of the file, as well as inside the elements between the [ ] brackets.
As an example, the Hungarian language file and its translation are included in the plugin. Based on this, the texts can be easily translated into any other language, with the English strings clearly marked.
Documentation
Since this plugin does not include complex features and has no integrations with other plugins, detailed documentation is not really necessary for its use.