PickCodeFor inline SVGs, inspect the icon and use Copy > Copy outerHTML on the <svg> element. For sprite icons (<use href="#icon">), copy the referenced <symbol> instead. For SVG files, open the URL from the Network panel and save it. Check the license before using another brand's logo.
Find out which kind of SVG it is
- Inline SVG: the
<svg>and its paths sit right in the HTML. Easiest to copy. - Sprite reference: the svg contains only
<use href="#icon-search">. The real shape lives in a<symbol id="icon-search">elsewhere on the page or in an external sprite file. - Image file: an
<img src="logo.svg">. Open the URL and save it. - CSS background or mask: the icon is set with
background-imageormask-image, often as adata:URL. Copy it from the Styles pane.
Copy each kind with DevTools
For inline SVG, right-click the icon, choose Inspect, select the <svg> node (not a path inside it) and choose Copy > Copy outerHTML.
For a sprite, read the id in the href, then search the Elements panel with Ctrl F (Cmd F on Mac) for that id. Copy the symbol and rebuild it as a standalone svg:
<!-- the symbol on the page -->
<symbol id="icon-search" viewBox="0 0 24 24"><path d="M11 4a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 11 4Z"/></symbol>
<!-- standalone icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path d="M11 4a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 11 4Z"/>
</svg>For files, open the Network panel, filter by Img, reload, and click the .svg to open or save it.
Grab every icon at once with PickCode
- Pick the container. Press Alt Shift C and select the toolbar, footer or section that holds the icons.
- Download the assets. Use the assets download to save every image and SVG inside the element as a zip.
- Or copy with the markup. Copy the element as code. SVG sprite icons are included in the output, and React output converts inline SVG attributes to JSX.
- Check the license. Keep the icons you are allowed to use and swap the rest for an open icon set.
Clean it up before use
- Remove fixed
widthandheightand keep theviewBox, so you can size the icon with CSS orsize-5in Tailwind. - Replace hard-coded fills with
currentColorso the icon follows the text color. - Drop editor leftovers: ids,
data-attributes, comments and empty groups. An optimizer like SVGO does this in bulk. - In React, rename attributes like
stroke-widthtostrokeWidth.
Can you use it?
Icon sets like Heroicons, Lucide or Font Awesome Free are open-licensed, and you are better off installing the set than copying single paths. Company logos are trademarks: fine for showing that you integrate with a service, not for passing off as your own. Custom illustrations are covered by copyright. When in doubt, ask or use an open set.
Questions
Why is my copied SVG blank?
It is probably a sprite reference (<use href>) without the symbol it points to, or its fill is currentColor on a white background. Copy the symbol, or set a color.
How do I get a logo as SVG if the site uses PNG?
You cannot convert a PNG back to the original vector. Check the company press or brand page, which often offers SVG logos with usage rules.
Can I copy icons from a canvas or icon font?
Icon fonts render glyphs, not SVG paths, so there is no SVG to copy. Find the open source set the font comes from instead.
Is it legal to use a copied logo?
Logos are trademarks. Using one to refer to that company is generally accepted, but using it as your own branding is not. See is it legal to copy a website design.