The Best Free Icon Font Libraries In 2018

Udemy.com Home page wide-banner

 

If you are or have been a web-designer or developer in the past, you will probably know the pain of doing multiple searches on a search engine for the likes of ‘free icons’ or ‘icons for web-design’. In many cases the results returned are some image based icons that need a attribution in some way or another or in some cases need to be paid for. That pain is no more if you know about the libraries that are demoed in this article.

If you love things for free, then this article is especially for you, all of the web-font libraries are completely free to use. Meaning no cost, no attribution, no nothing, although we do owe thanks to the creators and contributors to these fantastic resources though!

Font Awesome

Coming in at number is the very special Font Awesome, and it is just that, awesome. This exquisite library for web-designers was released in August of 2012. Since then, it’s become a prominent tool among web-designers and now even has it’s own Pro Version. To prove it’s popularity among developers, the library has racked up over fifty-thousand stars on GitHub!

The team behind Font Awesome released version 5 in 2017 and now offers a total of 3,978 icons to play with. Granted that figure is if you have the pro version, if not, there are still 1,341 to use. Let’s see some of them in action.

See the Pen Font Awesome 5.0 Examples by Danny Englishby (@DanEnglishby) on CodePen.0

These pixel perfect icons come in a huge variety of themes grouped into helpful and meaningful sections like some of the following –

  • Education
  • Business
  • Shapes
  • Maps
  • Animals
  • Accessibility

The web interface provided by Font Awesome in itself is a designers dream, it’s very intuitive and speeds up the search for icon process by a mile.

Licensing & Usability

This library is free to use in commercial project as it is personal ones too. See the details for the license in the link below

FA Free License

So, how do you use it?

The easiest way, and is the same way that it was used in the previous CodePen, is to link up with the handy Font-Awesome Content Delivery Network. This will slightly impact loading times for your website but if your willing to take the hit, it’s the fastest way to get set-up. Alternatively, you can download the full source and reference the resources locally. Their getting started page has many sections of viable ways to use the icons in your own project.

If you want to get started right away, you can use the following HTML below which has the demo icons used above included –

<!DOCTYPE html>
<html>
    <head>
        <title>Demo HTML</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <style>
            body {
                background: #1d1e23;
            }
            i {
                font-size: 2em;
            }
            .blue {
                color: #2196f3;
            }
            .red {
                color: #f44336;
            }
            .flex-icon-demos {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }

            .flex-icon-demos>div {
                margin: 1em 2em;
            }

        </style>
    </head>

    <body>

        <div class="flex-icon-demos">
            <div>
                <i class="fas fa-graduation-cap blue"></i>
            </div>

            <div>
                <i class="fas fa-laptop-code blue"></i>
            </div>

            <div>
                <i class="fas fa-chalkboard-teacher blue"></i>
            </div>

            <div>
                <i class="fas fa-theater-masks blue"></i>
            </div>

            <div>
                <i class="fas fa-user-graduate blue"></i>
            </div>
            <div>
                <i class="fas fa-school blue"></i>
            </div>
        </div>

        <div class="flex-icon-demos">
            <div>
                <i class="fab fa-blogger red"></i>
            </div>

            <div>
                <i class="fab fa-bluetooth red"></i>
            </div>

            <div>
                <i class="far fa-bell-slash red"></i>
            </div>

            <div>
                <i class="fab fa-apple-pay red"></i>
            </div>

            <div>
                <i class="fas fa-keyboard red"></i>
            </div>
            <div>
                <i class="fas fa-user-secret red"></i>
            </div>
        </div>  
    </body>
</html>

Material Icons

Material Icons are a set of beautifully rendered, pixel perfect visuals that use the Material Design concepts. Both the icons and design came from Google and are completely free to use! Don’t get me wrong though, you are not restricted to using these icons with the material design CSS framework, you can use them in any project.

The one rule that Google has, which I find quite humorous is that users of the icons do not try to sell them. Which is more than fair! As of the time of writing, the total icons available with this library is 1019.

Let’s check out some of these amazingly sharp icons that can be used across web, iOS and Android applications alike.

See the Pen Material Icons Examples by Danny Englishby (@DanEnglishby) on CodePen.0

Some of the icons will probably be familiar to you if you’ve used an Android operating system or, some of Googles web-applications like maps. Within the libraries inventory you will find a vast selection of themed visuals, some of which include –

  • Maps
  • Image
  • Communication
  • Action
  • Alert

