Which React icon library works best with Next.js?
Lucide React and Heroicons work cleanly with Next.js App Router. Import icons individually to keep bundle size small — avoid importing entire sets.
Best Icon Libraries for React Projects
9 curated react icons
Last updated: June 2026
If you are shipping a React or Next.js app, you do not want to manually paste SVG paths into every component. These libraries give you importable icon components, consistent sizing props, and tree-shaking so your bundle stays reasonable. I picked sets that are actively maintained and commonly paired with Tailwind or shadcn-style setups — not every icon font repackaged as a React wrapper.
IconsFree
CSS.gg
Explore a collection of over 700 open-source CSS-only icons at CSS.gg. Easily integrate these customizable icons into your web projects.
IconsFree
Eva Icons
Access a pack of beautifully crafted icons at Eva Icons. Use these scalable icons to enhance the visual appeal of your designs
IconsFree
Heroicons
Heroicons offers a collection of beautifully crafted SVG icons. Enhance the visual appeal of your websites and applications with these stylish icons
IconsFree
Iconoir
Iconoir provides a collection of open-source vector icons tailored for designers. Find and incorporate high-quality icons into your design projects.
IconsFree
Lucide.dev
Lucide.dev offers an open-source icon set specifically designed for developers. Access a collection of simple and intuitive icons to enhance your projects.
IconsFree
Material Symbols
Material Symbols are our newest icons consolidating over 2,891 glyphs in a single font file with a wide range of design variants.
IconsFree
Phosphor Icons
Discover an open-source icon set for design and development at Phosphor Icons. Choose from a comprehensive library of icons for your projects.
IconsFree
Remix Icon
Remix Icon is an open-source icon library with a vast selection of icons for your projects. Customize and integrate these icons easily into your designs.
IconsFree
Tabler Icons
Tabler Icons offers a premium and free icon set for various purposes. Explore a diverse collection of icons to enrich your designs and applications.
How to pick one
- Match the visual style to your UI — outline icons for dashboards, filled sets for marketing pages.
- Check whether icons are individual imports (better for bundle size) or a single heavy package.
- If you use shadcn/ui, Lucide is the path of least resistance; Heroicons pairs well with Tailwind UI patterns.
Frequently Asked Questions
Can I use the same icons in Figma and React?
Yes. Lucide, Heroicons, and Phosphor publish matching Figma community files and npm packages, so design and code can share the same icon names.
What is the best icon library for shadcn/ui?
Lucide is the default icon set for shadcn/ui and Radix-based components. It pairs with Tailwind sizing utilities and tree-shakes well in Next.js projects.
How do I reduce icon bundle size in React?
Import only the icons you use — e.g. `import { ArrowRight } from 'lucide-react'`. Never import full icon packs or wildcard modules in production apps.
Heroicons vs Lucide — which should React developers pick?
Lucide offers more icons and shadcn/ui integration. Heroicons fits Tailwind UI patterns with outline and solid variants. Both are free and MIT-licensed.
Related lists
Reviewed by Sergei Chyrkov · Last updated June 2026 · How we curate
Design Sweets Weekly
New picks, free tools, and deals — delivered to your inbox every week.
Trusted by 1500+ designers
No spam, just updates and sweets. Unsubscribe anytime.