How to Use SVG Files in Figma, Webflow & React

SVG illustrations are one of the most versatile assets you can add to a project. They scale perfectly at any resolution, can be styled with CSS, and are tiny in file size. But the workflow for using them varies depending on your tool. This guide covers the three most common environments: Figma, Webflow, and React.

Using SVG illustrations in Figma

Method 1: Drag and drop

The simplest method. Download your SVG file from SketchValley, then drag it directly onto your Figma canvas. Figma will import it as a vector group that you can expand and edit.

Method 2: Import via the menu

1. In Figma, go to File → Place image… (or press Ctrl/Cmd + Shift + K)
2. Select your SVG file
3. Click to place it on the canvas

Editing SVG colors in Figma

Once imported, you can ungroup the SVG layers and edit individual fill colors:

1. Double-click the illustration to enter the group
2. Select a shape layer you want to recolor
3. In the right panel, click the fill color swatch and enter your brand color
4. To select all shapes with the same color, right-click → Select layer → Select all with same fill

Resizing without distortion

Always hold Shift while resizing to maintain the aspect ratio, or click the lock icon (🔗) in the right panel before resizing.

Exporting from Figma back to SVG

If you've made edits in Figma and want to export the result as SVG:

1. Select the frame or group
2. In the right panel, scroll to Export
3. Click +, choose SVG
4. Click Export

Using SVG illustrations in Webflow

Option 1: Upload to asset manager (recommended for most cases)

1. In Webflow Designer, open the Assets panel (the image icon in the left sidebar)
2. Click Upload and select your SVG file
3. Drag the asset onto a Div block or use it as an Image element

This is the fastest method but limits your ability to style the SVG with CSS (it's treated as an opaque image).

Option 2: Embed inline SVG (for styling and animation)

1. Open your SVG file in a text editor and copy all the code
2. In Webflow, add an Embed element (+ → Embed)
3. Paste the SVG code into the HTML Embed dialog
4. Click Save & Close

With inline SVG you can target elements with CSS classes, change fill colors in Webflow's custom code panel, and even add CSS animations.

Setting responsive sizing in Webflow

After adding the illustration, set its width to 100% and height to auto in the Style panel. This makes it responsive across breakpoints automatically.

Using SVG illustrations in React

Method 1: Import as an img tag (simplest)

import astronautSvg from './astronaut.svg';

function Hero() {
  return (
    <img
      src={astronautSvg}
      alt="Astronaut illustration"
      width={400}
      height={400}
    />
  );
}

Simple and fast, but you can't style internal SVG elements with CSS.

Method 2: Import as a React component with SVGR (best for customisation)

If you're using Create React App or have SVGR configured in Vite/webpack, you can import an SVG as a component:

import { ReactComponent as Astronaut } from './astronaut.svg';

function Hero() {
  return <Astronaut className="hero-illustration" width={400} />;
}

Now you can target internal SVG classes with CSS or pass props to change colors:

/* In your CSS */
.hero-illustration .primary-color { fill: #586EFF; }
.hero-illustration .secondary-color { fill: #F3F4F6; }

Method 3: Inline SVG as JSX

For full control, paste the SVG directly into your JSX. Remember to convert HTML attributes to JSX equivalents:

• class → className
• stroke-width → strokeWidth
• fill-rule → fillRule
• clip-path → clipPath

You can use tools like svg2jsx.com to automatically convert SVG code to JSX.

Making SVG colors dynamic with React props

function Illustration({ primaryColor = '#586EFF', size = 400 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 800 600">
      <circle cx="400" cy="300" r="200" fill={primaryColor} />
      {/* rest of SVG */}
    </svg>
  );
}

// Usage
<Illustration primaryColor="#FF6B6B" size={300} />