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

Last Updated on September 15, 2022 by 278 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
Play Button
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   elegant-icons_360 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.
Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Top Features Of Divi Dash For Busy WordPress Agencies

Top Features Of Divi Dash For Busy WordPress Agencies

Posted on October 17, 2024 in Resources

Running a WordPress agency isn’t a walk in the park. It’s a juggling act of keeping clients happy, staying on top of changes, managing your team, building killer websites, and maintaining them — all while trying to stand out in a crowded market. But what if you had a tool to help...

View Full Post
WordPress vs Medium (2024) — Where Should You Blog?

WordPress vs Medium (2024) — Where Should You Blog?

Updated on February 14, 2024 in Resources

If there is one question that goes back to the very beginning of blogging, it’s “what blogging platform should I use?” Everyone asks this question (to Google, most likely), and everyone gets bombarded with a thousand different answers. That’s primarily because there are so...

View Full Post
9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Updated on January 23, 2023 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

278 Comments

  1. When I try to upload the icon font set (eleganticons.ttf) , I get an error that says “Sorry, you are not allowed to upload this file type” 🙁

  2. First of all, thank you so much for this iconset. I’ve been using it for YEARS! Thank you also for all the hard work you put into the Divi theme. Even though it’s tough to justify a monthly subscription to the boss (I’m yet to convince him to do it), the lifetime subscription to the core theme has paid for itself so many times.

    On to my question: Will you be updating the iconset with the ever so lovely X icon?

    • I’ve been wondering that myself. When will the bird icon be replaced with the X? It’s been over a year since the switch. 🙂

  3. I am getting this “Sorry, you are not allowed to upload this file type.”

  4. There are no icons on site in “Complete List Of Class Names” section 🙁 but icons works

    have to use web.archive

  5. There seem to be icons which are not listed here. What is the HTML code for the external link icon ? It’s in the icon module, but i’d like to use it in a text module and therefore need the right code.

    • The arrow icon I am seeking is not listed in this post either. I think we need an update!

      Even if you right-click to inspect the code of an icon that is already published, you cannot see the short-code or title of the icon.
      Instead there is a block in the css code, like this: data-icon=””

      • If your preferred icon is not on the list, use custom PNG or SVG images, get icon files from Flaticons, and then upload them to your Media Library.
        https://www.flaticon.com/

        Then you can either add it in an Image Module or through code. If you want it to be added in the Text Module using code you can follow these steps:
        [1] Add this in the Text Module Settings > Content > Text > Text Tab, make sure to define a class in the snippet below:

        [2] Add a code in your Divi > Theme Options > Custom CSS to add the icon:

        .custom-class{
        width: 24px !important;
        height: 24px !important;
        display: block;
        font-size: 12px !important;
        content: “” !important;
        background: url(https://wordpress-1075938-4820337.cloudwaysapps.com/wp-content/uploads/hamburger.png);
        background-size: contain;
        background-repeat: no-repeat;
        }

        Ensure the class added in the HTML markup matches the class in the CSS code. Then change the background URL in the CSS code to the URL of the icon file you uploaded on your Media Library.

  6. I really wish there was a full list of all the icons available, and all their associated search terms that work within Divi. That way I could just copy the code in to use inline with text! Font-awesome had this, it was much better.

  7. Anyone see a cookie in there anywhere

  8. Hi, how abbout Tiktok and the new instagram logos?

  9. Similar to the question regarding Twitter/X, are there also plans to add the new Threads logo?

  10. Are there plans to add the new Twitter X logo?

    • Hi Randy, hope you’re doing well. Just wanted to let you know that at the moment, we don’t have the new Twitter logo available on our products. The company is in the midst of a rebranding process and we are waiting for things to settle down. I’ve gone ahead and passed on your request to our development team so they can look into it. Hopefully, we’ll be able to provide you with a fresh new Twitter icon in the near future. As of now, there isn’t anything new to share just yet. Thanks for your understanding.

      • Hi Charry – any news on this?

  11. Is this list of HTML entities no longer applicable?

  12. 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.

    Regards,

    Charles

  13. 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

    • It’s happening to me too “Sorry, you are not allowed to upload this file type.”
      Please assist

      • Install Easy SVG Support plugin on WordPress. After that try to upload again and it will work.
        Once you’ve uploaded all custom fonts you can deactivate and delete this plugin again.

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

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

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

  17. 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?

  18. Really looks awesome thanks

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

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

  21. Thanks a lot guys! Great work!

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

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

  23. its very helpful for every design, making ui/ux attractive

  24. 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!

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

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

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

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

  29. 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)

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

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

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

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

    Regards

  33. 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?

    Thanks!

  34. 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

  35. 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

  36. I would kill for a Houzz social icon.

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

  38. 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.

  39. 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.

    Thanks!

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

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

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

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

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

    Regards

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

  46. 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.

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

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

  49. Awesome package. Thanks so much!

  50. 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!!!

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

  52. 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

    css:

    .icon_stop_alt,
    arrow_triangle-right_alt {
    font-size: 48px;
    color:#6C9;
    text-decoration: none !important;
    cursor:pointer;
    }

    html:

    Jquery:
    $(‘.icon_stop_alt’).click(function(){
    $(this).removeClass(‘icon_stop_alt’).addClass(‘arrow_triangle-right_alt’);
    });

    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)

  53. 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…

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

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

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

    Thank you 🙂

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

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

  59. 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!

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

  61. 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.

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

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

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

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

  66. 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 (www.razoo.com) and Amazon. Thanks!!

  67. 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.

    Thanks!

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

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

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

    Thank you 🙂

  71. 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 !

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

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

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

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

  76. 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?

  77. 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.

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

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

  80. 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!

  81. 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! ??
    https://wordpress.org/plugins/elegant-themes-icons/

    Any idea?

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

  82. Thanks a lot for your fabulous work 🙂

  83. 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 😉

  84. 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.

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

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

  87. 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 http://bit.ly/1sHqc2I

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

  89. 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.

  90. 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 ….

  91. 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.

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

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

  94. Just what I needed. Thank you

  95. Thanks for these! I really needed them!

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

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

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

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

    Fantastic icon fonts!

  100. 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!

    Thanks!

    • Me too!

  101. Great icon fonts.

    Thank you very much

  102. 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.

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

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

    Regards

  105. Amazing icons for my needs.

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

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

  108. Thank you for sharing icons

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

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

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

    • GitHub icon FTW, please consider adding this. I really want to incude a GitHub icon on my page footer but it’s a PITA to add manually editing code.

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

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

  114. 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)

  115. 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!

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

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

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

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

  120. 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!

  121. Thats great. I love it 🙂

  122. 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…

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

  124. I love it!

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

    Cheers

  126. 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

    Thanks…..

  127. Thank for arsive 🙂

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

  129. 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

    • 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…

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

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

  132. 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!

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

    • Add style=”transform: scale(-1, 1);”

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

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

    • 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

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

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

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

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

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

  138. 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.

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

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

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

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

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

  144. Amazing work thank you !

  145. 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?

    Thanks!

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

  147. 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 –
      http://www.seojus.com/elegant-icon-font-tutorial/

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

  149. Thanks Nick, it helps a lot.

  150. Thanks again!

  151. This is great!

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

  152. 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 http://www.wayneharbar.pwp.blueyonder.co.uk/index.html

    Thanks, Wayne

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

  154. Thank you very much!

  155. thanks a lot. i like it.

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

  157. awesome!!! Thanks!!

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

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

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

  161. amazing collection of icons! thanks!

  162. 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.

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

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

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

  166. 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,
    Florian

  167. Great icon package for web design. Thanks Nick

  168. 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.

    Thanks!

  169. Amazing collection of icons! Thanks!

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

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

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

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

  174. Very nice, thanks for the hard work

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

  176. Very Nice icon and helpful for all. Thanks for sharing

  177. What an amazing icon collection! Thanks for sharing

  178. Well – ELEGANT THEMES does it again!

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

  179. 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.

  180. 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 🙂

  181. 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…

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

  183. Really nice fonts. Thanks!

  184. 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.

  185. Great collection! Thanks a lot.

    • Thanks so much for these! Really needed them!

  186. Great icons! Thanks for sharing!

    • Thank you for providing this service!

    • 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.

  187. 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!

  188. Spectacular! Thank you!!

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

  190. 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.

  191. 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!

  192. 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.
    Jose

    • Sweet! Thanks!

  193. Great stuff – thanks for sharing!

  194. Thanks for offering great work

  195. Nice icons! Will use. Thax

  196. 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

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

  198. Bravo Nick!

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

  199. I found the following article which makes the process a bit clearer:
    http://gomakethings.com/icon-fonts/

    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!
      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!

    • 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!

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

  201. Thanks a lot! 🙂

  202. 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.

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

    Cheers!

  204. Fabulous icons…very helpful to developers…

  205. 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!

  206. Thanks! :o)

  207. Awesome stuff guys, thanks!

  208. Fantastic – Thanks!

  209. 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?

  210. 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.

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

  212. Thanks guys, these look great!

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

  213. 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).

  214. 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!

  215. Very nice. Thank you.

  216. 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

  217. Very nice. I like free stuff.

  218. 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?

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

    Thanks you so much, Nick 🙂

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

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

    Thanks for creating it.

    • Awesome!

  221. 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.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Cyber Monday Sale!
Get The Deal
Before It's Gone!
Get Started With Divi