Fonts that instead of letters or numbers are filled with icons and graphs, that's basically an iconic font that you can use on your web projects instead of using images for your icons. In order to use an icon font, you just need to embed the icon webfont with CSS, then select the icon from character-map, normally with a specific class in a i or span element so the icon will show up in the element.
In this top, we'll share with you 10 of the most modern and easy to use icon fonts that you can use in your new projects to create interactive and intuitive applications.
10. Line Awesome
Line awesome is an icon font that can be used as replacement of Font Awesome with modern line icons using a single line of code. It offers a wide range of topics like medical, brand, video, directional, text edition, charts, form controls, transportation icons and a lot more.
9. Icono
Icono is a lightweight icon library that allows you to display nice icons with a single, without a font nor svg, just pure CSS.
8. Devicons
Devicons, is an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds(sic). It offers more than 100 icons ready to use in your next project. Created, handcrafted and coded by Theodore Vorillas Devicons contains 85 vectorized sharp glyphs . Devicons iconic font is free to use and licensed under MIT.
7. Stack Icons
Stackicons are icon fonts for the web, designed to do more —with multiple button shapes and a unique “multi-color” option. The Stackicons-Social font and Sass-based construction kit are free and open source, created by Parker Bennett.
6. Genericons
Genericons is an awesome lightweight generic looking icons kit, suitable for a blog or simple website.
5. Feather Icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe).
4. Material Design Icons
Material Design Icons is a huge 2400+ icons collection of the Community. Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
3. Octicons
Octicons is a scalable set of icons handcrafted by the GitHub team, based primary on SVG.
2. Ionicons
Ionicons is an open source (MIT licensed) premium designed icons for use in web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions. When used with Ionic, the ion-icon component will automatically use the correct version based on your platform. Additionally, when used outside of Ionic, both ios and md platforms can be chosen by the application.
1. Font Awesome
Font Awesome 4 is a full suite of 675 pictographic icons for easy scalable vector graphics on websites, created and maintained by Dave Gandy. After being used for a lot of web developers and designers, Font Awesome redesigned and built from scratch, publishing Font Awesome 5. On top of this, features like icon font ligatures, an SVG framework, official NPM packages for popular frontend libraries like React, and access to a new CDN.
If you know another awesome open source iconic web font, please share it with the community in the comment box.
