Icon

Use Icon to display a single icon with optional title text, custom colors, sizing, and an optional link.

Usage

Use Icon to display a single icon from the built-in icon libraries, with optional title text rendered next to it. The module outputs an icon paired with editor-driven content, supports an optional link wrapper around the icon and text, and exposes screen reader text for accessibility. Icon colors, hover colors, background colors, and sizing are all configurable, with extra controls for Font Awesome DuoTone icons and an optional gradient background.

Use Icon for feature lists, service highlights, social or contact links, callouts, list bullets, and any layout that needs a recognizable glyph next to short supporting text. It fits placements where you want a styled icon with consistent sizing and color treatment without writing custom HTML or CSS.

Module Settings

The Icon module settings control which icon is shown, the optional link and accessibility text, the title content rendered next to the icon, and the icon and text styling.

General Tab

The General tab selects the icon, configures the optional link, sets accessibility text, and provides the title content shown next to the icon.

Icon Default: dashicons-wordpress-alt; Supports: Field Connections

Selects the icon shown by the module. Opens the icon picker, which includes the bundled icon sets such as Dashicons and Font Awesome. Supports adding extra CSS classes to the icon element.

Link Supports: Field Connections

Wraps the icon and title text in a link when a destination is provided.

Link settings

Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.

Screen Reader Text

Text read by assistive technologies when the icon is decorative or when the link needs additional context. Leave blank when the icon is purely decorative and already has surrounding text.

Text Supports: Field Connections

The title or supporting content rendered next to the icon. Uses the WordPress Classic Editor WYSIWYG, which lets you format text, add links, and include basic HTML.

Style Tab

The Style tab controls icon size and alignment, icon colors, gradient background, and the spacing, color, and typography of the text rendered next to the icon.

Icon

The Icon section controls the size and alignment of the icon itself.

Icon Settings

Size Default: 30; Supports: Responsive

Sets the rendered size of the icon. Accepts values in px, em, or rem.

Alignment Default: Left; Supports: Responsive

Sets the horizontal alignment of the icon within its wrapper.

Icon Colors

The Icon Colors section controls the icon foreground, hover, background, and DuoTone colors, plus the optional gradient background style.

Icon Color Settings

Color Supports: Responsive, Field Connections

The base color applied to the icon glyph.

Hover Color Supports: Responsive, Field Connections

The color applied to the icon glyph on hover and focus.

DuoTone Icon Primary Color (DuoTone Icons Only) Supports: Field Connections

The primary color applied to Font Awesome DuoTone icons. This field applies only when the selected icon is a Font Awesome DuoTone icon.

DuoTone Icon Secondary Color (DuoTone Icons Only) Supports: Field Connections

The secondary color applied to Font Awesome DuoTone icons. This field applies only when the selected icon is a Font Awesome DuoTone icon.

Background Color Supports: Responsive, Field Connections

The background color rendered behind the icon.

Background Hover Color Supports: Responsive, Field Connections

The background color rendered behind the icon on hover and focus.

Gradient Default: No

Applies a gradient background style to the icon background.

• No: Renders a flat background using the configured background color.
• Yes: Renders a gradient background derived from the configured background color.

Text

The Text section controls the spacing, color, and typography of the title text rendered next to the icon.

Text Settings

Text Spacing Supports: Responsive

The horizontal space between the icon and the text. Accepts values in px.

Text Color Supports: Responsive, Field Connections

The color applied to the title text rendered next to the icon.

Text Typography Supports: Responsive

The font settings for the title text rendered next to the icon.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.