Icon Pack StarterBuild your pack

Build your pack

Rename the Icon Pack Starter, add your SVG files, describe them in manifest.json and install the finished plugin on any site with Easy SVG Pro.

This guide takes you from the starter files to a finished icon pack plugin installed on a site. Plan about 20 minutes for your first pack.

Before you start

  • You have the Icon Pack Starter files (a folder called easy-svg-icon-pack-starter).
  • Your icons are ready as SVG files, one file per icon. Simple, single-color icons work best.
  • A text editor, for example VS Code or Notepad++.
  • A test site with Easy SVG Pro, an active license and Theme & folder sources switched on.

What is in the starter?

easy-svg-icon-pack-starter/
├── easy-svg-icon-pack-starter.php   the plugin file
├── icons/
│   ├── manifest.json                the list of icons
│   ├── circle.svg                   example icon
│   ├── square.svg                   example icon
│   └── triangle-up.svg              example icon
└── readme.txt

Build it

Rename the plugin

Give the pack its own name, so it does not clash with other packs. Rename three things, all the same way, for example to acme-icons:

  • the folder: acme-icons/
  • the main file: acme-icons.php
  • the line Plugin Name: at the top of that file, for example Plugin Name: Acme Icons

Add your icons

Delete the three example SVGs in icons/ and put your own files there. Use lowercase file names with hyphens, for example front-door.svg. The file name becomes the icon's name.

Describe them in manifest.json

Open icons/manifest.json and change it to describe your pack (see below). At least set your own slug and label.

Remove the big-pack block if not needed

The main file contains a block with easy_svg_pro_source_max_icons. If your pack has fewer than 1000 icons, delete that block.

Zip and install

Zip the folder (the ZIP must contain the acme-icons folder). On the site, go to Plugins → Add Plugin → Upload Plugin, install and activate it.

Check the result

Go to Icons → Packs. Your collection is listed with its source, for example "Plugin Acme Icons". If some files could not be used, they are listed below it with the reason.

Your icons now appear in Icons → Icon library under their collection, and everywhere else Easy SVG Pro shows icons.

The manifest

manifest.json tells Easy SVG Pro the collection's name and gives each icon a readable label. It is a small text file in JSON format: curly brackets, names in double quotes, commas between entries.

{
  "version": 1,
  "slug": "acme-icons",
  "label": "Acme Icons",
  "license": "GPL-3.0-or-later",
  "author": "Acme Agency",
  "source": "https://example.com/acme-icons",
  "icons": [
    { "file": "front-door.svg", "name": "front-door", "label": "Front door", "keywords": ["entrance", "door"] },
    { "file": "window.svg", "name": "window", "label": "Window" }
  ]
}
FieldWhat to put
versionAlways 1. It is the manifest format, not your pack's version.
slugThe collection's address, lowercase with hyphens. Icons are then called acme-icons/front-door.
labelThe collection's name people see.
nameThe icon's address part. Lowercase letters, numbers, hyphens and underscores, starting and ending with a letter or number. An invalid name is skipped and reported.
label (per icon)The icon's name people see.
keywordsWords that help search, optional.
license, author, sourceWho made the icons and under which license. Shown on the Packs screen.

A manifest describes the folder, it does not limit it. An SVG without an entry still appears, named after its file.

Choose names carefully. Templates point at an icon as acme-icons/front-door. If you change a name later, every page using the old name shows nothing.

How Easy SVG Pro finds the folder

You do not need to change this, but it helps to know. The main file hands the folder to Easy SVG Pro with one filter:

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

Packs with more than 1000 icons

Easy SVG Pro reads at most 1000 icons from one folder, to keep sites fast. A bigger pack is cut short, and the Packs screen names what was left out. Keep the block in the main file and set the number to what your pack really holds:

add_filter( 'easy_svg_pro_source_max_icons', static fn( $max ): int => max( (int) $max, 1400 ) );

For scale: Font Awesome Free's solid style alone has about 1390 icons.

Good to know

  • Outline icons keep their strokes, also in the WordPress Icon block with a current Easy SVG Support.
  • Use currentColor as the color in your SVGs, so icons follow the surrounding text color.
  • No symbolic links. Put the real files into the folder. Links pointing outside it are refused.
  • Two packs with the same slug do not overwrite each other. Easy SVG Pro gives the second one a different name, and the Packs screen shows it.
  • Updating the pack. Change the files, raise the Version: line in the main file and install the new ZIP. Names you keep stay valid.

Common questions

Shipping third-party icons

Licenses and credits.

Icon packs

Packs as ZIPs, without a plugin.

Developers: The manifest, easy_svg_pro_source_dirs and easy_svg_pro_source_max_icons.

Was this page helpful?