With the Type tool selected, change the text layer’s font to “Avenir.”įinally, in the Icon layer, select the Elliptical Marquee tool and create a small, circular selection around the text. Now, in the Icon layer, Select the Type tool and select the text you would like to use as the icon’s title. When you release the mouse button, the Path object will be positioned over the vector object you created in step 1. Now, in the Icon layer, select the Path tool and click and drag the Path object over the document. On the Paths panel, set the Stroke weight to 3 and the Fill weight to 1. Additionally, check that your icon does not have any background objects or colors that will not be needed in the final file. Everything I did stayed well under 2000 bytes.PRO TIP: When creating an SVG icon in Illustrator, be sure to export the icon at the correct size and scale. I also had larger file sizes when I saved out with large artboards, and the settings labeled Crazy and Crazy 2 below ended up with larger file sizes, too, but none were excessively large.

I did see larger file sizes when I turned off Minify and Responsive, as expected. I did not use a diff comparison to check the files generated by each of the settings listed below for differences, but I did check file sizes. Still don’t believe me? Well, check out the icons below. You read that right: I could not break my SVG import by changing export settings, or by using Export for Screen instead of Export As. I decided to test multiple settings to determine if I could cause an icon to break with certain SVG export settings, and I could not. Every person seems to have their own special sauce that works for them. svg file from Illustrator to Elementor that will work correctly.

Like you, I’ve read lots of instructions on how to export a.

Illustrator icon svg