anastasiia
Anastasiia Mykytiuk
Enlightner
Updated on
Tutorials

How to Add Custom Icons to Elementor and Jet Plugins

Icons have become an irreplaceable part of delivering information. There are so many of them for literally any occasion, from displaying social links and cart buttons to marking the most important parts of content, creating lists with checks, and many other purposes.

While using Elementor and Jet plugins represented at Crocoblock, you’ll be astonished at how many icons there are for one’s choosing. When one needs to add an icon most of the widgets already provide Icon Picker option, and all one needs to do to set an icon is type in the icon title or select the needed one from the list.

icons library elementor

In most cases, the icons can be styled according to one’s needs in widget’s Style settings block. In no more than several minutes, you’ll have an icon added to your content and beautifully styled according to your needs.

elementor icons style tab

Yet, sometimes you can’t find the proper icon to suit your purposes. That’s when you might need to add your custom icons to the library. Let’s explain in more details how this can be done.

Adding Custom Icons

Please, follow the tutorial below to add custom icons to the list and display them in your content.

To apply the icons library, different from the standard FontAwesome 4 used in Elementor and Jet plugins, you’ll need to make changes in functions.php file. It is located in the folder where your currently active theme is installed. Please, note, that it is recommended to make changes in the Child theme in order to keep them in place in the case the theme gets updates in the future. Open functions.php file and add the following code in the very bottom:

Please, note, that the code “$new_icons = array(‘account’,” stands for the name of the icon, that can be found here

icon mane material design

In order to add more icons, you have to create new lines with their names.

HTML custom icon title

The “’My Custom Icons‘” part stands for the title of the tab that will be displayed in the Icon Library in Elementor.

custom icons tab

After that, you’ll be able to see the icon displayed in the icons library in Elementor editor for all the widgets, including the ones provided by Jet plugins.

As you can see, adding custom icons from icons library doesn’t really need any kind of coding skills. This can be done by anyone without ever breaking a sweat.

Hoping you’ll enjoy using custom icons!