10 Useful & Free Font Icons You Should Bookmark

As more and more devices adopt high-definition screens, font icons are becoming the popular choice to adopt. It is resizeable without compromizing quality and customizeable through CSS. We can easily change the color, the size, and even animate font icons with CSS3. Plus it is resolution-independent which makes it look crisp on any screen density.

FontAwesome is by far one of the most popular font source, with a huge collection of icons. But it is highly unnecessary to download the whole collection when you need to use just a few. Here are 10 alternative sources of well-crafted font icons that I hope you would find useful at times to build your next great websites and apps in place of FontAwesome.

StackIcons

StackIcons are font icons for over 60 modern social brands. It comes with CSS, allowing you to style your font in many container shapes. You can get your social brand icons in circles, squares or with rounded edges. You can also color the icons in more than one color, giving you more realistic brand colors.

License: SIL Open Font and MIT

Twemoji Awesome

Twemoji is an open source emoticon project from Twitter. Elle Kasai has ported it to a font icon called Twemoji Awesome. All class names to display the icons are the same as the Twemoji Cheat Sheet, but you need to use a dash instead of an underscore, that’s all. Here is an example of how we add the hatching_chick icon:

<i class="twa twa-lg twa-hatching-chick"></i>

License: MIT and CC-BY for the Emoticon graphics

Font Diao

Font Diao is a collection of font icons from popular website or company based in China such as Alibaba, Alipay, WeChat, Xiaomi, and Weibo. The font may come into useful when you are building wesbites designated for China mainland audience who probably are familiar with this particular font.

License: Public License

Socialicious

Socialicious is a font that is exclusively built for popular social websites like Facebook, Twitter and Instagram. The font is built to work nicely with Bootstrap. Here is an example code to build a button with Bootstrap .btn class in conjunction with font classes.

<a class="btn btn-linkedin">
  <i class="icon-linkedin"></i> Connect with Linkedin
</a>

License: MIT License.

Octicons

Octicons is a set of font icons presented by GitHub, allowing you to use the same icon as used by GitHub on your project. There are more than 170 icons ready to apply on your next project.

Payment Font

If you use a payment gateway, you might want to grab these font icons. The package contains 95 sleep icons that are of popular payment methods or gateways such as Visa, American Express and more.

License: SIL OFL 1.1

Android Icons

This is the icon set created by Opoloo, previously known as the Android community. It includes 250 awesome icons in 5 sizes and 14 colors of native Android icons.

License: Attribution-ShareAlike 4.0 International

DevIcons

DevIcons is a set of font icons handcrafted by Theodore Vorillas. It contains 85 symbols and logos of familiar development applications such as GitHub icon, Gulp icon, Angular icon, and many other.

License: MIT

Open Iconic

Open Icon contains 223 icons ready to use with bootstrap, a framework or your own stylesheet. The font size is small, just 12.4Kb, which is about a quarter of what you can find in FontAwesome. The cool thing here is, these icons can be scaled down to 8px.

License: SIL.

Material Design Iconic Font

There are 15 categories of Google Material Design-inspired font icons in this pack. To use them, just install Material-Design-Iconic-Font.ttf, then use this cheatsheet. Copy paste the icons (not the unicode) into your project. You can enlarge the icons, give it borders, spin, rotate or flip it with CSS.

License: Attribution-ShareAlike 4.0 International

Now Read:50+ Free Symbol Fonts For Web Designers

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail