- Home
- Blog
- Web Design Free Icon Fonts for Web User Interfaces
Free Icon Fonts for Web User Interfaces
-
William CraigCEO & Co-Founder
-
6 minute read
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs).
What are Icon Fonts?
Icon fonts are font files that have symbols and glyphs (e.g.
arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.
And because they’re treated like web fonts, icon fonts:
- Have great cross-browser support (even IE6, for example, can render web fonts using the
@font-face
rule) - Can be scaled on-the-fly if the user adjusts their web browser settings
- Can be rendered with different colors
- Can embody font- and text-related CSS properties (like
text-shadow
andgradient
)
See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page. To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.
Free Icon Fonts
Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.
1. Foundation Icons Fonts
Number of icons: 137. License:MIT Open Source License.
2. Sosa icon font
Number of icons: 121. License: Custom license (use in commercial projects permitted).
3. Font Awesome
Number of icons: 196. License:Creative Commons Attribution 3.0 Unported.
4. Iconic Icon Set
Number of icons: 172. License:SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.
5. Raphaël Icon-Set
Number of icons: 116. License:MIT License.
6. PulsarJS @FontFace
Number of icons: 73. License:SIL Open Font License.
7. IcoMoon
To create a font file, you’ll need to use the IcoMoon web app. Number of icons: 316. License:Attribution-ShareAlike 3.0 Unported.
8. Typicons
Number of icons: 88. License:Creative Commons Attribution 3.0 Unported.
9. Entypo
Number of icons: 100+. License:Creative Commons Attribution 3.0 Unported.
10. Heydings Icons
Number of icons: 60. License:Attribution-NoDerivs 3.0 Unported.
11. Heydings Controls (App Icon Font)
Number of icons: 50. License:Attribution-NoDerivs 3.0 Unported.
12. JustVector Social Icons Font
Number of icons: 62. License:Free Art License.
13. Modern Pictograms
Number of icons: 86. License:SIL Open Font License.
14. Brandico
Number of icons: 18. License:SIL Open Font License and Attribution-ShareAlike 3.0 Unported.
15. Signify Lite
Number of icons: 38. License: Custom license (use in commercial projects permitted).
16. Web Symbols typeface
Number of icons: 78. License:SIL Open Font License.
17. Social Media Icons
Number of icons: 74. License: Custom license (use in commercial projects permitted).
18. ikoo
Number of icons: 65. License:Attribution-ShareAlike 3.0 Unported.
Icon Font Resources
Below are some good icon-font-related articles and tutorials on the Web.
- HTML for Icon Font Usage
- Fontello: A web tool for creating a font file from a variety of free icon fonts.
- Displaying Icons with Fonts and Data- Attributes
- Making, Using, & Bulletproofing Icon Fonts
Related Content
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX provides digital marketing solutions with expert marketers, designers, and developers to increase visibility, conversions, and revenue. Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator


Web Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator