The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

Posted on August 7, 2013 by in Resources 263 Comments

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web
Blog / Resources / The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

We have set out to create the most beautiful, elegant and complete icon font on the web…for free! We have been struggling to find the best icon font to use in our own projects, so we decided to create our own instead. This font will be used in our themes, and we will continue to update the collection to satisfy the needs of our designs. Unlike traditional graphics, these icons are housed within a font file, which means they are vector based and can expand and contract without quality degradation. The result is crisp, beautiful graphics on any display (including Retina displays). Furthermore, these icons have been optimized with pixel-perfect detail for 16px, and all multiples of 16px (32px, 64px, etc). These icons are dual licensed under the GPL 2.0 and MIT, and are completely free to use.

Introducing the Elegant Themes Icon Font

Subscribe To Our Youtube Channel


Download The Icons

Why Icon Fonts Are Awesome

Icon fonts are great because they are flexible and fast loading. Using a single font and CSS, you can create countless graphical variations that would normally require the use of an equally countless collection of bulky and non-scalable images. Combined with HTML elements, these icons can even turn into beautiful buttons like the download link above!

How to Use the Elegant Icon Font on Your Website

Using the Elegant Icon Font on your site is easy, especially if you’re an Elegant Themes member. First, though, will need to upload one of the font files from the download link above into the Divi Builder. Then you can choose the icons from within most Divi modules’ Design tab, or you can use the unicode in your text to insert it the same way you would an ampersand or blank space.

If you’re not a Divi user, we have a tutorial on how to use any font you want on your website without a plugin that will get your site all set up.

Uploading the Elegant Icon Font into the Divi Builder

First of all, download the .ZIP file we linked to above, and unzip it on your computer. Then, find the elegant_font folder and navigate to HTML CSS -> Fonts. Inside that folder, you will find the various font files you can use.

elegant icon font download

After that, follow these steps to upload the font into the Divi Builder.

  • Navigate into any module’s Header or Text section under the Design tab.
  • Click on the Text Font (or Header Font) dropdown
  • Press the Upload button to bring up the uploader modal
  • Select any of the font files from the ZIP archive you downloaded
  • Press the blue Upload button

You will see the font in the Design tab now. Because it is an actual font, the characters correspond to various keyboard buttons, which is why the name of the font that was entered as Elegant Icon Font is made up of various icons in the builder window.

elegant icon font

And with that, your new Elegant Icon font is uploaded. If you don’t want to go through the builder, you can always follow our tutorial to add them to your site another way.

Using the Elegant Icon Font

Once you have uploaded the font to your site, you can set the font to any heading or text style that you want. As long as the Design tab has the Elegant Icon Font set, you can feel free to use either the keyboard or unicode characters listed below to display the font you’d like. Remember that you can customize each Heading size, so you could keep H6 in reserve for the Elegant Icon Font and pull it out when needed.

Here is an example of two text modules with the same text, only one has the font set to the site’s default and the other is the Elegant Icon Font.

And because it’s a font, remember that you can size the icon up and down to suit your needs without loss of quality.

animated gif of resizing elegant icon font

Complete Set and Unicode Reference Guide

Below, we have listed a complete reference guide to the Elegant Icon Font, including both CSS classes for individual inclusion and styling and the unicode to use the icons inline as you work. For a more in-depth look at how to use icon fonts within WordPress, Divi, and even offline applications, check out our comprehensive guide.

