A Shopify theme user is struggling to add and color custom SVG icons in their theme, which only accepts SVG code (not image uploads). The main issues are:
Primary Problems:
When replacing existing SVG icons with new ones, the icons turn completely black instead of maintaining desired colors
The user wants to replace three icons (including a customer support icon and a checkmark) while keeping the original color scheme
Their SVG code uses embedded base64 image data rather than standard <path> elements, making color customization difficult
Attempted Solutions:
A helper (Dan-From-Ryviu) provided CSS code to change icon colors: .tt-block01__icon path { fill: #000 !important; }
Dan suggested replacing the <path> elements and adding fill attributes with matching colors
Current Status:
The issue remains unresolved because the user’s SVG files contain embedded PNG data (base64) instead of vector paths
Dan asked where the user obtained the SVG files to potentially get properly formatted versions
Another user suggested using graphics editing tools to create proper SVGs
The user only has PNG icons and is using an online converter, which appears to be creating incompatible SVG formats
The discussion is ongoing, with the user expressing urgency about their project deadline.
Summarized with AI on November 17.
AI used: claude-sonnet-4-5-20250929.
Dear Members, I have a request that has been killing me from inside for 2 days. The problem is that the theme I work on does not have the option to upload image for icons, only SVG CODES can be used. Now the problem is that even with the svg codes, its killing me to get color filled in them. Its like disturbing me like hell.
Please if you can help me out, I would be extremely grateful.
This whole Text 2 block contains all the 3 svg icons and their description. Because of this it is killing me to adjust all 3 of them. I want the colors to remain the same, just want to change the icons. (The description I can change easily thats no issue) but the color fills never match up. I will now write the text here.
FREE SAME-DAY DELIVERY
A great about us block helps builds trust between you and your customers.
REPEAT DELIVERY
A great about us block helps builds trust between you and your customers.
FREE 1-2 DAY DELIVERY
A great about us block helps builds trust between you and your customers.
Sir actually I also want to change the icons itself. In the replies I have mentioned the icons. one is the Customer support icon and other is the tick icon. how do I add them without messing things up.
I only have the png icon, and then the online converter that converts it into svg and thats it. Is there a solution you can suggest. I have the png icon and I can send it to you via email. Its just, I am quite worried and late for my project.
But I am grateful that you are helping me. I am sorry if I asked too much.
