How to fill color in SVG codes for theme icons?

[harrygoat1218]

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.

[harrygoat1218]

Now for example I have a svg code for the icon I want to put,

but when I put it, it becomes all black. I just want it to be in the same colors. The icon I want is…

[harrygoat1218]

And then I just want a tick sign svg icon like…

[Dan-From-Ryviu]

Hi @harrygoat1218

Could you send me that page to check?

[harrygoat1218]

Sir how do I send you that page. I mean if you were asking for the link, then its basically on my home page…

https://www.brandtec.store/

If you were asking something else, please do tell. Thank you so much Sir.

[Dan-From-Ryviu]

You can change color of those icons by using this code. Change #000 with your color code

.tt-block01__icon path { fill: #000 !important; }

[harrygoat1218]

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.

[harrygoat1218]

These are the icons sir. The support one and the tick sign. Can you help me with them and where to put the codes.

[Dan-From-Ryviu]

Please replace the path part and make sure you add fill part using the same color in the original code to make icon in the same code

[harrygoat1218]

Sir that is the weird thing, the svg code I have does not have this PATH PART, let me send you the svg text. maybe I am missing something.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

[Dan-From-Ryviu]

Can you change color directly from where you get svg icon?

[harrygoat1218]

I wish I could.

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.

[beulah002536]

You can create SVGs using graphics editing tools to reduce the need for manual coding.