Beaver Builder – Add Your Own Icon to Beaver Builder Icon Font Library

Sometimes it is necessary to add a custom icon to Beaver Builder’s library of icons.

The other day, I needed to design a website for a dentist. They specifically told me that for some of the buttons on the site, they wanted a tooth to be the icon. Beaver Builder doesn’t have a tooth as an icon. So, the following is how to get your own icons into an icon font library that you can use on Beaver Builder.

Create Vector Icon in Adobe Illustrator

Either create your own vector icon in Adobe Illustrator, or grab one from a stock photo place like Deposit Photos. I found the following vector image on Deposit Photos. I loved the general look of the tooth, and the background doesn’t matter.

I isolated just the tooth and created two new Illustrator files that are sized at 512px X 512px.

I wasn’t sure exactly how I was going to use the icon, so I made both versions.

    

When you create the icons, you can only use one color – black. So, the black tooth has a transparent background, and the white tooth is actually just a black background with the tooth shape punched out and the tooth is actually transparent. By doing this, then the part of the icon that is black can be any color that the designer would like it to be just like any other font.

Once your designs are perfect, then you need to save each icon as an .SVG file, which you can do in Adobe Illustrator.

Create Your Icon Font with IcoMoon

Go to https://icomoon.io/

This is a website that offers a free app to create your own icon font. Click the red IcoMoon App button on the far right side.

IcoMoon offers many icon fonts for free.  When you first go to the app screen, you will see the IcoMoon font library. You can pick and choose which icons you like in their library that you would like to add to your own custom library.

When you scroll to the bottom of the page, you can click on the “Add Icons From Library…” link, to open other people’s free icon libraries. You would pick and choose the icons just like you did with the IcoMoon Library.

To upload your own icons,  click the Import Icons purple button at the top left.

Upload your .SVG files you just created above. You will now see your icons in a new set. You can title your set if you would like. Be sure to select your icons you just uploaded!

Once you selected all of the icons that you want, click on the lower right Generate Font button.

You will see the following screen. Click on the Preferences button.

Change the font name to whatever you would like, and then change the Class Prefix  — this is a must! You can leave everything else as is.

Go back and click the Font Download button.

You now will have a zipped file.

Add Your New Icon Font To Beaver Builder

In the backend of your website, go to Settings -> Page Builder -> Icons tab.

Upload your icon set that you just created on IcoMoon.

Now when you need an icon, your new icon font library will be available with the other default icon libraries.

Cheers!