You’ve uploaded that SVG icon file fifteen times from Adobe Illustrator to Elementor, and it just won’t change colors. We feel you. There is a lot of conflicting information on which settings will cause an Illustrator icon to work correctly in Elementor. I tested lots of different settings, and I think I’ve located the actual problem. It’s simpler than you may think.
Why won't my SVG icon change color in Elementor?
Your SVG icon won’t change color in Elementor because it isn’t #000000 black.
See, Illustrator’s default palette does not use a #000000 for the black color. If you are using the black swatch from the color picker or swatch palette, you aren’t actually coloring your icon black. See the image below:
As you can see, the default black in Adobe Illustrator is not the #000000 black that is necessary for icon recoloring. Set your icon’s fill color to #000000 black, and you should find that the icon works correctly in Elementor
But What About SVG Export Settings from Illustrator to Elementor?
Like you, I’ve read lots of instructions on how to export a .svg file from Illustrator to Elementor that will work correctly. Every person seems to have their own special sauce that works for them. 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.
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.
Still don’t believe me? Well, check out the icons below. 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. I did see larger file sizes when I turned off Minify and Responsive, as expected. Save As resulted in the largest files. 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. Everything I did stayed well under 2000 bytes.
Does changing the decimal setting in Illustrator result in better or worse icon quality?
After tinkering with the export and save settings in Illustrator, I decided to do a comparison of changes made to the decimal setting. Would increasing the number of decimal places make a noticeable difference in my icon quality once the icons were expanded to giant size? What effect do these settings have on SVGs that are exported from Illustrator to Elementor?
Well, if adjusting the Decimal settings in Illustrator changed anything, I can’t see it:
You can see the slightly jagged line on the shoulder of the center person — a minor imperfection present in the original design, but I can’t tell any difference in the curves or other parts of these icons.
As you can see, the same SVG icon exported from Illustrator using many different settings doesn’t seem to actually affect how the icon displays. However, if you, like me, are surprised to find that the default black swatch in Adobe Illustrator is no longer #000000 in either CMYK or RGB color document mode, you may find that your icons aren’t coloring properly when you export an SVG from Illustrator to Elementor. Change the black fill color, and I suspect your icon will work as expected.