How to copy an SVG from a website

Sometimes you do not want a file at all — you want the markup in your editor, or the picture in a Slack message. Both are one click, and they are different clicks.

Get the extension Jump to the steps ↓

Watch it — 19 seconds

Both clipboards, in one run

tutorial · clipboard

Copy code gives you markup. Copy image gives you a PNG. The status line confirms each one.

Watch the status line change between the two presses — the popup tells you exactly which of the two clipboards you just filled.

What the recording shows

Open the popup on the page you are reading
Land on the icon you want
Copy code — the markup, straight to your clipboard
Paste it into a component and it just works
Or Copy image — a PNG, for docs and chat
Two clipboards, one icon. No file on disk either way.

Pick the right one

Copy code and Copy image are not alternatives — they are different things

They sit next to each other in the popup and it is worth being clear about what each one puts on your clipboard, because pasting the wrong one is a confusing five minutes.

Copy code puts the markup on your clipboard as text: <svg viewBox="0 0 24 24">…</svg>, sanitised, with the xmlns namespace already added. Paste it into a React component, a Vue template, an HTML file or a text editor. Paste it into Slack and you will get a wall of angle brackets, because it is text.
Copy image rasterises the vector to a PNG and puts that on your clipboard as a picture. Paste it into Google Docs, Notion, Figma, Slack, an email — anywhere that accepts a pasted image. It is rendered at 2× minimum so it does not arrive as a blurry thumbnail.

Rule of thumb: if the destination is code, use Copy code. If the destination is a document, use Copy image.

Copying an icon

Both routes share the first two steps.

Open the popup and find the icon. Click the toolbar button and page through with Prev and Next until the preview shows the one you want.
For code, press Copy code. The status line reads SVG code copied to clipboard. You now have sanitised markup, namespace included, ready to paste into a component.
For a picture, press Copy image. The status line reads PNG image copied to clipboard. The vector is rendered on your machine at 2× or better and put on the clipboard as an image.
Paste it where it is going. Markup into your editor; the PNG into your document, deck or chat. Nothing was written to disk either way.

What the copied markup has already had done to it

This is the part that makes it better than copying out of DevTools. Before it reaches your clipboard, the markup is run through the same sanitiser every download uses: the xmlns namespace is added if it was missing, so the fragment stands alone as a valid document; and script elements, event handler attributes and external references are stripped, so you are not pasting somebody else's page behaviour into your codebase. What you paste is the shapes, and only the shapes.

Pasting into a component

Two small things will bite you in JSX. Attributes like stroke-width and fill-rule need to become strokeWidth and fillRule; most editors and codemods will do this for you. And if the icon uses currentColor — most do — then it will take the colour of whatever text colour is in scope, which is usually exactly what you want. If it renders black and you expected a colour, that is why: the colour lived in the page's CSS, not in the shape.

Why the clipboard needs no extra permission

Both buttons write to the clipboard from inside a click you made, in a focused extension page. That is precisely the condition under which browsers allow clipboard writes, so the extension does not request a clipboard permission at all — it just uses the gesture you already gave it.

Copy code: Sanitised markup, xmlns included — for editors and components.
Copy image: A PNG at 2× or better — for docs, decks, chat and email.
Sanitising: Scripts, handlers and external references are stripped before either copy.
Permissions: No clipboard permission requested — it rides the click you made.

Good to know

Frequently asked

What is the difference between Copy code and Copy image?

Copy code puts the SVG markup on your clipboard as text, for pasting into an editor or component. Copy image rasterises it to a PNG and puts that on your clipboard as a picture, for pasting into documents, decks and chat.

I pasted into Slack and got a wall of code.

You used Copy code, which is text. Use Copy image instead — it puts a PNG on the clipboard, which Slack pastes as a picture.

Is the copied markup safe to paste into my codebase?

It is sanitised first: script elements, event handler attributes and external references are stripped, and the xmlns namespace is added. You are pasting shapes, not somebody else’s page behaviour.

Why is the pasted icon black in my app?

Because it uses currentColor, so it inherits colour from CSS rather than carrying its own. Set a colour on the element or its parent and the icon follows it.

Do I need to grant a clipboard permission?

No. Both buttons write from a user click in a focused extension page, which browsers allow without any extra permission, so none is requested.

Two clipboards, no files

Markup for the editor, a PNG for the document. Pick a button.

Get the extension All 15 tutorials →