RotiStudio

Tamas Rottenbacher

Hungarian: <a href="https://rotistudio.hu/bovitmenyek/dashicon-svg-block/" rel="nofollow ugc">Magyar nyelvű bővítmény leírás</a>
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.
Why is this plugin beneficial? 
– 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
Icons the way Gutenberg expects 
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.
Faster loading, more stable layout 
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.
Safe SVG usage 
No SVG uploads, no sanitizer, no risky pipeline. The plugin exclusively uses the official SVG sources of WordPress Dashicons — deterministic, verified markup.
JS-free, cache-friendly 
No icon library JavaScript, no sprite loader, no runtime processing. SVG is static HTML — ideal for SSR, static caching, and block themes.
Editor experience for users 
The Dashicons picker block uses a fast, familiar UI. Simple and consistent to use. Content creators choose icons — not edit code.
In your own language 
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 my plugins website: <a href="https://rotistudio.com/" rel="nofollow ugc">rotistudio.com</a> 
Where can we learn more about your work? Check my personal website there: <a href="https://rottenbacher.hu/" rel="nofollow ugc">rottenbacher.hu</a>

SVG Block for Dashicons by RotiStudio

Adds a native Gutenberg block for inserting 334 WordPress Dashicons as inline SVG — fast, lightweight, and fully customizable.

Themeisle

WPShout

This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/YcSotWXIczI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h4>Usage</h4>
<ol>
<li>After the plugin is activated, go to Appearance > Menus to edit your menus</li>
<li>Enable/Disable icon types in “Menu Icons Settings” meta box</li>
<li>Set default settings for current nav menu; these settings will be inherited by the newly added menu items</li>
<li>Select icon by clicking on the “Select icon” link</li>
<li>Save the menu</li>
</ol>
<h4>Supported icon types</h4>
<ul>
<li>Dashicons (WordPress core icons)</li>
<li><a href="http://shoestrap.org/downloads/elusive-icons-webfont/" rel="nofollow ugc">Elusive Icons</a> by <a href="http://shoestrap.org/blog/author/aristath/" rel="nofollow ugc">Aristeides Stathopoulos</a></li>
<li><a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> by <a href="http://twitter.com/davegandy" rel="nofollow ugc">Dave Gandy</a></li>
<li><a href="http://zurb.com/playground/foundation-icon-fonts-3/" rel="nofollow ugc">Foundation Icons</a> by <a href="http://zurb.com/" rel="nofollow ugc">Zurb</a></li>
<li><a href="http://genericons.com/" rel="nofollow ugc">Genericons</a> by <a href="http://automattic.com/" rel="nofollow ugc">Automattic</a></li>
<li><a href="http://fontello.com/" rel="nofollow ugc">Fontello</a> icon packs</li>
<li><a href="http://themeisle.com/free-icons/" rel="nofollow ugc">TI Icons</a> icon pack by <a href="http://twitter.com/themeisle" rel="nofollow ugc">ThemeIsle</a></li>
<li>Image (attachments)</li>
<li>SVG (attachments)</li>
</ul>
<h4>Planned supported icon types</h4>
<ul>
<li>Image (URL)</li>
</ul>
<h4>Compatible themes</h4>
Menu icons works with most of the themes out there, especially with popular ones like Twenty Seventeen or <a href="https://themeisle.com/themes/hestia/" rel="nofollow ugc">Hestia</a>.
Development of this plugin is done on <a href="https://github.com/codeinwp/wp-menu-icons" rel="nofollow ugc">GitHub</a>. Pull requests welcome. Please see <a href="https://github.com/codeinwp/wp-menu-icons/issues" rel="nofollow ugc">issues reported</a> there before going to the plugin forum.
<h3>If you like this plugin, then consider checking out our other projects:</h3>
<a href="https://www.codeinwp.com/blog/" rel="nofollow ugc">CodeinWP Blog</a> – Designer’s Guide To WordPress 
<a href="https://revive.social" rel="nofollow ugc">Revive.Social</a> – Social Media Tools 
<a href="https://justfreethemes.com" rel="nofollow ugc">JustFreeThemes</a> – Free WordPress Themes directory

Menu Icons by Themeisle – Add Icons to Navigation Menus

Add icons to WordPress navigation menus easily — pick from Font Awesome, Dashicons, image icons & more. Style menu items with custom colors & sizes.

SVG Block for Dashicons by RotiStudio vs Menu Icons by Themeisle – Add Icons to Navigation Menus