I’m working on a React project and having trouble with SVG graphics that I exported from Figma. The SVGs look perfect in Figma but when I bring them into my React app they get messed up.
The main issues I’m seeing are:
Colors don’t match what I see in Figma
Shapes look stretched or squished
Overall the graphics just don’t look right
I’ve tried using the SVGs as img tags and also as background images in divs but both ways give me problems. I’m pretty new to React so maybe I’m missing something obvious.
Has anyone dealt with this before? What’s the best way to export SVGs from Figma so they work properly in React? Are there any settings I should be using when exporting or importing?
Any help would be great because right now my app looks nothing like my designs.
SVG problems usually come from the viewBox attribute. Figma sometimes gets this wrong or leaves it out entirely, which breaks rendering in React. Open your SVG file in a text editor and check that the viewBox matches your design’s actual dimensions. Also watch out for fill=“currentColor” - Figma loves using this, but it’ll inherit your CSS text color instead of the colors you want. Just replace those with the actual hex values to keep your colors right.
honestly, just use react-svg-loader or svgr to auto-convert your figma exports. way easier than cleaning up code manually. install @svgr/webpack, configure it, then import svgs like normal components. it handles jsx conversion and fixes those weird color/sizing issues too.
Had the same issue with Figma SVG exports in React. Usually it’s the viewport and aspect ratio settings causing problems. When you export, select the actual SVG elements - not the frame around them. Otherwise you get extra padding that messes up dimensions. Also check if your SVGs have embedded fonts or effects that don’t work well on web. I clean up the exported code by removing unnecessary groups and simplifying paths. Setting explicit width/height in the SVG tag works better than CSS dimensions. Figma sometimes exports with absolute positioning that breaks in different contexts.
I had the same issues when I started using Figma exports in React. The problem’s usually how Figma generates the SVG code. Skip the regular export - right click your element and hit “Copy as SVG” instead. Paste that code straight into your React component as JSX. You’ll need to change stroke-width to strokeWidth and class to className for React. This keeps the exact styling and dimensions way better than file exports. Also check you’re not adding CSS that overrides the SVG’s internal styles - width and height properties especially cause that stretching.