How to Add Custom Icon Sets in Beaver Builder

If you’re building a page with Beaver Builder and the icon you want isn’t available in Beaver Builder’s existing options, here’s what you can do.

When I wanted to use the X (formerly Twitter) icon, the option was available in Beaver Builder's icon list, so I created a custom icon set and added it to Beaver Builder using the steps below.

Using this method, you can make your site design even more original and unique!

How to create a custom icon set

Let's start by creating a custom icon set.IcoMoonApps andFontelloTools like , can help, allowing you to choose from provided icon sets or upload your own icons to create your own set.

When using the IcoMoon app

1. Open the IcoMoon app and choose the icon you need. You can use the icon library button to choose from free or paid libraries.
2. If you want to use your own icons, upload them using the “Import icons” button on the top toolbar.
3. Once you have selected an icon, click "Generate font" to see the font set.
4. Open "Preferences" and change the font name to something that's easy to distinguish in Beaver Builder.
5. Don't forget to change the class prefix from "icon-" as well, as this will help your icons display more smoothly within Beaver Builder.
6. Open the "CSS Selector" section and choose either "Use attribute selectors" or "Use a class".
7. Finally, click "Download" to download the zip file.

Using Fontello

1. Go to the Fontello site and choose the icon you want or drag and drop an SVG icon to upload it.
2. Once you've decided on your icon set, enter your custom font name in the field in the upper right corner.
3. Click “Download webfont” to download the zip file.

How to import into Beaver Builder

Add your custom icon set to Beaver Builder.

1. From your WordPress admin panel, go to Settings > Beaver Builder > Icons.
2. Click "Upload icon set" and select the zip file you downloaded.
3. Once your icon set has been uploaded, click "Choose File."
4. Your custom icon set will appear in the Icon Sets list with the following name:

That's it!

Now, as usual, when you display the icon list using the icon module, the icon should be displayed with the name you chose.