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
- 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
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.
Number of icons: 137. License:MIT Open Source License.
3. Font Awesome
4. Iconic Icon Set
Number of icons: 172. License:SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.
Number of icons: 116. License:MIT License.
6. PulsarJS @FontFace
Number of icons: 73. License:SIL Open Font License.
To create a font file, you’ll need to use the IcoMoon web app. Number of icons: 316. License:Attribution-ShareAlike 3.0 Unported.
Number of icons: 88. License:Creative Commons Attribution 3.0 Unported.
10. Heydings Icons
11. Heydings Controls (App Icon Font)
Number of icons: 18. License:SIL Open Font License and Attribution-ShareAlike 3.0 Unported.
15. Signify Lite
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