Join the waitlist

Add icons to WordPress

Pick one icon from a built-in set of 1,512, in six weights. Use it on its own, inside a colored chip, or as a link.

Get Grinner free
See it live

Type

A Grinner block

Find it

Press + and search “Icon”

Phones

Same on every screen and on touch

Speed

A block with no script behind it

Live demo

A set of 1,512.

This is the real Icon block, running on this page.

Settings    Size (px) 32     chip Shape Circle, Rounded and Square     Duotone

What you can change

The settings worth knowing.

Pick the icon, its weight, its size and its chip.

Duotone

Six weights

Thin, Light, Regular, Bold, Fill or Duotone, where a second layer shows at 20%.

Shape

A colored chip

A background color and padding, in a square, rounded or circle shape.

Size (px)

Any size

From 12 to 200px.

Screen readers hear “Read the Grinner blog”

Label (accessible name)

Icons as links

Link to a web address, or to This post or page so each card in a Query Loop links to its own post. Add a label so screen readers know where it goes.

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

Add an Icon

Press + and search for Icon, then search the set for the one you want.

3

Style it

Choose a weight, a size and a chip, add a link and its label if needed, then publish.

Good to know

Fair questions.

The Icon block is a Grinner block for a single icon from a built-in set of 1,512, in six weights. It can stand on its own, sit inside a colored chip or act as a link. Use it to add clear, matching icons without uploading image files.

Not yet. For your own drawing, use an Image block.

A link needs a label too, or it prints without the link.

Not on its own. Put it in a card with a hover effect if you want movement.

Use this block for an icon standing alone. For an icon beside text, use Heading and paragraph icons.

Yes. Set Link to This post or page, and in a Query Loop every card’s icon links to its own post with no address to type. It still needs a label.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All blocks features

Card Mode

Turn a section, or each block in it, into a card with one switch.

Heading and paragraph icons

An icon beside or above any heading or paragraph, in a colored chip if you like.

Button icons

An icon before or after the label, with its own hover color.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version