Adding Custom Icons with Elementor Pro
Icons have become a vital part of design and can add a lot to your site. Icons can not only condense information, it can also make your information more understandable and visually appealing. Let’s say you want to add in a button that allows your customer to view their cart. Rather than having a button titled “View Cart” you can add in a simple shopping cart icon. This simultaneously gets the point across of what that button does and frees up space to keep your website uncluttered and minimalistic.
When creating a web page with Elementor there will be preset icons in the icon library available for you to use. In many cases these icon presets may be perfect for your website needs. However, there are some situations in which you will want to upload your own icons for use on your site. Elementor Pro gives you the ability to do this without the use of external plugins or the need for additional code. If you don’t have Elementor Pro it is still entirely possible to add custom icons via custom code or external plugins. However, using Elementor Pro is by far the easiest way to add custom icons and it is the method we will be focusing on in this article. The custom icon feature within Elementor Pro allows you to easily add new
Getting an Icon
Before adding new icons to the Elementor library you will need to download the zip file for the desired icon. This can be something you’ve designed yourself, or something you’ve found on a separate platform. There are a number of websites out there that offer custom icons as a resource from which you can also obtain a zip file. Regardless of where you’re getting your icon, download it to your computer as a zip file.
Installing Icons in Elementor
Once you have your zip files ready to go you can upload them to the Elementor Custom Icons library.
- Within the WordPress dashboard go to Elementor > Custom Icons
- Enter a name for the Icon Set and browse for the icon file that you just downloaded
- Once you’ve uploaded all of the desired files, click Publish
- Your custom icon is now all set, just go into the web page and insert your icon using the Icon Widget
- Using the Icon Library, select the desired icon library to find your custom icons