11 Great Icon Fonts for Your Projects

Chris Sevilleja
👁️ 29,845 views
💬 comments

Icon fonts are great tools for building applications and websites nowadays. They have a great many benefits over fixed sized icons like:

  • infinitely scalable
  • stylable with CSS (change size, color, etc)
  • add stroke, borders, shadows with CSS
  • no HTTP request for an icon image

These are simple benefits, but so powerful when used in a real world application.

How to Use Icon Fonts

Icon fonts are incredibly easy to use. All you have to do is load the CSS file and you're good to go!

Table of Contents

    For example, in order to use FontAwesome fonts, we just have to load the CSS file and apply the appropriate classes to either an <i> or <span> tag.

    
    <!-- load the CSS file -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
    <!-- use the icon font -->
    <!-- use i or span tag -->
    <i class="ti-fire"></i>
    <span class="ti-user"></span>
    

    Let's get into the best icon fonts you can use for your projects today.

    FontAwesome

    fontawesoek

    Themify Icons

    themifyicons

    Foundation Icons

    foundation-iconfonts

    Ionicons

    ionicons

    Octicons

    octicons

    Linecons

    linecons

    Open Iconic

    openiconic

    Entypo

    entypo

    JustVector

    justvectoricons

    SVG Icons

    svgfonts

    Payment Icons

    paymentfonticons

    Bonus: SVG Developer Icons by Scotch

    svg-developer-icons

    Conclusion

    All these sets of icons are unique in their own way. Mix and match them as you create your own customized application or website.

    Chris Sevilleja

    176 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.