Top 10: Best Free Icon Fonts For Web Designers

Top 10: Best Free Icon Fonts For Web Designers

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

Github

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

Github

Icono Font

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

Github

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

Github

StackIcons

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

Github

Genericons

Genericons is an awesome lightweight generic looking icons kit, suitable for a blog or simple website.

5. Feather Icons

Github

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

Github | Github Webfont

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

Github

Octicons

Octicons is a scalable set of icons handcrafted by the GitHub team, based primary on SVG.

2. Ionicons

Github

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

Github

Font Awesome 5 & 4

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.

Become a more social person