Add icons to WordPress headings

Put an icon before, after or above a heading or paragraph. It takes the text color, scales with the font size and can sit on a small filled chip.

Get Grinner free

See it live

Type

An upgrade to Heading and Paragraph

Find it

Heading or Paragraph settings, Icon

Phones

Identical on every screen

Speed

A still icon with nothing to animate

Live demo

Headings with a badge of their own.

This is the real Heading and paragraph icons setting, running on this page.

Same-day fixes

Collection and drop-off

Fair prices

Settings Before and Above Background chip Circle and Rounded

What you can change

The settings worth knowing.

Choose the icon, where it sits and whether it gets a chip.

Thin

Light

Regular

Bold

Fill

Duotone

Icon

Six weights to pick from

Every icon comes in Thin, Light, Regular, Bold, Fill and Duotone, and the list is searchable.

Free fitting

Above

Above, before or after

Before lines wrapped text up beside the icon, and Above follows the text alignment.

Circle

Rounded

Square

Background chip

A chip behind it

A circle, rounded or square chip with its own padding and color.

Open daily

As placed

Open daily

Nudged 2px

Nudge X (px)

Line it up by eye

Shift the icon a pixel or two so it sits right beside round letters.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select the heading

Click any Heading or Paragraph already on your page.

3

Pick an icon

Search the icons, choose where it sits and add a chip if you like, then publish.

Good to know

Fair questions.

They are a Grinner upgrade to the Heading and Paragraph blocks. An icon sits before, after or above the text, takes the text color and scales with the font size, on its own or on a small chip. Use them to make lists of services or benefits quicker to scan.

No. It shows in the theme’s contrast color or in its own color instead.

Up to three times the size of the text.

Not here. Choose from the built-in set, or use an Image block for your own drawing.

Decrypt and Typewriter don’t run on a block with an icon, so the words simply appear.