Add icons to your custom modules
If you're a developer and have created a custom module, there are several ways to add an icon to its display in the Content panel.
- You can reuse any icon used by a Beaver Builder module.
- You can add a custom icon by copying it into the module's root directory.
- You can add an icon programmatically.
Reuse an Existing Iconβ
Icons used for Beaver Builder modules are stored in wpcontent/bb-plugin/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 chapter 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 Custom 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.
/my-custom-module
βββ /css
βββ /includes
βββ /js
βββ my-custom-module.php
βββ icon.svg
Custom icons should be prepared and tested for 20x20 pixels, 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, though they may come from other sources in future. Dashicons are a good reference for anyone not familiar with SVG.
See the Dashicons GitHub repository's /svg-min
directory for a comprehensive list of all available SVG names.
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.
public function get_icon( $icon = '' ) {
return file_get_contents( 'path/to/icon.svg' );
}