(Bug) Cannot change new SVG icon color

Ask us anything
,
1

The new option to upload icons as SVG is not changing color.

I’ve tried:

• Changing the color through the Weweb UI (doesn’t change color).
• Changing with custom CSS “fill” and “color” properties.

Stuck using the deprecated way of uploading icons as a font.

Any help is appreciated,

2

Here’s a step-by-step guide for someone without coding experience:

  1. Open Your SVG File:
    Use a simple text editor (like Notepad on Windows or TextEdit on macOS) to open your SVG file.
  2. Locate the Hidden Section:
    Inside the file, you’ll see a part that starts with <defs> and includes <style> code. This is where the color is defined indirectly (using a label like .cls-1).
  3. Remove the Hidden Code:
    You don’t need that hidden section. Delete everything between <defs> and </defs>, including the <style> code.
  4. Find the Drawing Part:
    Look for the line that starts with <path. This is the part that actually draws your icon.
  5. Add the Color Instruction Directly:
    In the <path> tag, add the text fill="currentColor". It should look similar to this:

<path fill=“currentColor” d=“M32.73,6.94c-…”/>

This tells the system to use the color from the surrounding element.
6. Save Your Changes:
Save the modified file.
7. Upload to WeWeb:
Upload the updated SVG to WeWeb. It should now correctly show the color you set in the styles section.

This process removes the extra hidden settings and puts the color directly on the icon, ensuring WeWeb recognizes it.

2 Likes
3

we’re thinking about doing that automatically when users upload SVGs. Thanks for your solution in the meantime.