With the increasing usage of high-resolution screens, we’ve seen the rise of SVG icons. Unlike a bitmap graphic, SVG is scalable and resolution-independent, allowing it to remain sharp regardless of the size and the screen resolution.
So here we’ve put together the best resources from which you can get high-quality SVG icons. Some of the resources provide more than just icons, offering convenient features to boost the productivity of designers and developers.
Without further ado, let’s jump into the full list.
Testing SVG Support Across Web Browser Engines (Case Study)
SVG (Scalable Vector Graphics) is officially supported by all main web browsers, including Internet Explorer. The support spans... Read more
Home to the world’s largest icon library, Freepik has more than 10 million icons for personal or commercial use. Each icon is freely available in PNG format, allowing for easy integration into your projects, and simply requires attribution. However, premium members will gain access to download each icon in SVG format, with no need for attribution, and they will also have access to a bunch of pioneering features designed to increase productivity.
Flaticon is one of the largest libraries of icons on the web. It provides more than 10 million icons in several styles from which you can pick to download and customize them for your projects. These icons are available as PNG, SVG, EPS, PSD files, so they can be easily used with other graphic software. You can even find animated icons and stickers in its library. Plus, you can use Flaticon’s online editor to change the color and size of the assets.
An official icon collection from Bootstrap, one of the most popular HTML/CSS frameworks. It contains over 1500 icons in SVG format, giving you much flexibility. Though these icons are developed for Bootstrap, you can still use them with any other framework.
Boxicons contain more than 1500 icons grouped into several categories, such as E-Commerce, Finance, and Music, that allow you to sort and find the particular collection easily.
Each icon comes in a different format; not only can you select and download them as SVG, but you also use them as a Font icon and Web Components. It’s one of my go-tos when I need icons for a website or application.
Search over 200 beautifully designed icons. One thing that I love about the collection is that it allows you to customize the size, stroke width, and color before downloading the icons. On top of that, you can choose to download particular icons or download them all at once.
Iconoir is a free and open-source collection with more than 900 icons. It comes in several formats, including SVG, Font, React.js, and even Figma and Framer. Both designers and developers are sure to appreciate this collection.
A collection of icons from the Ionic framework is designed for use on Web, Mobile, or Desktop applications. Each icon comes in three different styles: Outline, Filled, and Sharp. They are available as SVG and Font icons.
Containing over 1300 icons, Tabler is one of the perfect collections to incorporate into your web or app design. It looks crisp, consistent, and customizable. Each icon is available in several formats besides SVG, including JSX, Data URI, React Component, Webfont, SCSS, plus it also shows you some examples on how you can apply the icons on a UI component.
A set of icons designed with thin outline characteristics is available. Each icon is 15×15 pixels and looks crisp on the screen. You can get the collection as a Figma file, Sketch file, IconJar, SVG, or NPM. These various formats allow smooth collaboration between designers and developers.
Heroicons is a set of icons designed by the people behind Tailwind. It provides more than 200 icons. Each icon comes in two styles: “Outline” and “Filled”, and is available as an SVG, JSX, or Vue component library. For designers, you can download the Figma file for all the icons.
This icon is part of the Ant Design system, but you can install the icon collection as a standalone component through NPM. Each icon is available as a React.js component and will be rendered as an SVG.
It also comes in three styles — Outlined, Filled, Two-tone — and is compatible with either the Light or Dark mode color scheme out-of-the-box. If you’re building a React.js application, this is one of the best icon collections to pick up.
Remix Icon is an amazing collection of more than 2000 icons. Some of the icons have several variations. For example, there are more than a dozen variations of the home icon. This allows you to pick the perfect fit for the icon that matches your site’s persona.
This is an icon collection from Google’s “Material” design system. It comes with an intuitive UI that provides convenience for implementing the icons on several different platforms, including the Web, either with SVG or icon files, Android, iOS, Flutter, and it’s also specially integrated with Angular.
An icon library from Github, these icons have been created for the “Primer” design system, specifically for Github applications, making it a perfect set if you’re building a website or application integrated with Github. You can install and use the icons through Gem (a Ruby package), NPM, or as a React.js component.
A set of SVG icons built as React.js components. You can find some unique icons in the collection, and some icons are even available in full color instead of just white and black.
This site provides around 700 high-quality icons. The icon collection is available in many formats, including CSS, SVG, TypeScript, Figma, Adobe XD, and as an API endpoint. This allows for ease of collaboration between designers and developers when designing websites and transforming the design into code.
Typicons is a collection of nice, modern-looking icons designed for web or native — mobile and desktop — applications. At the time of this writing, there are around 300 icons. Each is available in both SVG and icon font format and is resolution-independent, which makes it look sharp and crisp regardless of the screen resolution.