Complete List Of Class Names

 arrow_up  arrow_down  arrow_left  arrow_right  arrow_left-up  arrow_right-up  arrow_right-down  arrow_left-down  arrow-up-down  arrow_up-down_alt  arrow_left-right_alt  arrow_left-right  arrow_expand_alt2  arrow_expand_alt  arrow_condense  arrow_expand  arrow_move  arrow_carrot-up  arrow_carrot-down  arrow_carrot-left  arrow_carrot-right  arrow_carrot-2up  arrow_carrot-2down  arrow_carrot-2left  arrow_carrot-2right  arrow_carrot-up_alt2  arrow_carrot-down_alt2  arrow_carrot-left_alt2  arrow_carrot-right_alt2  arrow_carrot-2up_alt2  arrow_carrot-2down_alt2  arrow_carrot-2left_alt2  arrow_carrot-2right_alt2  arrow_triangle-up  arrow_triangle-down  arrow_triangle-left  arrow_triangle-right  arrow_triangle-up_alt2  arrow_triangle-down_alt2  arrow_triangle-left_alt2  arrow_triangle-right_alt2  arrow_back  icon_minus-06  icon_plus  icon_close  icon_check  icon_minus_alt2  icon_plus_alt2  icon_close_alt2  icon_check_alt2  icon_zoom-out_alt  icon_zoom-in_alt  icon_search  icon_box-empty  icon_box-selected  icon_minus-box  icon_plus-box  icon_box-checked  icon_circle-empty  icon_circle-slelected  icon_stop_alt2  icon_stop  icon_pause_alt2  icon_pause  icon_menu  icon_menu-square_alt2  icon_menu-circle_alt2  icon_ul  icon_ol  icon_adjust-horiz  icon_adjust-vert  icon_document_alt  icon_documents_alt  icon_pencil  icon_pencil-edit_alt  icon_pencil-edit  icon_folder-alt  icon_folder-open_alt  icon_folder-add_alt  icon_info_alt  icon_error-oct_alt  icon_error-circle_alt  icon_error-triangle_alt  icon_question_alt2  icon_question  icon_comment_alt  icon_chat_alt  icon_vol-mute_alt  icon_volume-low_alt  icon_volume-high_alt  icon_quotations  icon_quotations_alt2  icon_clock_alt  icon_lock_alt  icon_lock-open_alt  icon_key_alt  icon_cloud_alt  icon_cloud-upload_alt  icon_cloud-download_alt  icon_image  icon_images  icon_lightbulb_alt  icon_gift_alt  icon_house_alt  icon_genius  icon_mobile  icon_tablet  icon_laptop  icon_desktop  icon_camera_alt  icon_mail_alt  icon_cone_alt  icon_ribbon_alt  icon_bag_alt  icon_creditcard  icon_cart_alt  icon_paperclip  icon_tag_alt  icon_tags_alt  icon_trash_alt  icon_cursor_alt  icon_mic_alt  icon_compass_alt  icon_pin_alt  icon_pushpin_alt  icon_map_alt  icon_drawer_alt  icon_toolbox_alt  icon_book_alt  icon_calendar  icon_film  icon_table  icon_contacts_alt  icon_headphones  icon_lifesaver  icon_piechart  icon_refresh  icon_link_alt  icon_link  icon_loading  icon_blocked  icon_archive_alt  icon_heart_alt  icon_printer  icon_calulator  icon_building  icon_floppy  icon_drive  icon_search-2  icon_id  icon_id-2  icon_puzzle  icon_like  icon_dislike  icon_mug  icon_currency  icon_wallet  icon_pens  icon_easel  icon_flowchart  icon_datareport  icon_briefcase  icon_shield  icon_percent  icon_globe  icon_globe-2  icon_target  icon_hourglass  icon_balance  icon_star_alt  icon_star-half_alt  icon_star  icon_star-half  icon_tools  icon_tool  icon_cog  icon_cogs  arrow_up_alt  arrow_down_alt  arrow_left_alt  arrow_right_alt  arrow_left-up_alt  arrow_right-up_alt  arrow_right-down_alt  arrow_left-down_alt  arrow_condense_alt  arrow_expand_alt3  arrow_carrot_up_alt  arrow_carrot-down_alt  arrow_carrot-left_alt  arrow_carrot-right_alt  arrow_carrot-2up_alt  arrow_carrot-2dwnn_alt  arrow_carrot-2left_alt  arrow_carrot-2right_alt  arrow_triangle-up_alt  arrow_triangle-down_alt  arrow_triangle-left_alt  arrow_triangle-right_alt  icon_minus_alt  icon_plus_alt  icon_close_alt  icon_check_alt  icon_zoom-out  icon_zoom-in  icon_stop_alt  icon_menu-square_alt  icon_menu-circle_alt  icon_document  icon_documents  icon_pencil_alt  icon_folder  icon_folder-open  icon_folder-add  icon_folder_upload  icon_folder_download  icon_info  icon_error-circle  icon_error-oct  icon_error-triangle  icon_question_alt  icon_comment  icon_chat  icon_vol-mute  icon_volume-low  icon_volume-high  icon_quotations_alt  icon_clock  icon_lock  icon_lock-open  icon_key  icon_cloud  icon_cloud-upload  icon_cloud-download  icon_lightbulb  icon_gift  icon_house  icon_camera  icon_mail  icon_cone  icon_ribbon  icon_bag  icon_cart  icon_tag  icon_tags  icon_trash  icon_cursor  icon_mic  icon_compass  icon_pin  icon_pushpin  icon_map  icon_drawer  icon_toolbox  icon_book  icon_contacts  icon_archive  icon_heart  icon_profile  icon_group  icon_grid-2×2  icon_grid-3×3  icon_music  icon_pause_alt  icon_phone  icon_upload  icon_download  icon_rook  icon_printer-alt  icon_calculator_alt  icon_building_alt  icon_floppy_alt  icon_drive_alt  icon_search_alt  icon_id_alt  icon_id-2_alt  icon_puzzle_alt  icon_like_alt  icon_dislike_alt  icon_mug_alt  icon_currency_alt  icon_wallet_alt  icon_pens_alt  icon_easel_alt  icon_flowchart_alt  icon_datareport_alt  icon_briefcase_alt  icon_shield_alt  icon_percent_alt  icon_globe_alt  icon_clipboard  social_facebook  social_twitter  social_pinterest  social_googleplus  social_tumblr  social_tumbleupon  social_wordpress  social_instagram  social_dribbble  social_vimeo  social_linkedin  social_rss  social_deviantart  social_share  social_myspace  social_skype  social_youtube  social_picassa  social_googledrive  social_flickr  social_blogger  social_spotify  social_delicious  social_facebook_circle  social_twitter_circle  social_pinterest_circle  social_googleplus_circle  social_tumblr_circle  social_stumbleupon_circle  social_wordpress_circle  social_instagram_circle  social_dribbble_circle  social_vimeo_circle  social_linkedin_circle  social_rss_circle  social_deviantart_circle  social_share_circle  social_myspace_circle  social_skype_circle  social_youtube_circle  social_picassa_circle  social_googledrive_alt2  social_flickr_circle  social_blogger_circle  social_spotify_circle  social_delicious_circle  social_facebook_square  social_twitter_square  social_pinterest_square  social_googleplus_square  social_tumblr_square  social_stumbleupon_square  social_wordpress_square  social_instagram_square  social_dribbble_square  social_vimeo_square  social_linkedin_square  social_rss_square  social_deviantart_square  social_share_square  social_myspace_square  social_skype_square  social_youtube_square  social_picassa_square  social_googledrive_square  social_flickr_square  social_blogger_square  social_spotify_square  social_delicious_square

