Joris van Montfort

<p>Add icons to any rich text field in the WordPress block editor. Insert icons inline in paragraphs, headings, lists, buttons, or use the dedicated single icon block.</p>
<h4>Features</h4>
<ul>
<li><strong>Icon picker</strong> – Select icons from a searchable popup in the block editor toolbar.</li>
<li><strong>Font Awesome included</strong> – Ships with Font Awesome 4.7, 5.x and 6.x. Choose your preferred version from the settings.</li>
<li><strong>Custom SVG icon set</strong> – Upload your own SVG icons via a drag & drop uploader in the plugin settings. This is the recommended approach for the best performance.</li>
<li><strong>Single icon block</strong> – A dedicated block with font size, color, alignment and spacing options.</li>
<li><strong>ACF integration</strong> – Adds a “JVM Icon” field type for Advanced Custom Fields.</li>
</ul>
<p><a href="https://nl.wordpress.org/plugins/jvm-rich-text-icons/?preview=1" rel="nofollow ugc">See it in action</a></p>
<h4>How it works</h4>
<p>Pick an icon from the toolbar while editing any rich text field. The plugin inserts a small HTML tag that gets styled by the chosen icon set.</p>
<h4>Why use a custom SVG icon set?</h4>
<p>When you use a custom SVG icon set, the plugin defaults to <strong>inline SVG rendering</strong>. This is a great choice for performance! Google PageSpeed Insights will thank you.</p>
<ul>
<li><strong>Better page speed</strong> – No render-blocking CSS or font files to download. Icons are part of the HTML itself.</li>
<li><strong>Only loads what you use</strong> – Unlike Font Awesome which loads CSS for hundreds of icons, inline SVG only includes the icons that are actually on the page.</li>
<li><strong>No external requests</strong> – Everything is served inline, so there are no extra HTTP requests for font or CSS files.</li>
<li><strong>Inherits text color</strong> – Icons automatically use the surrounding text color, no extra CSS needed.</li>
<li><strong>Fully reversible</strong> – The stored content in the database is not modified. You can switch between render technologies at any time from the plugin settings if you want to.</li>
</ul>
<p>Alternative render technologies (CSS masks, ::before / ::after pseudo-elements) are also available for custom SVG icons if your use case requires it.</p>
<h4>For developers</h4>
<p>The plugin provides several filter hooks to customize its behavior. You can load your own icon set, CSS file, or change the icon class prefix.</p>
<p><strong>Load a custom icon set file</strong></p>
<pre><code>add_filter( 'jvm_richtext_icons_iconset_file', function($file) {
    return get_stylesheet_directory() . '/path_to_my/icons.json';
});
</code></pre>
<p><strong>Load a custom CSS file</strong></p>
<pre><code>add_filter( 'jvm_richtext_icons_css_file', function($cssfile) {
    return get_stylesheet_directory_uri() . '/path_to_my/cssfile.css';
});
</code></pre>
<p>To disable the default CSS file entirely:</p>
<pre><code>add_filter( 'jvm_richtext_icons_css_file', '__return_false');
</code></pre>
<p><strong>Change the icon class prefix</strong></p>
<pre><code>add_filter( 'jvm_richtext_icons_base_class', function() {
    return 'my-custom-css-class-name';
});
</code></pre>
<p><strong>Disable the settings screen</strong></p>
<pre><code>add_filter( 'jvm_richtext_icons_show_settings', '__return_false');
</code></pre>
<p>Please note that if you are loading a custom icon set with the plugin hook: <code>jvm_richtext_icons_css_file</code>, you should make sure the plugin is not set to My SVG uploads as this setting does not load any CSS file.</p>


JVM Rich Text Icons

Thank you so much for the plugin, Joris! I am using a modded version of this plugin to insert a custom icon pack that I created. It was so easy to configure.

You have my utmost respect for this amazing plugin.

Incredible and Highly Extensible

Even though the plugin could not be activated due to a syntax error (which I fixed it - to be more accurate - bypassed it), it eliminates the need for me to create a similar block with ACF Pro for my projects, so thank you for this plugin.

Does one job, and does it well.

I can imagine something like this becoming part of core. Very well developed essential addon for the block editor

great gutenberg addon

Insert icons anywhere in your content — inline in text, headings, buttons, or as a standalone block.

decodigo

<p>A super easy way to add the awesome Metrize Icon Set. No need to type in shortcodes, just select the icon you need.</p>
<h4>Features</h4>
<ul>
<li>Easy to use Icon selection popup.</li>
<li>Shortcodes for every Metrize icon.</li>
<li>Choose from multiple sizes.</li>
</ul>
<p>Metrize Icons were create by Alessio Atzeni. You can view Metrize Icons here: <a href="http://www.alessioatzeni.com/metrize-icons/" rel="nofollow ugc">http://www.alessioatzeni.com/metrize-icons/</a></p>
<h3>Frequently asked questions ==-</h3>


JVM Rich Text Icons vs WP Metrize Icons