9 FontAwesome Alternatives That Are Equally As Good

Using font icons is a popular way to display icons on your website, especially since custom fonts are better supported in CSS3. Fonts are resizable without compromising quality — they are resolution-independent, which makes them look crisp on any screen density, and they are also customizable through CSS. We can easily change the color, size, and even animate font icons with CSS3.

FontAwesome is one of the most popular sources for font icons, with a huge collection of icons. However, it is unnecessary to download the entire collection if you only need to use a few.

Here are some alternative sources of well-crafted font icons that I hope you will find useful when building your next great website or app, instead of using FontAwesome.

Flaticon

Flaticon is a definitive source for high-quality and versatile icons, with over 9.9 million vector icons available in various formats, including PNG, SVG, EPS, PSD, and CSS formats. The icon library has a user-friendly interface that allows you to search for assets by keyword, type, author, pack, or style. You can also customize the icons’ size, color, and background to suit your project’s needs.

License: Flaticon offers a freemium service. This means that you can access a lot of content for free, but there is a Premium membership available starting at $8.5 per month

StackIcons

StackIcons are font icons for over 60 modern social brands. They come 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 websites or companies based in China, such as Alibaba, Alipay, WeChat, Xiaomi, and Weibo.

The font may come in handy when you are building websites designated for a Chinese mainland audience who are likely familiar with this particular font.

License: Public License

Socialicious

Socialicious is a font that is exclusively built for popular social websites such as Facebook, Twitter, and Instagram. The font is designed to work nicely with Bootstrap.

Here is an example code to build a button with Bootstrap’s .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, which allows you to use the same icons as those used by GitHub on your project. There are more than 170 icons ready to be applied to your next project.

Android Icons

This is the icon set created by Opoloo, previously known as the Android community. It includes 250 awesome icons in five 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 the GitHub icon, Gulp icon, Angular icon, and many others.

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, simply install Material-Design-Iconic-Font.ttf and refer to this cheatsheet. Copy and paste the icons (not the Unicode) into your project.

You can enlarge the icons, add borders, spin, rotate, or flip them using CSS.

License: Attribution-ShareAlike 4.0 International