// HomeIcon.tsx export const HomeIcon = () => ( <svg width="24" height="24" viewBox="0 0 24 24" > <path d="M3 12l9-9..." /> </svg> );
Figma Plugin

React Icon
Exporter

Export SVG icons from Figma as clean, production-ready React components.

TSX ComponentsSVG ExportCustom NamingBatch Export

What it does

One plugin. Clean icons. Ready for production.

Scan icons

Automatically detect all SVG icons in your Figma selection

Rename icons

Apply naming conventions before export (PascalCase, kebab-case)

Export React

Generate production-ready .tsx components with TypeScript types

Download ZIP

Get everything packaged in a single ZIP file

How it works

Three steps. That's it.

1

Select icons

Select the icons you want to export in Figma

2

Configure

Choose naming convention, folder structure, and options

3

Download

Get your React components as a ZIP file

Who it's for

👨‍💻

Frontend Developers

Stop copy-pasting SVG code. Export icons directly as React components.

🎨

Design Systems Teams

Maintain consistent icon naming across design and code.

🚀

Product Designers

Hand off icons to developers without the back-and-forth.

Simple pricing

7-day free trial. Cancel anytime.

Free
$0
  • Up to 20 icons per export
  • All export features
  • All naming conventions
Try Free
Most Popular
Pro
$9/month
or $79/year (save 30%)
  • Unlimited icons
  • Save & reuse presets
  • Priority support
Start Free Trial

Ready to export?

Install the plugin and start exporting icons in seconds.

Install Figma Plugin