A common issue I’ve run into a couple of times when uploading SVGs to serve as button icons for my projects is changing the fill or stroke color. The SVG often stays black or doesn’t apply the color properly. I’ve used Elementor and am now using BricksBuilder for building websites, but the problem still persists from time to time. So, I figured I’d note my fixes here for future reference and also for other designers who run into the same problem:

• Upload the SVG as Pure Black: If you’re exporting the icon using Figma or other software, make sure the color of your icons is set to black (#000000) with no fill (not a transparent fill—true no fill) so it will prioritize the priorities you set in your page builder.
• Check on the Front End and in Incognito Mode: Sometimes the page builder serves up a cached version of the webpage. It’s best to clear the cache and open the page in incognito mode to ensure accuracy.
• Try the SVG Support Plugin: This plugin will help “sanitize” your SVG from malicious code upon uploading to your website, passing the safety check of page builders and WordPress. It can help make the icon work properly. You can check it here: https://wordpress.org/plugins/svg-support/.
• Try styling the icon on the ID level or target it with CSS: the go-to way is to inspect the element and see what property it’s currently using and overides it using custom CSS in the ID level or use “!important” as a last resort.
• Restart Your Computer (Yes, Really): I use Local by Flywheel when I build the website before uploading it to the production server on Cloudways, so restarting Local or the whole computer actually helps with the problem—at least in my case. If you encounter a similar issue on a production server, it’s a good idea to restart the server to see if it helps.

Good luck, designers! Let me know if you have different fixes for this problem or if none of the solutions above work for you. I’d love to hear your thoughts and experiences.