Add icons to your custom modules

If you've developed a custom module, there are several ways to add an icon to its display in the Add Content panel.

  • You can re-use any icon used by a Page Builder module.
  • You can add a custom icon by copying it into the module's root directory.
  • You can add an icon programmatically.

Re-use an existing icon

Icons used for Page Builder modules are stored in /img/svg, and you are welcome to use any of those icons for your own module.

To use an existing icon, modify the construct method shown in the section on adding a module in the custom module developer guilde. Add an icon key and reference any icon file in that directory. (You don't need a path.) For example:

'icon' => 'button.svg'

Add your own icon

You can easily use your own SVG icon. Name it icon.svg and place it in the module’s root directory. The icon will be used automatically. No coding required.

Custom icons should be prepared and tested for 20px x 20px, which is the size the content panel displays them. Avoid any fills or strokes applied to the icon markup because the system will style them differently according to UI circumstances such as dark vs. light mode.

All of the current icons come from the Dashicons set (the WordPress admin icon font), though they may come from other sources in future. Dashicons are a good reference for anyone not familiar with SVG. See the  svg-min directory at https://github.com/WordPress/dashicons.

Add an icon programmatically

If you need more programmatic control over which icon displays or want to use a custom icon with a different file name, you can override your module’s get_icon() method and return an svg string.