Licensing & Usability

As specified earlier, Google icons are free to use as-long as you don’t attempt to sell them. This means they are free for both commercial and personal.

Apache License 2.0

So, how do you use it?

Just like Font Awesome, Google material Icons are highly accessible too, whether you want them locally or want to reference them directly. See the libraries guide which goes over how to use them and how to setup with helpers such as bower and NPM. Again with Material Icons, the simplest and quickest way to start using them is to link to them via the Google web-fonts network.

If you want to use the web-font method, feel free to use the HTML markup below which already has this method referenced with some example icons to play with.

<!DOCTYPE html>
<html>
    <head>
        <title>Demo HTML</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">
        <style>
            body {
                background: #1d1e23;
            }
            .material-icons {
                font-size: 2em;
            }
            .blue {
                color: #2196f3;
            }
            .red {
                color: #f44336;
            }
            .flex-icon-demos {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }

            .flex-icon-demos>div {
                margin: 1em 2em;
            }


        </style>
    </head>

    <body>
        <div class="flex-icon-demos">
            <div>
                <i class="material-icons red">free_breakfast</i>
            </div>

            <div>
                <i class="material-icons red">mood</i>
            </div>

            <div>
                <i class="material-icons red">smoke_free</i>
            </div>

            <div>
                <i class="material-icons red">notifications_active</i>
            </div>

            <div>
                <i class="material-icons red">pages</i>
            </div>
            <div>
                <i class="material-icons red">poll</i>
            </div>
        </div>

        <div class="flex-icon-demos">
            <div>
                <i class="material-icons blue">toggle_on</i>
            </div>

            <div>
                <i class="material-icons blue">toggle_off</i>
            </div>

            <div>
                <i class="material-icons blue">add_location</i>
            </div>

            <div>
                <i class="material-icons blue">directions_bike</i>
            </div>

            <div>
                <i class="material-icons blue">flight</i>
            </div>
            <div>
                <i class="material-icons blue">local_bar</i>
            </div>
        </div>  
    </body>
</html>

Note: One thing that is really cool about the ways these icons work is that you specify the icon name between the HTML i tags. For example –

Flight Icon

<i class="material-icons">flight</i>

Poll Icon

<i class="material-icons">poll</i>

Notice the text within the tags was changed and this will change the icon completely. This is very handy when working with dynamic code.

Typicons

This library was fortunately created by a digital designer who goes by the name of Stephen Hutchings. It’s completely free to use and offers 336 ultimate pixel-perfect rendering icon-fonts. Don’t overlook this library because of its total number of icons, though. Whilst there might not be many, the resource is of course a lot smaller when compared to others. Consequently, when using the library, download times are much quicker whether you request via the web or have it installed locally.

The interface for these icon fonts is beautiful to say the least, it features instant-search capability when looking for icons and each grows-on-hover when browsing too. See the image below for what the interface looks like –

typicon interface screenshot

Typicons offers essential icons that would be sufficient for standard websites, mobile applications and web-applications. The library even has an icon for all main social media networks, meaning creating share buttons with them would be a breeze. See some of them in action below  –

See the Pen Typicons Examples by Danny Englishby (@DanEnglishby) on CodePen.0

Licensing & Usability

Typicons can be used freely in personal and commercial projects as long as they are not sold for direct profit. See the license the library is released under below

SIL Open Font Licence

So, how do you use it?

Typicons comes with a easy-to-follow setup guide for setting up locally in your project. The guide shows how to install with bower or you can go-to the GitHub repository for instructions to setup with NPM. Alternatively, and the quickest way to use them is linking up to the resources on CDNJS, allowing you to reference straight from your HTML without the need to store the files locally.

Feel free to use the following HTML with the icons pulled from the Content Delivery Network.

