Quick StartShip icon sets in your theme and load them centrally

Ship icon sets in your theme and load them centrally

Put icons in a theme's assets/icons with a manifest, let child themes replace single icons, or load one central icon folder on every site from a mu-plugin.

Icons that live in files are versioned in Git and deployed with the code. Pick the place: the theme, or one central folder for every site.

Switches

Under Icons → Features:

  • Theme & folder sources: required for everything on this page.
  • Multiple collections: needed to see these icons in the WordPress Icon block (WordPress 7.1 or newer).

easy_svg_icon() in PHP works with Theme & folder sources alone.

Option A: in the theme

wp-content/themes/acme/
└── assets/icons/
    ├── manifest.json
    ├── phone.svg
    └── mail.svg
{
  "version": 1,
  "slug": "acme",
  "label": "ACME icons",
  "icons": {
    "phone": { "label": "Phone", "keywords": ["call", "contact"] },
    "mail": { "label": "Email", "keywords": ["contact"] }
  }
}
<?php echo easy_svg_icon( 'acme/phone', array( 'label' => __( 'Call us', 'acme' ) ) ); ?>

Without a manifest the collection is called theme ("Theme icons"), so the call is easy_svg_icon( 'theme/phone' ).

Child theme overrides

wp-content/themes/acme-child/
└── assets/icons/
    └── phone.svg

A file with the same name in the child theme replaces the parent's icon. Everything else still comes from the parent. Parent and child stay one collection; a label or slug in the child's manifest.json wins.

Option B: one central folder for every site

Ship the icons in a must-use plugin (or in your own plugin, installed with Composer). Two ways to hand the folder to Pro:

<?php
/**
 * Plugin Name: Agency icons
 */

defined( 'ABSPATH' ) || exit;

add_filter(
	'easy_svg_pro_source_dirs',
	static function ( $dirs ): array {
		$dirs   = is_array( $dirs ) ? $dirs : array();
		$dirs[] = __DIR__ . '/agency-icons/brand';
		return $dirs;
	}
);

The collection takes its name from slug in agency-icons/brand/manifest.json, else from the folder name (brand).

wp-content/mu-plugins/
├── agency-icons.php
└── agency-icons/brand/
    ├── manifest.json
    └── *.svg

Want it as a normal plugin with its own version? Start from the Icon Pack Starter.

When it worked

  • Icons → Packs, list Export a collection: your collection is there, with its origin, for example "Theme ACME" (your theme's name) or "Must-use plugin agency-icons".
  • wp easy-svg icons list shows it with an icon count (needs WP-CLI under Icons → Features).
  • The Icon block's icon picker shows the collection.

Pitfalls

  • Files must really be in the folder. An SVG that is a symlink pointing outside the folder is skipped without a message. Copy the files in instead of linking them one by one.
  • Limits per folder: 1000 icons and 2 MB per file. Raise the first with the easy_svg_pro_source_max_icons filter. Files Pro could not use are listed by wp easy-svg icons problems and under the collection in Icons → Packs.
  • Renaming breaks content. Posts and templates store collection/icon. Changing the manifest slug or the name in code later leaves those references empty.