Introducing Icon Library: A Truly ICONic Release

We’ve built a powerful and robust react-based icon interface that is both intuitive and super-fast. Elementor v2.6 includes a brand new icon interface, Font Awesome 5, SVG upload & many more improvements.

Play Video

The Best Site Builder Just Got a Whole Lot Better.

Icons play a huge role in our lives. From Spotify, Waze to Emojis, we are constantly interacting with different types of icons, especially on the web.

Icons are essential for the work of the web designer. They play an important part, much like images, fonts, and other graphic elements. 

Since we want Elementor designers to have the best tools possible, we decided to develop an entirely new way to work with icons.

Introducing the Icon Library

We’ve built a powerful and robust react-based icon interface that is both intuitive and super-fast. Icon Library offers a whole new experience for icon customization. It has everything from the wide window that displays the different icons clearly, to the filtering options, to the possibility to customize every icon, even inside widgets like the icon list and social share buttons.

The relevant icons will automatically show according to the widget you are using. Until now, you could only select between a few pre-set icons. From now on, you can click on the Icon Library button, and the Library will appear and let you pick recommended icons.

If you’re the picky type, you can browse through the entire library and choose your desired icon.

The new library will be available not only for the Icon widget, but for other widgets as well, starting with:

  • Button
  • Accordion
  • Icon Box
  • Icon List
  • Social Icons
  • Toggle
  • Call to Action (beta)
  • Reviews (beta)
  • Flip Box (beta)
  • Form (beta)
  • Price Table (beta)
  • Post Info (beta)
  • Sitemap (beta)

Font Awesome 5, It's Finally Here!

The long-anticipated Font Awesome 5 library finally arrives to Elementor!

With this update, your basic font library just got a lot bigger. Beforev2.6, you had to make do with only 675 icons, now you have access to 1,534 amazing Font Awesome 5 icons (including Elementor’s logo icon!).

Font Awesome 5 is not just about more icons. It brings faster performance and faster page speed, which can benefit your SEO and your users experience. With this library, only the CSS and fonts of the icon family you actually use are loaded. 

Font Awesome 5 includes 3 main icon families: Solid, Brand and Regular. These families are filterable and let you stay consistent with a certain design language throughout your site.

Please note that due to minor design changes made to some FontAwesome 5 icons, some of your old FontAwesome 4 icons may look a bit different.

Upload Your Custom Icons Via SVG

Every designer wants the ability to use custom made icons. Now, you can!

The new Icon Library lets you enjoy the power of SVG files, giving you the ability to upload your own custom icons.

So what is SVG and what is so special about it?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVG files work in a similar manner as icons. You can scale them up or down without creating blurriness or  losing resolution. They are extremely lightweight and keep your pages lean.

An important security notice!

Uploading SVG files from unknown sources may pose a potential security threat. We recommend you upload files only from a trusted source and enable this feature after you understand and accept the security risks involved.

Once you upload an SVG file, Elementor sanitizes the file, removes any possible malicious code, and leaves only the skeleton of the required image. After the upload is done, you will be able to preview the image and filter it using the native WordPress media library, only showing SVG files. The SVG is inserted into the page as inline code.

We recommend uploading SVGs without any inline styling, in order to take advantage of the full capabilities of the Elementor’s styling controls.

Better User Experience

We constantly think of innovative ways to help you in every step of your design process. Elementor v2.6 brings two new tools for that purpose:  Navigator Indicators and Help Buttons.

1. Navigator Indicators

The Navigator feature has become an indispensable editing tool in Elementor. It’s like Waze, you wonder how have you ever managed without it. Now, we are making it even better, with Navigator Indicators.

Every time you use Elementor’s Custom Positioning on any certain element, you will be able to see an indication of this customization in the Navigator panel.

For example, if I use an absolute position for a title, the Navigator will show a blue indicator with a drag icon next to the title.

In the upcoming Pro release, we will also add two other indicators for Motion Effects and Custom CSS.

2. Help Buttons

Comprehensive documentation has always been a top priority for us. 

That said, it’s not always easy to find the exact doc, at the exact moment you need it.

