Detailed description
A RichText format for icons and labels
The Icon Text format enriches selected Gutenberg text with a visual icon. Editors can choose a built-in SVG icon or select an image from the WordPress media library. This avoids adding columns or extra layout blocks when a simple icon and label composition is required.
Visual controls inside Gutenberg
The configuration panel lets users position the icon before or after the text, adjust its size, define the exact gap between icon and content, and choose the vertical alignment. Built-in SVG icons use the selected editor color, while uploaded images and SVG files preserve their original appearance.
Common use cases
This format works well for benefit lists, contact details, calls to action, practical information, labels, commercial arguments, and interface copy. It creates a clearer visual hierarchy while keeping the text editable and compatible with native WordPress typography controls.
Editorial consistency and SEO
The icon is treated as a decorative enhancement to the selected text. The actual content remains readable by search engines and assistive technologies. Used consistently, Icon Text improves content scanning, highlights important information, and helps maintain a coherent visual system across Gutenberg pages.
Performance
Zero useless scripts, Vanilla JS only.
Native Gutenberg
WCAG compliance for all users.
Icon Text
JS Weight
< 2kb
Version
1.0.0
WCAG
WCAG 2.1 AA
0
Likes
1
Downloads
Vanilla JS Architecture
Guaranteed zero technical debt, optimized for Core Web Vitals.
You might also like
Discover more blocks in the category freemium