Block editor and block themes
Insert icons with Shift+Alt+I, keep favorites, turn a pasted SVG into an icon, and show a per-post icon in block theme templates with Easy SVG Pro.
Two Pro features make icons faster to use in the WordPress block editor: Quick insert, a keyboard chooser for every icon on your site, and Block theme support, which lets templates show a different icon on every post. This guide explains both.
Before you start
- Your Pro license is active.
- WordPress 7.1 or newer, because both features insert the WordPress Icon block.
- Under Icons → Features, group In the editor: Quick insert and/or Block theme support are on.
- To see your sets in the chooser, Multiple collections is on too.
Quick insert
Insert an icon
Open the chooser
In a post or page, place the cursor where the icon should go. Press Shift+Alt+I (on a Mac: Ctrl+Option+I). You can also open the command palette (Ctrl+K or Cmd+K) and run Insert an icon.
Search
Type part of the name, for example "door". The list filters as you type, across every collection on the site.
Insert
Move with the arrow keys and press Enter, or click the icon. It is added as an Icon block. If an Icon block is selected, its icon is swapped instead.
Favorites and recent icons
The chooser shows Favorites and Recently used at the top. Click the star on an icon to Add to favorites, click it again to remove it. Favorites are saved per user, so every team member keeps their own.
Turn a pasted SVG into an icon
Paste SVG code into the chooser, or drop an .svg file anywhere on it. The section New icon from SVG appears. Give it an Icon name and click Add and insert. The SVG is cleaned like an upload, stored as an icon and inserted.
Only administrators can add icons this way. Other users can insert existing icons, but see "Only somebody who may manage the icon library can add an icon. Ask an administrator."
Works in the Site Editor too
Quick insert works in the post editor and in the Site Editor, where you edit templates and template parts of a block theme.
Block theme support
Show a different icon on every post
Imagine a "Services" page per service, each with its own icon in the page header. With block theme support, you build the header once in the template and each page brings its own icon.
Switch it on
Turn on Block theme support under Icons → Features.
Edit the template
Go to Appearance → Editor and open the template, for example Single Pages. Add an Icon block where the icon should appear.
Connect it
In the block's settings, connect its icon to the source Easy SVG icon in a custom field (WordPress lists connection sources under Attributes). The block now reads the icon from the page being shown. If your WordPress version offers no such option for the Icon block, your developer can add the connection in the template's code in a minute.
Set the icon per page
Each page stores its icon's address, for example acme/oven, in the custom field easy_svg_icon. Set it with your field plugin, the Custom Fields panel, or ask your developer to fill it.
The field easy_svg_icon is registered and cleaned by Pro, so it works without any field plugin.
Ready-made patterns
When your site has at least three icons, the block inserter gets a pattern category Easy SVG icons with two patterns: A row of icons and A heading with icons. They are built from your own icons and are a quick starting point for a features section.
Good to know
- Works in a Query Loop. In a list of posts, each post shows its own icon.
- Same icons everywhere. The chooser lists the same icons as the Icon block, the page builders and
easy_svg_icon(). - Pasted SVGs are never inserted raw. They always become a cleaned icon first.
- The shortcut does not clash with the editor's own shortcuts. If a browser extension uses it, use the command palette instead.
Common questions
Related guides
Use your icons
The Icon block, shortcode and PHP.
Styles and theme colors
Make icons follow your theme.
Developers: the custom field and the patterns are documented in the developer reference.