Figma SVG to React Component: A Clean, Reusable Workflow

A Figma icon can look perfect in the design file and still become a brittle React component: JSX warnings appear, the icon refuses to change color, two instances break each other's gradients, or CSS sizing crops the artwork.

The fastest reliable workflow is:

Export the smallest correct SVG from Figma, preserve its viewBox, convert attributes to JSX, expose normal SVG props, prefix internal IDs, and decide whether the icon is decorative or meaningful before shipping it.

If the raw file is already malformed, start with Figma SVG export troubleshooting. If it renders correctly but contains noisy markup, use the Figma SVG clean-code workflow first.

How do I turn a Figma SVG into a React component?

Turn a Figma SVG into a React component by copying the exported markup into a component function, changing SVG attribute names to JSX property names, keeping the viewBox, and forwarding React.SVGProps<SVGSVGElement>. Then test sizing, color, repeated instances, and accessibility in the real interface.

import type { SVGProps } from "react";

export function SparkIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      {...props}
    >
      <path
        d="M12 2 14.8 9.2 22 12l-7.2 2.8L12 22l-2.8-7.2L2 12l7.2-2.8Z"
        fill="currentColor"
      />
    </svg>
  );
}

Use it like any other UI component:

<SparkIcon className="h-5 w-5 text-violet-600" />

A React SVG component is an inline SVG represented as JSX, with its geometry packaged behind a reusable component API. Unlike an <img> element, it can inherit CSS color, receive event handlers, and expose accessibility attributes.

What should I fix before copying the SVG into React?

Export a dedicated frame or component from Figma, not a loose selection containing hidden layers or accidental bounds. Open the file directly in a browser before converting it. If it is clipped, blank, or visually wrong, React conversion will only hide the original problem inside a component.

Use this two-minute preflight:

• Export SVG at 1x from the intended component or frame.
• Confirm the file opens correctly by itself.
• Check that the viewBox includes strokes and shadows.
• Remove editor metadata and genuinely unused groups.
• Preserve masks, gradients, filters, and referenced <defs>.
• Decide which colors should stay fixed and which should be themeable.
• Save the untouched export so cleanup is reversible.

The viewBox defines the internal coordinate system used when React or CSS changes the displayed size. If the export is cropped, repair the bounds with the Figma SVG viewBox guide before changing JSX.

Which SVG attributes must change for JSX?

React uses camelCase property names for many SVG attributes. Convert stroke-width to strokeWidth, fill-rule to fillRule, and clip-path to clipPath. Change class to className, and convert a string style attribute into a JavaScript object or normal component CSS.

Raw SVG attribute	React JSX property	Common symptom if missed
class	className	Invalid property warning
stroke-width	strokeWidth	Warning or inconsistent stroke
stroke-linecap	strokeLinecap	Line ends render incorrectly
fill-rule	fillRule	Compound paths fill incorrectly
clip-path	clipPath	Clipping fails
stop-color	stopColor	Gradient stops fail or warn
style="..."	style={{ ... }}	JSX parse error

Do not delete unfamiliar attributes just to silence warnings. Confirm what each one controls first. For one asset, careful manual conversion is fine. For a large icon library, use an established SVG-to-JSX transform, then review color, sizing, IDs, and semantics yourself.

Should the component keep width and height?

Keep the viewBox; make width and height configurable. Fixed dimensions are acceptable defaults, but consumers should be able to override them through props or CSS. Deleting the viewBox is the dangerous move because the artwork then loses its scalable coordinate system.

Component type	Recommended sizing
UI icon	Keep viewBox; size with CSS classes or props
Logo	Keep aspect ratio; provide an intentional default width
Illustration	Use responsive width and height: auto
Full-width diagram	Use width="100%" with a correct viewBox
Fixed badge	Default dimensions, still overridable

Spread props after defaults when consumers should be able to override them. Spread them before locked attributes when a property must remain controlled by the component.

How do I make Figma SVG colors work in React?

Use currentColor for monochrome paths or strokes that should follow the component's CSS color. Preserve fixed brand colors, meaningful status colors, gradients, and multicolor illustration layers. Inline React components can inherit CSS; SVG files loaded through <img> generally cannot inherit color from the surrounding page.

export function ArrowIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 20 20" fill="none" {...props}>
      <path
        d="M4 10h12m-5-5 5 5-5 5"
        stroke="currentColor"
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

