Styles and theme colors
Save a size, color and spacing as a named style template and give it to many icons at once, and point multicolor icons at your theme's colors.
Changing the color of forty icons one by one takes an afternoon. With style templates it takes one click: you save a size, a color and a spacing under a name and give it to as many icons as you like. With theme colors, a multicolor icon follows your theme, including style variations and dark mode.
Before you start
- Your Pro license is active.
- Styles & theme colors is on under Icons → Features, group In the editor.
- Your theme has a color palette (block themes define one in Global Styles).
Go to Icons → Styles. The screen has two parts: Style templates and Icons.
Create a style template
Add a template
Under Style templates, click Add a template.
Fill it in
- Name: for example "Header icons".
- Size in pixels: for example 24. 0 keeps the icon at the size it was drawn.
- Color: one of your theme's colors, so the icon follows a style variation and dark mode.
- Spacing in pixels: room around the icon, for example 4.
Saved automatically
The template is saved as you type. You see Saved.
Remove deletes a template. Undo in the message brings it back.
Give a template to icons
Find the icons
Under Icons, use Search icons to find the icons.
One icon
Pick a template in the icon's Template column. No template removes it.
Many icons
Tick several icons, choose a template under Template for the selected icons and click Give it to ... selected.
The change reaches every place the icon is shown: the Icon block, easy_svg_icon(), the shortcode and the page builder integrations.
Map the colors of a multicolor icon
A logo-like icon may use three colors. You can point each of them at a color of your theme.
Open the colors
Click Map colors in the icon's Colors column.
Choose a theme color for each
For each color of the icon, pick a Theme color or Leave as it is.
Save
Click Save colors.
Now when you switch to a different style variation or to dark mode, the icon changes with the theme, without being saved again.
An icon that draws in one inherited color shows "there is nothing to map". A template can still color it.
Good to know
- The drawing itself is not changed. Styles are applied when the icon is shown, so you can remove a template at any time and get the original look back.
- Icon block support. For styles to reach the WordPress Icon block, Easy SVG Support must be current. If it is too old, the screen says so; everything else still works.
- Example. An agency gives all icons in the footer the template "Footer, 20 px, muted gray". When the client wants them bigger, one change to the template updates every footer icon.
Common questions
Related guides
Developers: the style hooks are in the developer reference.