![[FCO]FreeCoursesOnline](https://onehack.us/uploads/default/original/3X/b/4/b4d2fc8468becec1e9976784dba394e5a378ec81.jpg){kind=small}
With an increasing usage of high-resolution screens, we’ve seen the rise of SVG icons. Unlike a bitmap graphic, SVG is scalable and resolution independent that allows it to remain sharp regardless of the size and the screen resolution.
So here we’ve put together the best resources from where you can get high-quality SVG icons. Some of the resources provide more than just the icons with convenient features to boost the productivity of designers and developers. (Source: hongkiat)
Without further ado, let’s jump in the full list.
Bootstrap Icons
An official icon collection from Bootstrap, one of the most popular HTML/CSS frameworks. It contains over 1500 icons in both SVG and SVG format giving you much flexibility. Though these icons are developed for Bootstrap, you can still use them with any other framework.
Boxicons
Boxicons contain more than 1500 icons grouped into several categories such as E-Commerce, Finance, and Music that allows you to easily sort and find the particular collection.
Each icon comes in a different format; not only you can select and download them as SVG, but you also use them as a Font icon and Web Components. It’s one of my go-to when I need icons for a website or application.
Feather Icons
Search over 200 beautifully designed icons. One thing that I love about the collection is that it allows you to customize the size, the stroke width, and the color before downloading the icons. On top of that, you can choose to download particular icons or download them all together.
Iconoir
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. I’m sure both designers and developers will appreciate this collection.
Ionicons
A collection of icons from Ionic framework designed for use on the Web, Mobile, or Desktop application. Each icon comes in three different styles: Outline, Filled, and Sharp. They are available as SVG and Font icons.
Tabler Icons
Contains over 1300 icons, Tabler is one of the perfect collections to put in your web or app design. It looks crisp, consistent, and customizable. Each icon is available in several other formats besides the 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.
Radix Icons
A set of icons designed with thin outline characteristics. Each icon is on 15×15 pixel and looks crisp on the screen. You can get the collection as Figma file, Sketch file, IconJar, SVG, or NPM. These various formats allow smooth collaboroation between designers and developers.
Heroicons
Heroicons is a set of icons designed by the people behind Tailwind. It provides a set of more than 200 icons. Each icon comes in 2 styles “Outline” and “Filled” and is available as an SVG, JSX, and Vue component library. For designers, you can download the Figma file for all the icons.
Ant Design 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 SVG.
It also comes in three styles — Outlined, Filled, Two-tone — and is compatible on either 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
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 for the home icons. This allows you to pick the most perfect fit of the icon for your site persona.
Material Design Icons
This is an icon collection from Google’s “Material” design system. It comes with an intuitive UI that gives convenience to implement the icon in several different platforms including the Web either with the SVG or icon, Android, iOS, Flutter, and it’s also specially integrated with Angular.
Octicons
An icons library from Github, these icons have been created for their “Primer” design system, specifically Github applications which makes it a perfect set if you build a website or application integrated with Github. You can install and use the icons through Gem (Ruby package), NPM, or as React.js component.
Icons Grommet
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.
CSS.gg
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 to ease collaboration between designers and developers when designing websites and transforming the design into code.
Typicons
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 resolution-independent that makes it looks sharp and crisp regardless of the screen resolution.
Happy learning!
