Did you know that you can copy SVG code from a website and paste it directly into Adobe Illustrator, and it also works the other way around from Illustrator to code? I love this trick and use it all the time.

Check out my quick screen recordings below to get an idea of what I’m talking about. It’s really easy. I get a lot of free icons from https://iconmonstr.com. What a great free resource! This technique works best with simple shapes. The more complex the vector, the more difficult the process will be. I’ve also used this technique in Inkscape on Linux Mint Cinnamon and it also works.

Copy and paste a vector shape from Adobe Illustrator directly to HTML code

Copy and paste SVG code from a website directly into Adobe Illustrator

1. Find an icon on a web page that you want to use.
2. Open up your web developer tools. In my case, the keyboard shortcut is F12 in Firefox Developer Edition, or press command + shift + c to activate the element picker and open up the developer tools at the same time. This is my method of choice because it is fastest and allows you to select any object on the page with your mouse and takes you directly to the code block.
3. Find your SVG, right click the <svg> tag in the code and copy the outer HTML.
4. Open up Illustrator, and press command + v to paste the SVG code into your document.

It’s that simple and the trick works both ways. You can copy an SVG code from Illustrator and paste it directly into your code document like a boss, or steal an SVG icon from the web and tweak it to your liking.

Don’t forget to add width and height attributes to your SVG and clean up the code where necessary. I also add ID’s and classes to the SVG structure, depending on what I’m doing with the SVG such as CSS transitions or animations. This is a simple and effective trick, but it is very cool and highly useful for web professionals. Considering that utilizing inline SVG code for icons is a big time saver and reduces another HTTP request, why wouldn’t you like this trick? The old days of using static image formats for icons are basically over with this trick.

If you find an SVG on a website and want to rip it for your own use, you can view the source code on the website, copy the <svg></svg> code and then simply paste it right into an Adobe Illustrator document to start working with the shape.

You can also do this the other way around. Open up any vector format file in Adobe Illustrator, select the shape, and then press the keyboard shortcut to copy, such as command + C. Then you can open up your favorite code editor and paste the SVG code directly into the file. There are certain code attributes that you will want to remove, such as any XML and unnecessary pieces in the SVG code that aren’t required to render the shape in the browser.