Using SVGs in code

Note: This article uses Framer’s code features. Find out how to enable code features in your project.

If you’re interested in using an SVG inside of a code component, there are a few different ways you can add them in your code.

The simplest way to add an SVG in code is to add the <svg> tag into the render body of your component.

An example component might look like this:

import * as React from "react"
import { Frame } from "framer"
export function SVG() {
return (
<Frame size="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path
d="M 50 25 L 57.347 39.887 L 73.776 42.275 L 61.888 53.863 L 64.695 70.225 L 50 62.5 L 35.305 70.225 L 38.112 53.863 L 26.224 42.275 L 42.653 39.887 Z"
fill="hsl(0, 0%, 0%)"
/>
</svg>
</Frame>
)
}
SVG.defaultProps = {
height: 100,
width: 100,
}
COPY

One thing to keep in mind is that the SVG you’re using needs to be a React valid SVG. You can check if your SVG is React valid here.