DEV Community

Cover image for 30 Icon datasets and more frontend resources

30 Icon datasets and more frontend resources

shrey vijayvargiya on July 01, 2024

Under the Hood The story begins when I want to find the icon library.  Frontend Roadmap Template || Ultimate Frontend Toolkit G...
Collapse
 
js7x7 profile image
JS •

Thank you :)
more icons:=>
fonts.google.com/icons
phosphoricons.com/

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya •

I've added this entire list on the website, will update your icon over there as well, ihatereading.in/t/gZvMKem2SWSorcSl...

Collapse
 
sahilatahar profile image
Sahil Atahar •

Nice article!

Also React Icons have a 30+ icons dataset in one place.

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya •

yeah, but i personally have some problem with react-icons their SVGs are not that good for production based app

Collapse
 
sheraz4194 profile image
Sheraz Manzoor •

React-icons are not good enough to be used. We may face difficulties while production.

Collapse
 
sheraz4194 profile image
Sheraz Manzoor •

Hmm, but I guess you missed the greatest of all library ---Lucide, which is compatible for various technologies like nextjs, buejs, solid, svelte and many others. I have written a detailed article on it. Check it out dev.to/sheraz4194/unleashing-the-p...

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya •

Added, thanks for the recommendation

Collapse
 
taqui profile image
Taqui •

Thanks for sharing this 🫡

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza •

👍

Collapse
 
rajusaha profile image
Raju Saha •

Great 👍 Resources

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri •

Thank you. This is also a great link for icons

iconify.design/

Collapse
 
kiraaziz profile image
kiraaziz •

is there a way to add to react app or something a icon picker ?

Collapse
 
sheraz4194 profile image
Sheraz Manzoor • • Edited

Yep, you can. With Lucide you can add icons to a variety of frameworks. Check this article, it explains how to add lucide icons in reactjs or nextjs app.
dev.to/sheraz4194/unleashing-the-p...

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya •

import the icon exported from the libraries mentioned above, then use any UI library Icon as a wrapper and render the icon or import SVG in react app