Icon library

Keep your own SVG icons in WordPress: add them by upload, from the media library or as pasted code, rename them, delete them and copy their code.

The icon library is a home for your own icons inside WordPress. You add an icon once, and it is then available on the whole site: in the Icon block, with a shortcode and in theme templates. This guide shows how to fill and look after the library.

Before you start

You are an administrator. The library belongs to the whole site, so only administrators can change it.
Enable the icon library is on under Icons → Settings.
You have a few SVG icons ready, as files or as code. Simple icons with one color work best.

Open the library

Go to Icons → Icon library. At the top you see a dashed drop area. Below it is the grid with your icons, a search field and the button Select several.

If you see the message "The icon library is off", switch it on first under Icons → Settings.

Add icons

There are four ways to add an icon. All of them clean the SVG with the same sanitizer as a media upload.

Drag your files

Drag one or more .svg files from your computer onto the dashed area that says Drop SVG files here.

Check the grid

Each file becomes one icon, named after the file. A message tells you how many files were stored.

There is no limit on how many icons you keep.

Names and addresses

Every icon has two names:

	Example	Where it is used
Name	Arrow right	What people see, for example in the Icon block. You can change it any time.
Address (also called slug)	`easy-svg/arrow-right`	What blocks, shortcodes and templates use to find the icon. It is made from the name and never changes afterwards.

The first part of the address, easy-svg/, is the collection. The free plugin keeps all icons in one collection called Easy SVG.

If you add a second icon called "Arrow right", the address arrow-right is already taken, so the new icon is stored as arrow-right-2. A message says so and offers Replace "arrow-right" instead, in case you meant to give the existing icon a new drawing.

Find, rename and delete icons

Each tile in the grid shows the icon, its name and small buttons underneath.

Search. Type in Search icons… to filter by name or address.
Rename. Click the pencil button, type a new name and click Save. The address stays the same, so nothing that already uses the icon breaks.
Copy the code. Click the copy button and choose PHP, Shortcode or Block. The code is placed on your clipboard. See Use your icons.
Delete. Click the bin button and confirm with Delete.

Deleting an icon cannot be undone. Every page, block or template that shows it will show nothing in its place. Check where an icon is used before you delete it.

Work on many icons at once

Click Select several. Checkboxes appear on the tiles. Tick the icons you want, or click Select all to take every icon the grid shows (with a search, only the matches). A dark bar appears with Remove and, with Easy SVG Pro, more actions. Click Done selecting when you are finished.

Good to know

Why the Block option is sometimes greyed out. The WordPress Icon block can only draw paths and polygons. An icon drawn with other shapes, for example a circle or rectangle, gets the note "Not for this icon" and cannot go into the Icon block. PHP and the shortcode still work.
Single-color icons follow your text color best. If an icon uses currentColor as its color, it takes the color of the text around it.
More than one collection. Agencies with several clients or brands usually want one set of icons each. That is what Easy SVG Pro adds.

Common questions

Use your icons

Icon block, shortcode and PHP.

Collections and sets (Pro)

One icon set per client or brand.

Developers can add and change icons in code. See the developer reference.

Was this page helpful?