DEV Community

Ryan Feigenbaum
Ryan Feigenbaum

Posted on • Originally published at ryanfeigenbaum.com on

My 5 Fave Free Icon Sets

My 5 Fave Free Icon Sets

Even the simplest user interface will need an icon or two. Not only do they convey information concisely–you can provide a Twitter icon rather than including the whole phrase "Share on Twitter"–they also provide an opportunity for enhancing the design of a page.

If a picture is worth a 1,000 words than an icon is worth at least a dozen

Whereas icon font libraries (a la Font Awesome) were the go-to for icons, the preferred method now is to use SVGs because of smaller file sizes, fewer network requests, and more customization options.

Phosphor

Phosphor icons are playful without being silly. They also give off some retro vibes, especially with their duotone variations.

The Phosphor Icons website has a beautiful and functional interface where you can easily copy the icon for various platforms or download it as a PNG or SVG.

Phosphor Icons

Platform Library Library URL
Figma Figma library / plugin
Vue Vue package
Svelte Phosphor Svelte
React React package
Other one-liner script

Remix Icons

I really like the design of remix icons. They also seem to have an icon for everything, which is appreciated. My least favorite thing, though, is that their website is slow to load. This seems like a recent development and they have an update in the works, so hopefully, it's fixed soon.

Remix Icon - Open source icon library

Platform Compatible Library
Figma Plugin (community)
Vue Vue package (unofficial)
Svelte Svelte package (unofficial)
React React package (unofficial)
CDN Icon font

Bootstrap Icons

Ever heard of Bootstrap? Lol. Despite the outcry of some, it's still going strong, and with the release of 5.0, they also dropped some sweet new SVG icons. The interface is super functional, with the only downside being that they don't offer PNGs for quick download.

Bootstrap Icons

Platform Compatible Library
Figma Plugin
Vue Vue package (unofficial)
Svelte Svelte package (unofficial)
React React package (unofficial)
CDN Icon font

Feather Icons

Feather icons offer a nice, soft design. They have an easy-to-use interface, but you can't copy SVG code or get a PNG, which is a limitation. Another downside is that Feather seems to have a smaller icon set than some of the others on this list, so you may find yourself searching elsewhere for supplements. Where Feather really shines, though, is in offering a robust API to easily insert icons into any project.

Feather – Simply beautiful open source icons

Platform Compatible Library
Figma Figma component library / plugin
Vue Vue package
Svelte Svelte package
React React package
JS API easy-to-use script

Iconduck

Iconduck is a little different from the others on this list. It's not a single, unified icon set, but rather a clearinghouse for thousands (118k+) of open-source icons. It's a great resource if you're looking for more stylized icons, a variety of styles, or icons that are closer to illustrations. Icons are made available as SVGS and PNGs, as you'd expect, and the search is blazing fast.

Free open source icons, illustrations, emojis and graphics - Iconduck

Platform Compatible Library
Figma Figma plugin / [plugin]
Vue
Svelte
React
API ⚠️ API access by request

Those are my five fave free icon sets, but I'm always on the hunt for new ones. Let me know what you like 😍

Also, be sure to sign up for my newsletter

Discussion (0)