threadi

<p>Use a Gutenberg Block to manage a download list with file type specific icons. No configuration is necessary. The Block can be used immediately after installation.</p>
<h4>Features</h4>
<ul>
<li>Choose files from media library</li>
<li>Output chosen files as list with file-type-specific icon, download-link, title, size and description from media library</li>
<li>Ships with multiple iconsets (Bootstrap-Icons, Dashicons, FontAweSome-Icons, Themify-Icons)</li>
<li>Drag & Drop sorting for the list</li>
<li>Remove files from list</li>
</ul>
<h4>Supports</h4>
<ul>
<li>Display of file size, description and icon can be switched on and off</li>
<li>Choose what link should be published: direct link or attachment page</li>
<li>Choose an iconset for each Block; manage custom icons in unlimited lists</li>
<li>Usage of <a href="https://github.com/threadi/downloadlist/tree/master/docs/hooks.md" rel="nofollow ugc">multiple hooks</a> to change or add icons to shipped iconsets</li>
<li>Sort list by title or filesize with one click</li>
<li>The Block can be used in widgets</li>
<li>Set colors, typography and borders for each Block</li>
<li>Use <a href="https://wordpress.org/plugins/external-files-in-media-library/" rel="ugc">External files in media library</a> if you want to link to external files</li>
</ul>
<p>The development repository is on <a href="https://github.com/threadi/downloadlist" rel="nofollow ugc">GitHub</a>.</p>


Download List Block with Icons

Use a Gutenberg Block to manage a download list with file type specific icons. No configuration is necessary.

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.

Download List Block with Icons vs JVM Rich Text Icons