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.
Number of icons: 240
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 intergration are available for Angular, Vue, and React.
Type: SVG, PNG, Icon font
Number of icons: 730+
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.
Number of icons: 170+
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.
Number of icons: 800
License: CC BY-SA 4.0
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.
Type: Icon Font
Number of icons: 675
License: SIL OFL 1.1
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.
Type: Icon Font
Number of icons: 260+
A great looking icon set by the team behind Ionic Framework. Offers more than 260 beautiful icons, some in a thick flat style and others in a modern thin-line look.
Type: Icon Font
Number of icons: 900+
The official icon set for Google’s Material Design language and all the icons in Android. It contains over 900 icons that are all crafted in a consistent material style, guaranteeing they will always look great when combined together.
Type: CSS Icons
Number of icons: 130
A collection of pure CSS icons. To implement them, all you need to do is download the .css stylesheet, create an empty HTML element of you choice, and add the appropriate classes. All the icons are made in such a way that they require only a single HTML element to work.
Type: CSS icons
Number of icons: 190
License: CC0 v1.0 Universal
Another iconset made entirely out of CSS. The project has an awesome demo website where you can inspect the icons and see how each part of their design is implemented. If you only need one or two icons, you can simply copy their CSS and paste it in your stylesheet without downloading anything.
Presenting Bootstrap Studio
a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.