In Conclusion

Icon Fonts are an amazing tool to have when designing a website, and we wanted you to have the very best toolset possible. Combine this free custom icon font with the power of the Divi Builder itself, and you’re well on your way to creating websites that are truly elegant.


Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Premade Layouts

Check Out These Related Posts

9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Posted on July 27, 2019 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you don’t have to start from scratch for...

View Full Post
55 Web Design Blogs to Follow in 2019

55 Web Design Blogs to Follow in 2019

Posted on January 6, 2019 in Resources

Inspiration comes in many forms and professional development never ends. With that in mind, we have put together a massive list of web design blogs that can keep your brain fed for the entire year. But don’t worry. You won’t find any duds on this list. We respect your time and feel like...

View Full Post


  1. Wauw… this is so great and very welcome. Just about to make last adjustments to my site and I needed BA-DAA icons.

    Thanks a lot.

    / Dennis

    • I must say that these icon fonts are eye-candy. They just make you want to click on them – this psychological aspect alone can make a big difference in generating traffic for your website!

      • Very true! Exactly what I was going to say.

  2. Perfect one. such freebie helps developers so much.

    Thanks for creating it.

  3. What an amazing gift after completing 200,000+ users!

    Thanks you so much, Nick 🙂

    Will surely, give them a try on my upcoming site.

  4. Thanks for the Elegant Icon Font. Can it be used in commercial projects too? I tried to download it, but the link doesnt seems to be working…

    • There are no restrictions as to how they can be used. Try refreshing the page, the download link should be working now.

      • I just wanted to say that elegant themes is an awesome company to deal with! I have never had better customer service / support from any company as I have with Elegant Themes. Keep up the good job! – Adam

        • any way to add into Divi?

  5. Very nice. I like free stuff.

  6. That’s an awesome work. Such done fantastic job. The icons is very useful for any projects and make adjustment very fast. Such a great job.

    Download the icons link not work!!! redirect to homepage

  7. Very nice. Thank you.

  8. I’ve been a fan and a client of Elegant Themes for about 2 years now. You guys rock. This is a great addition to the themes, and I can’t wait to use this on my projects. Thanks!

  9. Those icon fonts look awesome and sharp. How about a plugin for this icon font?

      • THANK YOU!!!

        • I looked at this and it hasn’t been updated in 2 years and not compatible with current WP version.

          • JUST GO FOR IT !

            I’ve installed it and It works perfectly with my updated wordpress & divi theme.

            The only way I’ve found to overwrite the default google fonts (@font-face didn’t work for me with Divi).

  10. Thanks guys, these look great!

    Perhaps ET fans could submit their own icons to broaden the collection?

  11. Thanks a lot, I have been looking for something like this. Very usefull!!!

  12. These are pretty neat. It seems by the main image that they can be any color. How do you change the color of them other then changing the vector image itself? Am I missing something?

    • They are fonts, and they can be styled using CSS just like you would adjust the size or color of a normal letter.

  13. how do you use them? is it a plugin?

    • No it is not a plugin. The icons are a font file that you can embed into your website via CSS. The icons can then be used like normal characters and styled using CSS.

      • Ok, I have never done anything like this before and I thought I was quite good with WP. Do I copy the Stylesheet data into the Epanel C
        SS? If so then what or is that it?

          • Tried to follow this and spent a while looking up YouTube etc.. But it assumes too much existing knowledge. Anything easier e.g. adding custom fonts to wordpress for idiots?

            • Wow! this is excellent. Now I can replace images with these icons.

              • This is really great collection! Thank you guys! I would like to know if they can be used in inline css, so in content box area?

  14. Fantastic – Thanks!

  15. Awesome stuff guys, thanks!

  16. Thanks Nick, I’ve been locking my head on how to do this seeing them on most of your latest themes.

    • I’d like to request icons for file borswing!* Go up one folder -icon.* Directory icon* (Text) file iconPersonally, I would love if the directory icons / file icons were 32 32 and the go up one folder were slightly larger (64 64?) but I’m shit with this stuff so you probably know better what sizes suits the purpose!

  17. Fabulous icons…very helpful to developers…

  18. Great stuff! Thanks for sharing. Is there a way to get social icons and rss only?


  19. im not sure if get i after reading those links. do we import as zip file in wp then enter the valves where we want the image to be displayed not sure what u mean by this one.

  20. Thanks a lot! 🙂

  21. This is awesome! Great icons and work! Thanks for sharing.

  22. I found the following article which makes the process a bit clearer:

    Seems that Nick has alrady generated files using comoon
    Seems you need to upload the ‘font folder’ into same directory as CCS file ( but never used an FPT client before – so maybe you can do this from cpanel?)
    Seems you then open the style file and copy this into CSS ( which tells the style sheet where to find the font folder? I think?)
    Then I get lost….

    • Glad I’m not the only one lost! Bookmarking this to come back and check for someone posting “Icon Fonts for Dummies”. 🙂

      Can’t wait to use them Nick…once I figure out how!
      Thanks for everything ET does!

    • Glad I’m not the only one lost!
      I’ll keep checking back for a comment “Icon Fonts for Dummies” 🙂

      Thanks Nick, can’t wait to use them once I figure out how!

  23. Bravo Nick!

    I’ve been a member since your first year (or close to it anyway) and this is just another treat!

  24. Great icons! One thing…in the email you sent out announcing them, you forgot the prefix for the download link.

  25. Just a quick note, i got this via my e-mail subscription and the download button on the e-mail goes to http://icons/

  26. Awesome (oops – no reference intended) !
    But seriously – really cool.

    I need a target with an arrow going through it.
    THAT would be “elegantly awesome”. Any chance?

    Good job guys

    • icon_target

  27. Nice icons! Will use. Thax

  28. Great stuff – thanks for sharing!

    • Sweet! Thanks!

  29. Great job.
    Thank you for this freebie
    Though to be sincere, your themes are so elegant and so well balanced that I don’t even dare to change a little icon that could jeopardize such well designed pages.
    It is so easy to jump into fancy stuff and mess up everything that I am afraid of loosing the so well ‘surfer oriented design’, for which I must congratulate your designers.

  30. These are fresh and many icons here are preferable to other symbols seen elsewhere. I’m glad we now have this alternative to Font Awesome here — which is cool, but very common and some of their icons don’t work (e.g. their calendar looks like a gift package).

    Nick, you and your team are very good to us, offering up a lot of HARD detailed work here for free. (That said, I hope we see this set expand over time. Icons for healthcare, education, and transportation are very helpful.)

    Great work!

  31. Wonderful! Thanks Nick!

    This was one of my big requests a few times in a row any time you asked, as I’m sure many other’s as well. Not that I mind embedding my own icons or find it difficult. But something like this saves such a huge amount of time in building a website. Most icons used are pretty much stock anyhow, and I’ve found it relatively rare that I really have to ‘custom’ design one.

    Thanks again.

  32. Love it so much. I was looking for some decent icons just yesterday. It’s so nice to have these available for use.

  33. Spectacular! Thank you!!

  34. Font novice here. Is it possible to use these icons as a font on a Mac (like Zapf Dingbats)?

    I was thinking this was like a Google font, which I have also uploaded to my Mac’s font manager so I can use them in all my graphics programs, not just my websites. ElegantFonts is now loaded up in Font Book, but only about 50 basic arrows, bullets, list icons show up, not nearly the full array of graphic icons shown on this page. I’ve tried every keyboard combo imaginable. (I chose the HTML CSS folder>Fonts>ElegantIcons.tff to upload–maybe I need a different file?) Thanks for any help.

    • I have made and attached what is hopefully an ‘easy’ solution to this question. This is how I have been doing it, and have had no problems thus far.

      Tutorial Here

      For more details, including instructions of Windows, go here

      Hope this helps!

    • You’re charging for this tutorial. You failed to mention that when promoting yourself.

      • Sorry for the inconvenience.

        My site was free for a long time during and after I posted my earlier comment.

        Anyway, I went ahead and made those two free for all.

    • Thank you for providing this service!

  35. Great icons! Thanks for sharing!

  36. Great collection! Thanks a lot.

    • Thanks so much for these! Really needed them!

  37. You guys are like crack.

    Your themes are beautiful and great to use, and then you give out these great presents, just for using your themes!

    Elegant_font, elegant_builder, icons and short codes! Thanks! You know how to spoil your customers.

  38. Really nice fonts. Thanks!

  39. Thank you for this great gift… Appreciate it very much!

  40. Thanks for this awesome icon font, it would be better for a lot of people i think you made a tuto to explain how to integrate it in wordpress.
    Because at this point im don’t know at all how to integrate it correctly in wordpress, so it is a good work but it is not ready to use for a lot of your customers like me…

  41. This is a great freebie, I still cannot believe this is a free font … Awesome work Nick! I’ll surely use it on my website 🙂

  42. im sorry but this newbie doesn’t understand how i can put these into my website im using the new nexus theme, does that mean i got to figure out and css padding etc . cos i dont know much about it.can you please advise me, ty.

  43. Well – ELEGANT THEMES does it again!

    Top Quality is your trade mark! Well done and thanks for these icons.

  44. What an amazing icon collection! Thanks for sharing

  45. Wow, this collection is huge. What a great find!

  46. Very nice, thanks for the hard work

  47. Big THANKS for your generosity, Very much appreciated Nick

  48. These are so great! Thank you for doing this.

  49. This is awesome! Great icons and work! Thanks for sharing.

  50. Fantastic, exactly what I was looking for; this is a really generous share, thanks Nick.

  51. Amazing collection of icons! Thanks!

  52. This option set is awesome. I just set up another site using the Nexus theme and i’m gonna have to play around and see where I can use some of these.


  53. Great icon package for web design. Thanks Nick

  54. The Elegant Icon fonts are really appreciated. They look great.

    But that makes it even worse, when you are too “stupid” to use them correctly. Having something really nice just in front of you, but not being able to use/eat/taste it, is just cruel.

    And it seems a lot of Elegantthemes users do not know how to use them. And so far I have not found a useful description. Please, provide a description on how to use them for your themes.

    Kind regards,

  55. great! just wondering how do we install this to use on the site? has anyone got an easy tutorial

  56. Thank you very much Nick, they are great!

  57. Awsome . Such a big present for the end of vacation . Needn’t have to create my owns.

  58. Looks cool. I am a little surprised that elegant themes would offer this up to its users without some kind of instructions or guide. Maybe one day I will take the time to google it.

  59. Folks, I just love these icons!!! Hopefully will make my website more attractive to my visitors!!!

  60. These are freakin’ awesome!!! Thanks!!

  61. Wow folks, awesome icon set indeed!!!

  62. Love these! Any plans to add them to the ET shortcode plugin? That would definitely make them easier to use.

  63. thanks a lot. i like it.

  64. Thank you very much!

  65. wonderful icons. Elegan Icons looks Awsome. ET team done wonderful job.

  66. Hi, I am new to all of this, I am building my own wireframe and added these wonderful icon fonts, they work in ie8, ie9, ipod touch 4th gen, google nexus 7, firefox but not in ie10 windows 8 or windows 8 mobile.

    Any ideas.

    Here is the site they are on

    Thanks, Wayne

  67. This is great!

    Why not include the font with a shortcode into the ET themes?

  68. Thanks Nick, it helps a lot.

  69. Wow Gr8 icon’s 🙂 Thank you Nick 🙂

  70. I have successfully uploaded and managed to figure out how to use them in my wordpress – but how do I edit them please? like if I want an icon blue nor black.

    • Nick, you can use an external style sheet or inline code to edit the font icons. I prefer the inline method, as it’s easier to manage each font.

      This is how I did it. I used p style to start the code, and then changed the font size to 32px, and changed the color to black =

      Of course you need to change the ”!” after data icon to the icon you are using. For a detailed step by step see here –

  71. Awesome!!! another piece of perfection. Thanks sharing!!!

  72. Love this font set!

    Is there a way I can use the whole set in :before/:after in css?

    Doing this works: . a:before{content: “a”;}

    But this doesn’t work: .a:before{content: “”}

    Or, to make a long question short: can I use the unicode values in css pseudo selectors?


  73. Amazing work thank you !

  74. This font looks good only in 32px size. How can I resize it to 24 without losing quality? anyway? any method?

  75. WWow! Thanks for sharing. I very like it. Amazingggg!!

  76. Thank you for this. Are you considering in adding e-commerce icons, such as visa, maestro, mastercard, american express, diners etc too?

  77. I was looking for font icons, would you add some gaming icons. Thanks.

  78. Really these cool icon fonts look aweful. I am used in my wp theme…Thanks!

  79. Can these fonts be used in corel draw? if yes is there a tutorial available for installing them so that I can pass the fonts and tut to my Designer.

  80. Wow! O(∩_∩)O~I have to say that your share is very wonderful! \(^o^)/~Thank you for your share!

  81. Wow, I might just try these ones!!!

  82. wow!!!!! Thank you!! you are very excellent designer!

  83. It would be great to get a YELP icon set in here as well!!!

    • Yes!! I would love to see this added.

    • Yelp is a no brainer. Restaurant, salon, etc… they will all wish to link to their yelp reviews.

    • Please add the Yelp icon to the set. It is going to be much used by folks who have a local business presence.

      Also consider making an Angie’s List icon for the same reason

    • Same here – would love to see Yelp included in this icon set!

  84. Where is the opposite quotation mark? there doesn’t seem to be a glyph of the opening one, only the closing one….??

  85. Being a small designer, these icons are most creative for me and thanks for this post. Before this post it takes lots of time to create the icons in PS for me but here are lots of icons for a designer like me to create on canvas, thanks again!

  86. Brilliant stuff! Quite the comprehensive collection you’ve produced. 🙂

  87. Hello
    How to use this icon in photoshop? Could you please tell me anyone?

  88. Use these icons all the time. They’re amazing.

    You would save me so much time, if you could put the class names beside the first set of icons

    I use the web inspector to copy and paste the “data-icon” text into photoshop and fireworks. But there’s so many of them to go through each time.

    If the class names were underneath, I could search for “calendar” and copy as usual. Instead of having to scan them every time.


    • Thanks a lot Mr. Rory

      Now I can use this font in photoshop to follow your technique.

      • How in the world I’m gonna use the set in photoshop? I’ve seen that in the past the question had been raised for a few times, but no one could possibly answer those correctly. So can anyone please tell me that how to use the icons in photoshop?

        • Shuvo:

          Download the font package, unzip the folder, right click “Install”, then open photoshop. The font will be in your list of available fonts. If photoshop is open when you download the font, you may need to close and then re-open it.

          Hope this helps.

          • Wow, this is huge list, thanks for giving all the icons on one page…

  89. How Can We use the Unicodes? 🙁
    Is just put in HTML Text Module?

  90. Awesome Work…

    I wanna ask one thing that how could i use them in my PSD file ? can i know the code of them ? i have used my keyboard keys but it very less than 360…. some icon i got but not the whole…. please do tell me


  91. Hey
    Do you have any idea why I see normal font glyphs (*&^%, letters and numbers instead of icons) and squares instead of icons after  ?


  92. I love it!

  93. Folks, I just love these icons!!! Hopefully will make my website more attractive to my visitors!!!

  94. This is a great freebie, I still cannot believe this is a free font … Awesome work Nick! I’ll surely use it on my website…

  95. Thats great. I love it 🙂

  96. I am obsessed with line art icons. I should brush up on my Adobe Illustrator skills and make some of my own. Flat icons are fun to use, too. I like anything colorful. Great set, thanks!

  97. Wow! Great Icons. I can’t believe that. I must use this icons. Thanks

  98. This is what I was looking for a long time. Thanks guys.

  99. You’ve done a great job with these icons! Thank you 🙂

  100. great icons set.exactly what i needed for my site

  101. Hi Nick

    Thanks for sharing this, the icons are awesome! I’m a regular user of FontAwesome but they do become a bit samey across projects, so it’s great to have another free set to try out.

    Great work!

  102. Great Post! Thank you for sharing. This is really helpful when on tight time and budget! I am more of a developer than designer and collection of icons makes my life easier – without hiring a designer. This is the second greatest thing css provides (second to sprites ;D)

  103. First off I have always been a fan of your WP themes and tossing these cool icons in is awesome! Thanks!

  104. Need Keyboard key to type the icon in Photoshop pls help

  105. I’d like to request a Github icon pretty please?

  106. Very useful post, thanks for sharing this Free Icons and Unicode Reference Guide.

  107. This is awesome …. Thank you for sharing these fabulous icon 😀

  108. Thank you for sharing icons

  109. Just downloaded, thanks 🙂 I’ll share it with my facebook group also 🙂

  110. As an occasional ellegant theme subscriber I could not expect anything less than a high quality work from you. Thank you for sharing.

  111. Amazing icons for my needs.

  112. I downloaded, thank you very much 🙂 I’ll share it on my facebook page.


  113. Just downloaded this set of icons 🙂 Thanks! Now I can replace some of my image icons with this neat set.

  114. Wow! Thanks for sharing this, the icons are terrific! I’m a regular user of FontAwesome but they do become a bit samey across projects, so it’s great to have another free set to try out.

  115. Great icon fonts.

    Thank you very much

  116. Hi,

    These are awesome icons but I’m struggling to find a way how to use these on Photoshop, because I design PSD templates. There’s a way how “font Awesome” can be used in Photoshop, ther a PDF cheatsheet for that.

    Can anyone provide me a similar solution please!


    • Me too!

  117. I would love to try some of these icons on my site.

    Fantastic icon fonts!

  118. great icon i really like you thanks for sharing it it s great work

  119. This is just what I need …. What an amazing Icon
    Thank You for sharing

  120. Thank you! Are you guys planning to add a filled in circle icon? That would be great!

  121. Thanks for these! I really needed them!

  122. Just what I needed. Thank you

  123. hmmm great set of icons . these icon can use for commercially?

  124. nice i need this icons pack thanks man and sites

  125. WAw… this is so great .I was Just about to make last adjustments to my site and I needed kind of icons.
    Thanks a lot.

  126. This is a great collection and hard to believe it’s all for free :o)

    Thanks Nick

    PS. At the risk of sounding really greedy, are there any plans to add a few more icons?

    Runs for cover ….

  127. Lovely Icons… These icons must be used in web applications and web designs, I used few icons for my android apps, those are looking very professional now. Thanks you so much for such a wonderful article & given good knowledge on different kind of icons.

  128. Awesome. Thank you for this one. Ill sure gonna check this out 😉

  129. Great icon pack!! Please consider adding an icon for “fax” — I know fax machines are ancient technology, but corporations still use them for legal reasons.

    Here’s an example from the fontawesome icon set

  130. Excuse my ignorance, but how do I add them to Divi?

  131. The web social icon such as the ones for twitter are pretty cool and very helpful. Thank you for the hard work.

  132. OMG! What a Freakin awesome collectoon of Font icons, There are gonno make my website more attractive.

    Thanks for Sharing Elegant Themes, As always we love your work.

  133. i can’t see icon for call/phone etc? am i blind…? what you suggest to use for that?

    • sorry-sorry, it’s there – icon_phone 😉

  134. Thanks a lot for your fabulous work 🙂

  135. I have some issues with some fonts like:
    icon_printer-alt or icon_document
    They don’t appear on my page but the others like: icon_phone work well!

    I have installed this plugin but I think it doesn’t support all icon fonts! ??

    Any idea?

    • I’m having the same issue with icon_printer not working, but icon_email does.

  136. Hi Nick

    Thanks for sharing this, the icons are awesome! I’m a regular user of FontAwesome but they do become a bit samey across projects, so it’s great to have another free set to try out.

    Great work!

  137. Nick, you guys published some awesome icons. I love the flat set as well.

  138. Thanks a lot for your hard work!I love these awesome Icon so much.

  139. I use the Elegant Themes in many of my sites for the last two years. I found these icons today. I am sure they will make my sites even more elegant and my content more easily readable.

  140. I like these modern, flat icons very much. However, I find that they stand out just a little to much. What would be an easy way to convert the black in a dark grey?

    I haven’t read the legalese yet but is it allowed to include these icons in an app? Or are they only free for personal use?

  141. I’ve been looking for these icons for my website. Thanks for your great collections!

  142. Hi Nick! I’m getting great results with these icons! Thank you!!

  143. Thanks a Ton. those uni-codes are pretty awesome

  144. WOW. Really awesome collection for icon/font. Appreciate that 🙂

  145. Hi,
    You mean i can download csh file and import to Custom Shape . And use them as shape tools. Right ? But when i download them, i don’t see csh file. Help me !. Thanks !

  146. Gorgeous fonts! I’m going to use these on my website!

    Thank you 🙂

  147. Gorgeous collection for icon/font.
    This is just what I need.
    Thank you.

  148. Nice collection, I will definitely used one of those icons for my own WordPress template…

  149. All icons are really awesome! I have started using them in my websites. I am pretty sure that now my website will be more Elegant with these.


  150. This font is great! We’re using these chars for the social media icons on our site and they look super. We’d like to submit a request to add characters for Razoo ( and Amazon. Thanks!!

  151. How can one add an additional social icon not existing in your theme to the list, like ‘Apple’ social icon?

  152. On Divi Theme, how can one add an additional social icon, like say ‘Apple’ social icon?

  153. Thanks for sharing for the free. It means a lot. I have used a few for my website. Respect.

  154. I just love those blue fine-line icons. Used it in two projects until now. Thanks for sharing this.

  155. Can someone create a plugin to add in FontAwesome to this? There are several critical icons missing. #deal-breaker. Or, can the devs maybe have a checkbox/dropdown somewhere that enables FontAwesome? That would be awesome.

  156. Beautiful fonts! Can’t wait to use them for my new site. Thanks for the share!

  157. Hello guys!

    Thank you for the awesome font! I was wondering though how can I use it in Photoshop? Where do I get the characters to copy paste to PS? 🙂

    Thank you again!

  158. I second the request for Github! and add a request for Codepen.

  159. Just what I needed. Thank for posting this.

  160. Nice fonts! I will use these on my WordPress site!

    Thank you 🙂

  161. Thank you!! you are very excellent designer!

  162. Awesome Icons Bro. But can anyone tell me how i use this icons on photoshop?

  163. thank you very much! Your icon text are nice. Can you tell us more about the image folder in the package download file ? It is just for the svg file ? Because I saw some png file in it…

  164. awesome icons!

    The ‘icon_stop_alt’ icon is bigger than the ‘arrow_triangle-right_alt’ icon. Please try the following code and you will see


    arrow_triangle-right_alt {
    font-size: 48px;
    text-decoration: none !important;



    maybe a bug?

    • Ok, I found the bug!

      Please open : ‘arrow_triangle-right_alt.svg’ in illustrator, you will see that the icon is not align to the center…Maybe other icons have the same issue (not tested)

  165. it’s really elegant icon for web design 🙂

  166. This has to be one of the best looking icons with simple colours..I think it will be good for my site to use. Thanks!!!

  167. Awesome package. Thanks so much!

  168. Thank you so much for your generosity and this amazing icons!! ❤️‍ them!

  169. Hello! Thank you for the set of cool icons. Could you add to social?

  170. I must say it is one of the best icon font right now.its very useful because its so much eye catching .it also increase the traffic on website.Thanks a lot.

  171. I like these fonts. Going to use these on one of my new WordPress sites.

  172. Waoo amazing fonts, thanks for sharing, surely i am going to use it.


  173. I am planning to use these icons on my wordpress site. That will work best with elegant themes.

  174. Thanks Nick You have Made it easy for me..
    I am just impressed with the fonts and icons.. Am on it..

  175. Behance Icon is missing, would be great if you could add that. 🙂

  176. Brillan icon as always!
    Thanks for your work Nick. I appreciate this share.

  177. Hi,

    Can I up load my own icons somehow? The one within the theme are really cool but the are not covering all the possibility.


  178. I keep coming in here to grab an icon for my Divi designing…just wanted to say thanks for making these available and easy to integrate into my theme.

  179. Hi,
    these are great! I would love some icons related to fitness / workout. Like a dumbbell etc.! 🙂

  180. I would kill for a Houzz social icon.

  181. yes, a great collection – we use them on our website – but now we will make an redisign with divi for “paartherapie in graz” and will use more of them, good service

  182. and this is our third site made with divi, our favourite, also with these icons, we bought the full service of eleganttheme and need all these little services like these icons, regards from graz – psychotherapie szilveszter-gloggnitzer

  183. I am new to WordPress and what not. I have a WordPress that I am setting up and it has a setting within the WordPress that allows me to choose from your main icons and just type the icon class name such as icon_check or icon_map_alt and it will show up in the proper location. I think this is great for most cases, however I have 12 personal icons that I need to be put into some of those spots and cant find away to incorporate them into your current icon set.

    I was wondering if someone could guide me on how to add those 12 font icons?


  184. These are great! I would love some icons related to fitness / health.


  185. i am planning to use these icons on my wordpress site. That will work best with elegant themes.

  186. OMG, that’s a lot of icons. lol

    I’ve bookmarked this page and come here very oftenly whenever I’d need more icons.

  187. How do I add the font to inDesign/Illustrator from only .svg and .png icon/font files? (no standard font file here from what I can see)

  188. Would love to see a Strava icon. Is it possible to make a request through an official channel? Thank you!

  189. very helpfull for modyfing font ..thanks for share this article

  190. No update in mind for new G+ icon? thanks!

  191. Hi!
    You couldn’t add Vkontakte icon? This network too is very popular )

  192. Hi. I’ve downloaded the font and put it into my FontBook to use it in Illustrator.
    I can only get the first few icons. How do I use all of the icons? eg: [shift] 5

    I just want a nice phone, web, fb and email icon!

  193. Wow, these are some quite beautiful sets of icons. Can’t believe you guys are offering them for free. Thanks a lot, guys!

  194. Thanks a lot guys! Great work!

    – To use it on your own computer: install the font and take al look at the ‘glyphs’

  195. The Icons Are Really Cool, i am gonne use on my blog. thanks

  196. Oh, these icons look awesome. Good replacement for FontAwesome. Thanks for making it and give it for free!

  197. Really looks awesome thanks

  198. This is really a huge set of icons. Awesome flexibility..
    I just wanted to know how can I use all of these icons in a dropdown list for my posts to select from?

  199. Thanks a lot guys! Great work! its very helpful for every design, making ui/ux attractive

  200. What about the new Google Plus icon?
    We need that G+

  201. I need Google + Icon for My Website. I need it Urgently.

  202. After you download the zip file. When you unzip where do you put it. I tried to put it in fonts and it says, I can’t. HELP HELP

  203. Wow, great collection of such beautiful and enchanting icons. I was just designing a theme for my personal blog and I’m pretty sure these icon packs will come in very handy. Very useful stuff. Thanks.



Get Started With Divi