External Link Icon for Gutenberg

By Owadud

Description

External Link Icon for Gutenberg adds a new Gutenberg block called Link with Icon.

Each block contains its own link URL, link text, icon choice, and display options — all configured in one place. There are no global settings that affect your whole site.

How to use:

In the block editor, click the + button to add a block
Search for “Link with Icon”
Insert the block
Enter your URL in the on-canvas URL field and click Add Link
Open the block sidebar (right panel) to:
- Set link text
- Toggle new tab / nofollow
- Pick an icon from the Dashicons or SVG Icons tab
- Set icon position (before or after text)
The live preview updates as you make changes

Icon sets:

Dashicons — WordPress built-in icon font (32 icons, no extra network request)
SVG Icons — 32 bundled stroke-based SVG icons, rendered inline (no CDN, no webfont)

Principles:

No global icon settings — each block is fully independent
Image links are not affected (this is a dedicated block, not a link filter)
Server-side PHP rendering — compatible with all caching plugins
No jQuery required

Screenshots

Blocks

This plugin provides 1 block.

Link with Icon

Installation

Upload the plugin folder to /wp-content/plugins/
Activate from the Plugins menu
In the block editor, search for “Link with Icon” in the block inserter

FAQ

Where do I find this block?

Click the + (block inserter) in the editor and search for “Link with Icon”. It’s in the Text category.

Can I put multiple Link with Icon blocks on the same page?

Yes — each block is fully independent.

Does it work with page caching?

Yes. The block is rendered server-side via a PHP callback, so cached pages always include the correct icon.

How do I remove the icon?

Open the sidebar, scroll to the icon picker, and click ✕ Remove icon at the bottom of the picker.

Can I style the link with theme styles?

Yes. The block supports WordPress block color, typography, and spacing controls. Your theme’s link styles also apply normally.

1.0.0

Initial release
Dedicated Gutenberg block with on-canvas URL entry
Sidebar icon picker with Dashicons and SVG icon tabs (32 icons each)
Icon position control (before / after)
New tab and nofollow toggles
Live preview in the editor canvas
Server-side PHP render (cache-safe)

1.0.1

Rename Plugin name
Solved contributor name

1.0.2

Name Update

Reviews

Mohammad Tuhin March 30, 2026

I was looking for a lightweight way to add icons to my links without bloat, and this plugin delivers perfectly. It integrates seamlessly with the Gutenberg editor.

Shahriar March 29, 2026

I was looking for a simple way to add links with icons in Gutenberg, and this plugin does it perfectly. Setup is quick, and the live preview makes it easy to adjust things. Clean UI and no bloat at all.

Read all 1 review