Sometimes you don’t want a file — you want the SVG markup itself, ready to paste into Figma, a component, or a code editor. Here are two ways to copy SVG code from any website.
Method 1: Copy it with inspect element
Every browser can do this without an extension:
- Right-click the icon or graphic and choose Inspect.
- In the Elements panel, find the
<svg>element (you may need to expand a wrapper). - Right-click the
<svg>tag and choose Copy → Outer HTML. - Paste the markup wherever you need it.
The catch is styling. Inline SVGs frequently pull their fill, size, and other properties from CSS elsewhere on the page. Copy just the element and you can end up with markup that renders black, oversized, or blank.
Method 2: Copy clean code with SVG Export
SVG Export skips the DOM-digging entirely. Open the page, click the extension, and every SVG on the page is listed for you. Hit copy and you get the SVG code with its styles already inlined — so it looks right the moment you paste it.
That makes it ideal for dropping vectors straight into:
- Figma or Sketch — paste as editable vector layers.
- Your codebase — inline the SVG in a component or template.
- Notes and docs — keep the markup for later.
Copy vs. download — which do you need?
Copy the code when you’re pasting into a design tool or source file and want it inline. Download the file when you need a standalone .svg (or a PNG/JPG). SVG Export does both from the same panel, so you don’t have to decide up front.
Frequently asked questions
- How do I copy SVG code using inspect element?
- Right-click the graphic and choose Inspect, find the <svg> element in the Elements panel, then right-click it and choose Copy → Outer HTML. Paste the result wherever you need it.
- Why is the SVG code I copied broken or black?
- Inline SVGs often get their colors and sizing from external CSS. When you copy just the <svg> markup, those styles are left behind. SVG Export inlines the styles for you, so the copied code renders correctly on its own.
- Can I paste SVG code straight into Figma?
- Yes. Copy the SVG markup and paste it directly onto the Figma canvas — it comes in as editable vector layers. The same works for most design tools and code editors.
- How do I copy all the SVGs on a page?
- Inspect element copies one element at a time. SVG Export lists every SVG on the page, so you can copy or download any of them without hunting through the DOM.
Download SVGs the easy way
Extract every SVG on any page and export to SVG, PNG, or JPG — free, for Chrome, Firefox, and Edge.
