Use your icons

Show an icon from your library with the WordPress Icon block, the easy_svg_icon shortcode or the easy_svg_icon() PHP function, accessibly.

Once an icon is in your library, you can show it anywhere on your site. This guide explains the three ways, when to use which one, and how to keep icons accessible for screen reader users.

Before you start

Enable the icon library is on under Icons → Settings.
At least one icon is in Icons → Icon library. See Icon library.
You know the icon's address, for example easy-svg/heart. The copy button on each tile gives you the exact code.

Which way should I use?

Way	Best for	Needs
Icon block	Pages and posts in the block editor, block themes	WordPress 7.1 or newer
Shortcode	Classic editor, widgets, page builders with a text field	Any WordPress version the plugin supports
PHP function	Theme and plugin templates	Access to the theme's files

All three show the same cleaned icon. Pick the one that fits where you are working.

In the Icon block

Add the block

In the block editor, click the + inserter and search for Icon. Insert the Icon block.

Choose your icon

In the icon chooser, open the collection Easy SVG. Your icons are listed there by name. Click one.

Style it

Use the block settings on the right for size and color, like any other block.

The Icon block can only draw paths and polygons. An icon drawn with circles, rectangles or lines does not appear in the block chooser correctly. Use the shortcode or PHP for those icons, or redraw them as paths in your design tool.

With a shortcode

A shortcode is a short text in square brackets that WordPress replaces with content. Use it wherever you can type text but not write code: a classic post, a text widget or a page builder's text element.

[easy_svg_icon name="easy-svg/heart"]

Two optional settings:

Setting	What it does	Example
`class`	Adds a CSS class, so your theme can style the icon	`class="icon-red"`
`label`	Gives the icon a name that screen readers announce	`label="Favorite"`

[easy_svg_icon name="easy-svg/heart" class="icon-red" label="Favorite"]

In PHP

In a theme or plugin template, call the function and print its result:

<?php echo easy_svg_icon( 'easy-svg/heart' ); ?>

With settings:

<?php echo easy_svg_icon( 'easy-svg/heart', array( 'class' => 'icon-red', 'label' => 'Favorite' ) ); ?>

Setting	What it does
`class`	Adds a CSS class to the icon
`label`	Gives the icon an accessible name
`decorative`	`true` always hides the icon from screen readers, `false` always announces it

You can also pass only the short name ('heart'). Without a collection, the free library is meant.

Accessibility in one minute

Screen readers read a page aloud for blind and low-vision visitors. An icon can be one of two things for them:

Decoration, next to text that already says everything ("♥ Add to favorites"). It should be hidden. This is what happens when you give no label.
Meaning, standing on its own (a heart button with no text). It needs a name. Give it a label, for example label="Add to favorites".

Good to know

A missing icon never breaks the page. If an icon was deleted or the address is wrong, the shortcode and the PHP function print nothing at all. In the editor, the Icon block shows a note naming the icon that is missing.
Icons follow your text color when they use currentColor. Change the text color, and the icon follows.
Older WordPress. Without the Icon block (before WordPress 7.1), the shortcode and PHP still work.

Common questions

Icon library

Add and manage your icons.

Page builders and fields (Pro)

Pick icons inside Elementor, ACF and more.

Developers: easy_svg_icon(), the shortcode and every other function are in the developer reference.

Was this page helpful?