<!DOCTYPE html>
<html>
    <head>
        <title>Typicons example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background: #1d1e23;
            }
            .typcn {
                font-size: 3em;
            }
            .blue {
                color: #2196f3;
            }
            .red {
                color: #f44336;
            }
            .flex-icon-demos {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }

            .flex-icon-demos>div {
                margin: 0.6em 2em;
            }
        </style>
    </head>

    <body>
        <div class="flex-icon-demos">
            <div>
                <span class="typcn typcn-html5 blue"></span>
            </div>

            <div>
                <span class="typcn typcn-css3 blue"></span>
            </div>

            <div>
                <span class="typcn typcn-social-instagram blue">
            </div>

            <div>
                <span class="typcn typcn-social-twitter blue">
            </div>

            <div>
                <span class="typcn typcn-social-facebook blue">
            </div>
            <div>
                <span class="typcn typcn-social-pinterest-circular blue">
            </div>
        </div>

        <div class="flex-icon-demos">
            <div>
                <span class="typcn typcn-weather-downpour red">
            </div>

            <div>
                <span class="typcn typcn-watch red">
            </div>

            <div>
                <span class="typcn typcn-world red">
            </div>

            <div>
                <span class="typcn typcn-plug red">
            </div>

            <div>
                <span class="typcn typcn-thumbs-ok red">
            </div>
            <div>
                <span class="typcn typcn-info-outline red">
            </div>
        </div>  
    </body>
</html>

Devicons

Devicons deserves it’s place in this list for just being a pure-dev icon set. Now, with this library, anytime you want to put a logo of your favorite technology onto your website or app with pixel perfect finish, you can! These logo-style-fonts are especially great for freelancer’s websites, being able to put sharp visuals of the languages and technologies you specialize in swiftly. Technologies and libraries including NodeJS, SaSS, Less, PHP, MySQL and many more, over a hundred in fact.

Let’s see some in action, there is a 100% guarantee that you’ll recognize some of these logos!

See the Pen Devicons Examples by Danny Englishby (@DanEnglishby) on CodePen.0

Licensing & Usability

Use Devicons in both commercial and personal projects alike, being released under the MIT license means everyone can use these brilliant icons without any hassle.

MIT Licence

So, how do you use it?

It’s worth noting here that once the library is downloaded into your project, there are three different ways to make them render into your page.

  1. Specifying within the CSS class
  2. Using CSS Psuedo content codes
  3. Using escaped HTML characters

There is a full cheat-sheet dedicated to the pieces of code that initiate the render and also displays some examples too.

Let’s get back to using the library in your own project. Simply install by using bower or NPM package manager. Alternatively, as all of the above icon-sets, you can use the dedicated JSDelivr content delivery network with the following code –

<link href='//cdn.jsdelivr.net/npm/devicons@1.8.0/css/devicons.min.css' rel='stylesheet'>

Use the following pre-made HTML to get started blazing fast –

<html>
    <head>
        <title>Devicons demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                background: #1d1e23;
            }
            .devicons {
                font-size: 3em;
            }
            .blue {
                color: #2196f3;
            }
            .red {
                color: #f44336;
            }
            .flex-icon-demos {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }

            .flex-icon-demos>div {
                margin: 0.6em 2em;
            }

        </style>
    </head>

    <body>  
        <div class="flex-icon-demos">
            <div>
                <span class="devicons devicons-git blue"></span>
            </div>

            <div>
                <span class="devicons devicons-github_alt blue"></span>
            </div>

            <div>
                <span class="devicons devicons-java blue">
            </div>

            <div>
                <span class="devicons devicons-python blue">
            </div>

            <div>
                <span class="devicons devicons-php blue">
            </div>
            <div>
                <span class="devicons devicons-nodejs blue">
            </div>
        </div>

        <div class="flex-icon-demos">
            <div>
                <span class="devicons devicons-drupal red">
            </div>

            <div>
                <span class="devicons devicons-sass red">
            </div>

            <div>
                <span class="devicons devicons-grunt red">
            </div>

            <div>
                <span class="devicons devicons-npm red">
            </div>

            <div>
                <span class="devicons devicons-linux red">
            </div>
            <div>
                <span class="devicons devicons-android red">
            </div>
        </div>  
    </body>
</html>

Summary

The four icon-font-packs that have been shown in this article are pretty much as good as they get in 2018. Make no mistake, there are plenty more out there, but you would be seeing very-similar fonts in terms of meaning in each library. That’s why this article compiles the libraries that are the most broad, unique and give the most bang for your buck, so-to-speak.

Interesting Links

If these icon-sets just ain’t enough for your project though, Speckyboy wrote an amazing article, listing 50 free-to-use icon-sets for web and mobile projects. These will surely keep you busy for a while!

The Best Free Icon Font Libraries In 2018

Leave a Reply

Your email address will not be published.