Using icons is one of the fastest and easiest way to make your design more interesting and eye-catching. Adding the appropriate icons can bring clarity to the UI, guiding the users through the page and showing them what every button or link does.
In this article we’ve collected 9 of the most reliable and polished icon packs the web has to offer. We’ve separated them into 3 categories: icon fonts, SVGs, and CSS icons. Before we get to the resources, let’s take a quick look at the pros and cons of each type:
Icon fonts work well when using a large number of icons with basic styling requirements. They are monochromatic, and best suited for simple shapes. Icon fonts are treated as text by browsers, so you’ll need to normalize them to avoid text anti-aliasing issues, and are supported in almost all browsers.
Scalable Vector Graphics (SVG) is an XML-based vector graphics format that can scale to any size without losing clarity. They can be displayed through using CSS, object tags, img tags, or inlined directly into your HTML. SVGs are supported in modern browsers, but lack support in older versions of IE and Android 2.3 and below.
CSS icons are most effective if you need to use a small amount of icons. All you need to do is to copy the CSS of the icon you like and paste it in your project’s stylesheet. They are not recommended if you are going to use a big number of icons. There is also the risk of icons looking different across browsers.
Check Out These 2018 Free Icon Download Websites
Feather is one of the most popular open-source icon sets. All the icons are designed on a 24×24 grid and have the same rounded corner style, giving them a consistent look. Projects for easy framework integration are available for Angular, Vue, and React.
Linea offers a huge selection of beautifully-crafted, modern icons that feature a sharp, outline-only look. All the icons are helpfully separated in different categories including Basic, Music, Ecommerce, Software and more.
Octicons is GitHub’s scalable set of handcrafted SVG icons. It includes GitHub and programming related icons like database icon, git operations icons and more.
A SVG icon set with beautiful pixel-perfect icons, designed for the modern web. In the project’s GitHub you can download a Node.js script for customizing the icon pack by including only the icons you really need.
The web’s most popular icon font (over 50,000 stars on GitHub), Font Awesome offers a large collection of icons that are built for scalability, universal browser support, and good accessibility for visually impaired users.