Free Icons for React — 47,000+ Icons Ready to Use

Browse and export 47,000+ icons optimized for React projects. Get React component code, raw SVG, or download as PNG/WebP. Copy-paste ready.

How to Use Icons in React Without Installing Packages

React is the most popular UI library, and icon packages like react-icons, lucide-react, and @heroicons/react are the standard approach. But they add dependencies, increase bundle size, and require tree-shaking configuration. IconFontToPNG lets you skip all that — search an icon, click, and get a standalone JSX component you can paste directly into any React project.

Why Get React Icons Here?

  • Zero dependencies — the component is self-contained SVG, no npm install
  • Works in Next.js, Remix, Vite, CRA — any React setup without config
  • Smaller than react-icons if you only need 5-10 icons
  • No tree-shaking needed — you only include what you paste
  • TypeScript compatible — returns standard SVG element, types inferred

React Icon Code Example

What you get when you copy an icon from IconFontToPNG:

const IconArrowRight = () => (
  <svg width="24" height="24" fill="#52c41a" viewBox="0 0 512 512">
    <path d="M502.6 278.6c12.5-12.5..."/>
  </svg>
);

export default IconArrowRight;

Best Icon Libraries for React

For React, Lucide (lucide-react) and Phosphor (@phosphor-icons/react) offer the best DX with tree-shaking and TypeScript. Heroicons (@heroicons/react) is ideal for Tailwind projects. But if you only need a few icons, a standalone JSX component from IconFontToPNG is the lightest option.

LibraryIconsReact PackageTree-shakeable
Lucide~1,500lucide-react / lucide-vue-nextYes
Heroicons~450@heroicons/react / @heroicons/vueYes
Phosphor~7,500@phosphor-icons/react / vueYes
Font Awesome~2,000@fortawesome/react-fontawesomeYes
Bootstrap Icons~2,000react-bootstrap-iconsYes
Tabler~5,000@tabler/icons-react / vueYes
Ionicons~1,300@ionic/react (built-in)Partial
Remix Icon~2,800remixicon-reactYes

Frequently Asked Questions

react-icons vs standalone SVG components — which is better?
react-icons is convenient for large projects using many icons from multiple libraries. Standalone SVG components are better when you need only a few icons — zero dependencies, zero bundle overhead, zero configuration.
Will the JSX component work with Next.js Server Components?
Yes. The generated component returns a plain SVG element — it works in both Server Components and Client Components without any special handling.
How to make the icon component accept props for size and color?
Add parameters to the function: const Icon = ({ size = 24, color = "#000" }) => (<svg width={size} height={size} fill={color}>...</svg>). This makes it reusable with different sizes and colors.
Are these icons free for commercial React apps?
Yes. All 47,000+ icons come from open-source libraries (MIT, Apache 2.0, ISC, CC0, CC BY 4.0). Free for commercial use.
Do I need to install anything?
No. IconFontToPNG runs in your browser. Search, click, copy the code. No npm packages, no build config.

Related Tools

Icons for Other Frameworks