Do not replace every paint value globally. Keep fill="none" on outline icons and inspect masks or gradient references. The Figma SVG currentColor guide covers dark mode, hover states, and CSS variables in detail.

Why do repeated React SVG components break gradients or masks?

Repeated components can break when gradients, masks, clip paths, or filters use identical document-level IDs. Two Figma exports may both define id="paint0_linear"; a reference such as url(#paint0_linear) can resolve to the wrong definition after both SVGs appear inline on one page.

Prefix every referenced ID with an asset-specific name:

<defs>
  <linearGradient id="spark-paint0" x1="0" y1="0" x2="24" y2="24">
    <stop stopColor="#8B5CF6" />
    <stop offset="1" stopColor="#2563EB" />
  </linearGradient>
</defs>
<path fill="url(#spark-paint0)" d="..." />

The definition and every reference must change together. React's useId() can generate instance-level IDs, but static asset-specific prefixes are simpler when each component definition is unique. If problems appear only after a second instance renders, follow the duplicate SVG ID repair guide.

How do I make the React SVG accessible?

Treat decorative and meaningful graphics differently. If a nearby button label already says “Download,” its icon adds no information and should use aria-hidden="true". If the SVG communicates information on its own, give it an accessible name and role="img".

type IconProps = SVGProps<SVGSVGElement> & { title?: string };

export function StatusIcon({ title, ...props }: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      role={title ? "img" : undefined}
      aria-hidden={title ? undefined : true}
      aria-label={title}
      {...props}
    >
      <circle cx="12" cy="12" r="10" fill="currentColor" />
    </svg>
  );
}

An accessible name should describe meaning, not geometry. “Payment approved” is more useful than “green circle with check.” Avoid adding a duplicate SVG label when visible text already provides the same information.

When should I use an SVG file instead of a component?

Use a file when artwork is fixed, decorative, cacheable, and does not need to inherit interface state. Use a component when React must control color, size, labels, animation, events, or individual SVG properties. Components offer more control, but they add markup and can increase the JavaScript bundle when used carelessly.

Requirement	SVG file with <img>	React SVG component
Browser caching as one asset	Best	Limited
Inherit CSS text color	No	Yes
Change individual paths	No	Yes
Simple decorative illustration	Best	Usually unnecessary
Interactive icon state	Limited	Best
Accessible label per use	alt text	SVG/ARIA props
Many large illustrations	Best	Can bloat bundle

Do not turn every illustration into JSX because you can. A component is right for interface assets; a normal image is often leaner for large, fixed artwork.

What is the final Figma-to-React checklist?

Before merging, verify the asset inside the real component. Test multiple instances, small sizes, dark mode, keyboard states, server rendering, and the optimizer used in production.

• Raw Figma export renders correctly before conversion
• viewBox is present and artwork is not clipped
• SVG attributes use JSX-compatible names
• Component accepts standard SVG props
• Width and height can be overridden
• Themeable paint uses currentColor intentionally
• Internal IDs are unique and references still match
• Decorative icons are hidden from assistive technology
• Meaningful graphics have an accessible name
• Two instances render correctly on the same page
• Production build emits no SVG or hydration warnings

If the asset needs visual cleanup, open it in SVG Editor. If the starting artwork is a raster image rather than a true Figma vector, use Image to SVG, refine the paths, and then apply the same React handoff checklist.

FAQ

How do I turn a Figma SVG into a React component?

Export the asset as SVG, paste its markup into a component, rename SVG attributes to JSX camelCase, keep the viewBox, expose normal SVG props, and test the result at several sizes. Prefix internal IDs if the component can render more than once.

Should I import a Figma SVG as a file or use a React component?

Use an image file for fixed artwork that needs no runtime styling. Use a React component when the icon must inherit color, accept accessibility labels, respond to state, or expose SVG props.

Why does a Figma SVG fail when pasted into JSX?

Raw SVG can contain kebab-case attributes such as stroke-width, class instead of className, inline style strings, and duplicate IDs. React expects JSX-compatible property names and style objects.

Do I need width and height on a React SVG component?

Keep the viewBox and let component props or CSS control width and height. You may provide a sensible default size, but avoid deleting the viewBox because it preserves the SVG coordinate system and scaling behavior.

How do I make a React SVG icon accessible?

Mark decorative icons aria-hidden when adjacent text already provides the meaning. For meaningful standalone graphics, provide an accessible label and use role="img".