V4 Extentions Custom Icon (V4) Estimated reading: 5 minutes 17 views Bring your own icons to Elementor. Upload an icon pack, and your icons show up in the Elementor icon picker, in their own tab, right next to Font Awesome. No code needed. EXTENSION Custom Icon FILE TYPE IcoMoon ZIP PLAN Free A QUICK LOOK What You Will Build A row of six icons that are not part of any default library: a star, a home, an arrow, a check, a bolt and a diamond. They come from one uploaded icon pack, and each one has its own color. Six icons from a custom icon pack BEFORE YOU START Requirement ELEMENTOR Icon Library picker ANIMATION ADDONS Free Tip: You need an icon pack made with IcoMoon (icomoon.io). Pick your icons there, generate the font, and download the ZIP file. Note: The ZIP must have the file selection.json inside, at the top. IcoMoon adds it for you. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Add a New Icon Set In your WordPress Dashboard, go to Animation Addon > Custom Icons. Then click Add New Icon. Type a name for your icon set, for example My Icons. This name is the tab you will see in Elementor. Click the upload box, or drag your IcoMoon ZIP file into it. Wait for the message File has been Created Successfully. Click Publish. The name (1), the upload box (2) and Publish (3) (click to zoom) The success message (1). On a set that is already published, the button says Update (2) (click to zoom) Note: Click Publish, not only Save Draft. A set that is still a draft does not show up in Elementor. Tip: Only ZIP files under 10 MB work, and only IcoMoon packs. If you pick another file type, you see the message Only ZIP files are allowed. STEP 2 Choose When the Icons Load Open Animation Addon > Custom Icons to see all your sets. Each set has a Type and an Active switch. Switch Active on to load the icons on every page of your site. Switch it off to load the icons only on pages that use them in Elementor. Tip: Leave it off unless you use the icons outside of Elementor, for example in a theme template. Off keeps your pages light. STEP 3 Use Your Icons in Elementor Open a page in the Elementor Editor. Add an Icon widget, or any widget that has an icon picker. Click the Icon picture in the General tab to open the Icon Library. Under My Libraries, click your set, for example My Icons. Click the icon you like. Click Insert. Click Update to save your page. Your set (1), your icons (2) and Insert (3) (click to zoom) Tip: You can change the Size and the Color of the icon in the Style tab. It works like any other icon, because it is a font. Note: The icon names in the picker are cut short and start with Aaead…. Use the picture of each icon to find the right one. RESULT Final Result Your own icons on your live page. The custom icons on a live page SETTINGS Options Name (title) The name of the tab in the Elementor Icon Library. Upload box Your IcoMoon ZIP file, under 10 MB. Active Default: On after publishingLoads the icons on every page. Off loads them only where they are used. Remove Deletes the uploaded files of this set. You can then upload another ZIP. GOOD TO KNOW More Details Many sets Add as many icon sets as you like. Each one is its own tab in the Icon Library. Safe uploads Only icon files are kept from your ZIP: the font files, the style file and the list of icons. Anything else, like scripts, is thrown away. Icons are a font They stay sharp at any size and take their color from the Style tab. A set needs its list The ZIP must contain selection.json. Without it you see the message Unsupported Icon File. HELP Troubleshooting My icon set is not in the Icon Library Check that the set is Published in Animation Addon > Custom Icons, then reload the Elementor editor. Look under My Libraries in the Icon Library. I see Unsupported Icon File The ZIP has no selection.json. Download the pack again from IcoMoon and upload the new ZIP. The upload does not start Use a ZIP file under 10 MB. Other file types, like a single font file, are not accepted. My live page still shows no icon Save the page in Elementor again, then clear your cache plugin and reload. If you use the icon outside of Elementor, switch Active on for the set. I want to replace the icons Open the set, click Remove, upload your new ZIP and click Update. You Did It Your site now has icons that nobody else has. If you face any problem, please contact our support team. We are happy to help.
