Icon Text
v1.0.0 Starter

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.

Starter Vanilla JS

Icon Text

JS Weight

< 2kb

Version

1.0.0

WCAG

WCAG 2.1 AA

0

Likes

1

Downloads

Dependencies None
License Starter
Accessibility WCAG 2.1 AA Compliance

Vanilla JS Architecture

Guaranteed zero technical debt, optimized for Core Web Vitals.