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.

<div class="tt-block01__wrapper">
<div class="tt-block01__item">
<div class="tt-block01__icon">
<svg width="74" height="74" viewbox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="74" height="74" rx="15" fill="#FFE11B"></rect>
<path d="M52.4178 39.2869C52.2899 39.2601 52.1691 39.2348 52.0614 39.2068C50.8718 38.8974 50.2815 38.7132 49.868 37.9148L48.315 34.7707C47.8192 33.8134 46.5387 33.0345 45.4607 33.0345H42.6744V30.8926C42.6744 30.2523 42.1534 29.7314 41.5129 29.7314L34.8569 29.7384C34.6987 25.5033 31.2047 22.1064 26.9315 22.1064C22.5581 22.1063 19 25.6645 19 30.0379C19 32.5107 20.1377 34.7226 21.9168 36.1783V46.9465C21.9168 47.5868 22.4377 48.1077 23.078 48.1077H25.1001C25.4029 50.2445 27.2435 51.8936 29.4628 51.8936C31.6824 51.8936 33.523 50.2445 33.8258 48.1077H41.197C41.2451 48.1077 41.2945 48.105 41.344 48.1012C41.644 50.2413 43.4859 51.8936 45.7075 51.8936C47.927 51.8936 49.7677 50.2445 50.0705 48.1077H52.9669C54.0879 48.1077 55 47.1957 55 46.0747V42.5891C55 39.8287 53.446 39.5027 52.4178 39.2869ZM26.9315 24.4887C29.9913 24.4887 32.4806 26.9781 32.4806 30.0379C32.4806 33.0977 29.9913 35.587 26.9315 35.587C23.8718 35.587 21.3824 33.0977 21.3824 30.0379C21.3824 26.9782 23.8718 24.4887 26.9315 24.4887ZM29.4628 49.1178C28.5636 49.1178 27.8319 48.3862 27.8319 47.4868C27.8319 46.5875 28.5636 45.8558 29.4628 45.8558C30.3624 45.8558 31.0944 46.5875 31.0944 47.4868C31.0944 48.3862 30.3624 49.1178 29.4628 49.1178ZM45.7076 49.1178C44.8084 49.1178 44.0767 48.3862 44.0767 47.4868C44.0767 46.5875 44.8084 45.8558 45.7076 45.8558C46.6072 45.8558 47.3392 46.5875 47.3392 47.4868C47.3391 48.3862 46.6072 49.1178 45.7076 49.1178ZM42.6743 39.037V34.707H44.8086C45.6277 34.707 46.6383 35.3217 47.0136 36.0458L48.3955 38.8437C48.4307 38.9118 48.4675 38.9761 48.5062 39.0371L42.6743 39.037Z" fill="#009950"></path>
<path d="M27.0155 31.4463L29.0854 32.1022C29.2051 32.1402 29.3263 32.1582 29.4455 32.1582C29.9509 32.1582 30.42 31.8339 30.5808 31.3265C30.7795 30.6994 30.4321 30.0298 29.8049 29.8311L28.1356 29.3022L27.9608 29.08V27.566C27.9608 26.9081 27.4274 26.3748 26.7696 26.3748C26.1117 26.3748 25.5784 26.9081 25.5784 27.566V29.4836C25.5785 30.357 26.1828 31.1825 27.0155 31.4463Z" fill="#009950"></path>
</svg>
</div>
<div class="tt-block01__descriptions">
<h3 class="tt-block01__title">
FREE SAME-DAY DELIVERY
</h3>
<p>
A great about us block helps builds trust between you and your customers.
</p>
</div>
</div>
<div class="tt-block01__item">
<div class="tt-block01__icon">
<svg width="74" height="74" viewbox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="74" height="74" rx="15" fill="#FFE11B"></rect>
<path d="M50.7441 28.5063L45.4943 23.2563C45.244 23.006 44.8678 22.9308 44.5405 23.0673C44.2133 23.2038 43.9998 23.5205 43.9998 23.874V26.4991H32.6252C27.3089 26.4991 23.0006 30.8076 23.0006 36.1241C23.0006 36.6071 23.3926 36.9991 23.8755 36.9991H27.3754C27.8584 36.9991 28.2504 36.6071 28.2504 36.1241C28.2504 33.7073 30.2086 31.7491 32.6252 31.7491H43.9998V34.3741C43.9998 34.7276 44.2133 35.0479 44.5405 35.1826C44.8678 35.3191 45.244 35.2439 45.4943 34.9936L50.7441 29.7436C51.0853 29.4023 51.0853 28.8476 50.7441 28.5063Z" fill="#009950"></path>
<path d="M50.1245 36.9991H46.6246C46.1416 36.9991 45.7496 37.3911 45.7496 37.8741C45.7496 40.2909 43.7914 42.2492 41.3748 42.2492H30.0002V39.6241C30.0002 39.2706 29.7867 38.9504 29.4595 38.8156C29.1322 38.6809 28.7577 38.7561 28.5057 39.0064L23.2559 44.2564C22.9147 44.5977 22.9147 45.1524 23.2559 45.4937L28.5057 50.7437C28.756 50.994 29.1322 51.0692 29.4595 50.9327C29.7867 50.7962 30.0002 50.4777 30.0002 50.1242V47.4992H41.3748C46.6911 47.4992 50.9994 43.1907 50.9994 37.8741C50.9994 37.3911 50.6074 36.9991 50.1245 36.9991Z" fill="#009950"></path>
</svg>
</div>
<div class="tt-block01__descriptions">
<h3 class="tt-block01__title">
REPEAT DELIVERY
</h3>
<p>
A great about us block helps builds trust between you and your customers.
</p>
</div>
</div>
<div class="tt-block01__item">
<div class="tt-block01__icon">
<svg width="74" height="74" viewbox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="74" height="74" rx="15" fill="#FFE11B"></rect>
<path d="M52.6989 36.2996C52.5859 36.2758 52.4792 36.2535 52.3843 36.2288C51.3086 35.9491 50.8176 35.7957 50.4546 35.0948L49.0795 32.3109C48.6375 31.4577 47.4964 30.7636 46.5357 30.7636H44.0876V27.5488C44.0876 26.9716 43.6179 26.502 43.0405 26.502L25.9894 26.5191C25.4276 26.5191 25.004 26.9655 25.004 27.5576V28.5078H20.6359C19.7339 28.5079 19 29.2417 19 30.1438C19 31.0459 19.7339 31.7797 20.6359 31.7797H25.0039V33.3477H22.144C21.242 33.3477 20.5081 34.0816 20.5081 34.9836C20.5081 35.8856 21.242 36.6195 22.144 36.6195H25.0039V38.1875H23.6521C22.7501 38.1875 22.0162 38.9214 22.0162 39.8234C22.0162 40.7254 22.7501 41.4593 23.6521 41.4593H25.0039V43.0993C25.0039 43.6765 25.4735 44.1462 26.0508 44.1462H27.8244C28.1007 46.0393 29.7346 47.498 31.7035 47.498C33.6724 47.498 35.3065 46.0393 35.5828 44.1462H42.761C42.7983 44.1462 42.8365 44.1437 42.8746 44.1412C43.1487 46.0368 44.7837 47.498 46.7542 47.498C48.7232 47.498 50.3573 46.0393 50.6336 44.1462H53.1812C54.1841 44.1462 55.0001 43.3303 55.0001 42.3275V39.2415C55 36.7824 53.6152 36.4918 52.6989 36.2996ZM46.7542 42.1525C47.5404 42.1525 48.1799 42.7919 48.1799 43.5778C48.1799 44.3636 47.5404 45.003 46.7542 45.003C45.9684 45.003 45.3291 44.3636 45.3291 43.5778C45.3291 42.7919 45.9684 42.1525 46.7542 42.1525ZM44.0876 36.0779V32.2819H45.9584C46.6774 32.2819 47.5644 32.8215 47.8937 33.4567L49.1173 35.9341C49.1432 35.9843 49.1701 36.032 49.1981 36.0778H44.0876V36.0779ZM33.1292 43.5777C33.1292 44.3635 32.4896 45.0029 31.7035 45.0029C30.9177 45.0029 30.2784 44.3636 30.2784 43.5777C30.2784 42.7918 30.9177 42.1525 31.7035 42.1525C32.4896 42.1525 33.1292 42.7919 33.1292 43.5777Z" fill="#009950"></path>
</svg>
</div>
<div class="tt-block01__descriptions">
<h3 class="tt-block01__title">
FREE 1-2 DAY DELIVERY
</h3>
<p>
A great about us block helps builds trust between you and your customers.
</p>
</div>
</div>
</div>

[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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74px" height="74px" viewBox="0 0 74 74" enable-background="new 0 0 74 74" xml:space="preserve"> <image id="image0" width="74" height="74" x="0" y="0"
href="data&colon;image/png;base64,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" />
</svg>

[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.