This is why we have now added a help button at the end of each editor panel. Click on it, and a new tab will open with the relevant documentation needed.

Even More Icon Improvements

Stay tuned, because we are going to release even more powerful icon-related superpowers. In the upcoming weeks, we will release the Pro version of Icon Library, which comes with integration with Font Awesome 5 Pro, access to 5,000+ icon sets, the ability to add custom icon libraries like IcoMoon & Fontello and many other exciting features.

Start enjoying over 1,500 FREE Font Awesome 5 icons, and make your site more beautiful.

Start Working With Icons the Smart Way

Having the ability to use your own custom icons is very important for professional Elementor designers who want to bring their own unique touch to their website. No longer do they have to compromise with any given set of icons.

More icon choices mean a substantial boost to your creative process. In addition, the UX improvements also play an important part in streamlining your design workflow.

We’d love to read what you think of the new Elementor v2.6. Let us know in the comments below. If you like this new version, please share it with your friends, so they too can enjoy this version.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 877,316 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

96 Responses

  1. Icon library is nice. However if you cannot control your own icon sets (svg or other) from the library, I don’t see it as a such big thing. You should definetely update the icon library to include our own icons there as well!

      1. Well, actually I’m not missing anything. You guys missed my point!
        I don’t believe you can add a section of your own icon sets into the library widget and place them like you do when choosing and placing Font Awesome icons from the library (right panel with tabs).

  2. This is great E thank you for prioritizing customization!! Can’t wait to try it out. I would be over the moon of you could somehow enable custom icons for navigation within widgets such as slider chevrons, close ‘x’ icons etc. Great work!

  3. I think this the most amazing news for Elementor users as well as developers. This feature has been requested for a long time 🙂 I hope that you’ll provide proper resources for developers of how to expand this feature and add own icon library.

  4. One day in the future, maybe Elementor will build global CSS control.

    Until then, I’ll just play around with icons in my spare time.

  5. Awesome to see the implementation of Font Awesome 5 – I’m looking forward to try it out the following days.

    Out of curiosity – are there any plans of supporting Font Awesome 5 Pro so it’s possible to utilize all the icons that I currently have a licence to use? If it was possible to upload all my FA5 Pro icons so they are available in the Icon Library, it would be a huge advantage compared to having to upload all the individual SVG’s to the Media Library.

  6. My hamburger toggle is changed after update – the 3 lines are numbered 1,2 and 3. How do I get my old toggle button back?

    1. Hi Inge Bang, has your problem be solved? Are there others facing the same problem? I don’t like to upgrade if such problems still exist.

  7. Icon fonts can add a lot of bloat to a site so I appreciate that you support only loading used families of Font Awesome.

    I’d love to see this enhanced even more to where icons chosen from fonts are transformed to SVG so only those specific icons get loaded and only on pages where they are used.

  8. Been a happy customer for a year, keep up the great work. Will be subscribing for another year. Though I wish padding and margin could be done + (Cross System) my mind wraps around it better seeing the direction, rather than in line order. Also, that can mix % and PX without resorting to CSS. Two Suggestions 🙂

  9. Hello! Does this new implementation still use instead of ? The flags that sets off in automated WCAG checkers is problematic for clients being sued for ADA compliance right now, and is still a major problem with most icon plugins. Would be great to see a non--based icon implementation. Even though it isn’t a true accessibility issue, not being able to have a ‘green’ on most checkers is a non-starter when dealing with scared hotel/restaurant clients.

  10. Hi Ben, Great work out there. I am one of the happy user of Elementor.

    I use on my website tombuysnotes.com

    The only question is can I use it in free version of Elementor for my website.

  11. As an aside, I will say now that you should not expect Elementor to be providing Font Awesome 5 Pro. It’s impossible to distribute Font Awesome Pro without adding people to your “seats”. It will just be an integration for you to be able to connect your Font Awesome account to use your Font Awesome Pro subscription via Elementor.

  12. Thank you for this update, especially SVG support!

    In the demo, how do you use the slide out, full screen menu? Is that an add-on plugin or built in to Elementor? I have never seen that!

  13. The icon list element is not properly sizing some uploaded icons properly. The standard icon element properly sizes but some of my list icons are huge.

  14. I am thrilled about how fast and stable Elementor is improving and evolving. Good job!

    Only the loss of page site speed prevents me to using Elementor on all pages of my customers.

  15. Hi, thanks for this feature!
    I’ve built a little plugins for integrate FontAwesome 5 Pro icons with the possibilities of select between Pro and Free icons..

    In your new release, there is a possibilities for select, for example, the light version of the icons? And the Pro icons?

    Thank you!

  16. Yea… it’s a very awesome revolution in the icon library but I miss the previous icon library also. Wait for your future update… it’s good thinking that these features are available in free elementor. Nice… best of luck for the coming days.

  17. Good job Elementor team. I already know that you are going to expand the functions of the icons. But it would be great to be able to use these icons in widgets, like the Popup and the menu. And the theme of creating custom animations for those icons, I do not know how you could incorporate them, but it would be great. The power to animate for example the icon of the menu, both in hover, as in the click. A greeting! good job!

  18. ‘Search Form’ widget button doesn’t show an icon now (should show either magnifying glass or arrow), presumably broken after this update?

    1. Also the same for any other widgets using icons (eg. Nav Menu sub-menu indicators); however, having opened and used a (new) icon widget elsewhere, the other widget’s icons have re-appeared – as if it’s re-connected all the icons in the background.

  19. I updated to latest 2.6.1 version, now when I go to edit my old icon lists, I cannot change the icons. When I go to add a new list, it says I must update to FA5. I hit update, then ‘Upgrade to Font Awesome 5’ in the next page. It will say, ‘Hooray, the update completed succesfully’ and take me back to the page, but nothing changes, it will keep sending me in this loop. In my admin, now on every screen I see this:

    “Elementor Data Updater – The database update process is now complete. Thank you for updating to the latest version!” with no option to close it.

  20. Can’t wait!! this is definitely one of great feature that we’ve been wishing for! is this already released or only for beta version for now?

  21. Used these and they are fantastic! Makes my website building for my clients so much quicker now. No longer have to download massive amount of icon packs. Keep up the great work!

  22. My Elementor Pro is up to date but version 2.5.14 is still showing. It should be version 2.6 now, right?

  23. Since updating to the latest versions, the default icons I used previously no longer show. I only see small empty boxes in place of the icons. Is there some bug?

  24. Great pack of icons, thanks!

    What I miss though is a basic set of numbers and characters. Would love to see some squares or circles with 1, 2, 3 etc. and A, B, C.

  25. In a next version please make it so that I can edit my page on my tablet. I don’t own a pc or laptop anymore, I do all my work on a samsung galaxy note pro (android). Elementor seems to work faily ok except that I am not able to drag and drop widgets from the menu (i also can’t get the right click drop down menu on widgets, but i can everywhere else). As dragging and drpping widgets is the basis for creation of a page i can’t use Elementor at all. This is a shame because the drag and drop way of doing things is awesome, especially if you use a tablet with pen.

    1. Please update both versions of plugin to Elementor (2.6.8) and Elementor Pro (2.6.2). Please enable Font awesome 4 support in Elementor settings — https://prnt.sc/odwgf4 and check if it resolves the issue.
      Also, check if you have migrated to FA5 correctly — Migration to Font Awesome 5. If these steps won’t solve your issue, please send this question to our support.

  26. I’m having an issue with many icons not appearing when selected. For example, I’ve created some buttons using Elementor and as part of the button there is an option to add an icon. About 1 out of every 3 icons do not appear in the button after selected. And some just show a square. What is the reason this is happening?

    I’ve seen mentions by Elementor staff in forums that certain icons are not supported. If that is the reason, then why are they even included in the icon collections? This seems to be a very common and on-going problem, so I’m surprised it has not yet been resolved. With an already limited selection of icons to choose from, having so many not working isn’t making things any easier.

    I’m working in Chrome with Elementor and Elementor Pro installed. I’ve tried logging out and in. Any suggestions would be appreciated. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 877,316 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.