Elegant Themes Blog

Stay up to date with our most recent news and updates

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

Posted on August 7 by in Resources | 1,141 comments

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

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!

Complete Set and Unicode Reference 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

1,141 Comments

  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

  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?

  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.

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

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

  14. Fabulous icons…very helpful to developers…

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

    Cheers!

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

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

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

  19. Bravo Nick!

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

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

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

  22. Nice icons! Will use. Thax

  23. Great stuff – thanks for sharing!

    • Sweet! Thanks!

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

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

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

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

  28. Spectacular! Thank you!!

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

    • Thanks so much for these! Really needed them!

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

  31. Really nice fonts. Thanks!

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

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

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

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

  36. Well – ELEGANT THEMES does it again!

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

  37. What an amazing icon collection! Thanks for sharing

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

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

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

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

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

  43. Great icon package for web design. Thanks Nick

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

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

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

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

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

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

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

  51. Thank you very much!

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

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

  54. This is great!

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

  55. Thanks Nick, it helps a lot.

  56. 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/

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

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

  59. Amazing work thank you !

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

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

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

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

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

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

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

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

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

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

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

  71. Brilliant stuff! Quite the comprehensive collection you’ve produced. :)

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

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

  74. How Can We use the Unicodes? :(
    Is just put in HTML Text Module?

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

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

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

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

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

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

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

  82. You’ve done a great job with these icons! Thank you :)

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

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

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

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

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

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

  89. This is awesome …. Thank you for sharing these fabulous icon :D

  90. Thank you for sharing icons

  91. Just downloaded, thanks :) I’ll share it with my facebook group also :)

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

  93. I downloaded, thank you very much :) I’ll share it on my facebook page.

    Regards

  94. Just downloaded this set of icons :) Thanks! Now I can replace some of my image icons with this neat set.

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

  96. Great icon fonts.

    Thank you very much

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

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

    Fantastic icon fonts!

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

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

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

  102. Thanks for these! I really needed them!

  103. Just what I needed. Thank you

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

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

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

Leave a Reply

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

Current day month ye@r *

Join 243,989 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today