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.
| 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.
| 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
Top comments (0)