Add an icon to the header

[Mustafaroot]

Hello!
Can please help me to add an icon in the header next to account icon?
The website is https://rootkratom.com/
The icon svg code 
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M12 27.2C12 46.4 32 56 32 56s20-9.6 20-28.8C52 16.6 43.05 8 32 8s-20 8.6-20 19.2z"></path><circle cx="32" cy="26.88" r="6.88"></circle></g></svg>

[B2Bridge · Accepted solution]

Hi, @Mustafaroot. To do that, follow our instruction:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find header.liquid file.

Step 3: Insert this code below <account-icon> code, (like this image):

The code:

<div style="width: 4.4rem; height: 4.4rem; display: flex; justify-content: center; align-items: center;">
<svg style="width: 30px; height: 30px;" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M12 27.2C12 46.4 32 56 32 56s20-9.6 20-28.8C52 16.6 43.05 8 32 8s-20 8.6-20 19.2z"></path><circle cx="32" cy="26.88" r="6.88"></circle></g></svg>
</div>

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you 😍

[Mustafaroot]

Thank you!!!
I made it like that, because it wasnt clickable
<a href="https://rootkratom.com/apps/locations" class="header__icon header__icon--loc link focus-inset" >
<svg fill="#ffffff" viewBox="0 0 100.353 100.353" id="Layer_1" version="1.1" xml:space="preserve" style="width:28px; height:28px; padding-right: 2px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M58.23,69.992l14.993-24.108c0.049-0.078,0.09-0.16,0.122-0.245c2.589-4.222,3.956-9.045,3.956-13.969 c0-14.772-12.018-26.79-26.79-26.79S23.72,16.898,23.72,31.67c0,4.925,1.369,9.75,3.96,13.975c0.03,0.074,0.065,0.146,0.107,0.216 l14.455,24.191c-11.221,1.586-18.6,6.2-18.6,11.797c0,6.935,11.785,12.366,26.829,12.366S77.3,88.783,77.3,81.849 C77.301,76.226,69.578,71.509,58.23,69.992z M30.373,44.294c-2.39-3.804-3.653-8.169-3.653-12.624 c0-13.118,10.672-23.79,23.791-23.79c13.118,0,23.79,10.672,23.79,23.79c0,4.457-1.263,8.822-3.652,12.624 c-0.05,0.08-0.091,0.163-0.124,0.249L54.685,70.01c-0.238,0.365-0.285,0.448-0.576,0.926l-4,6.432L30.507,44.564 C30.472,44.471,30.427,44.38,30.373,44.294z M50.472,91.215c-14.043,0-23.829-4.937-23.829-9.366c0-4.02,7.37-7.808,17.283-8.981 l4.87,8.151c0.269,0.449,0.751,0.726,1.274,0.73c0.004,0,0.009,0,0.013,0c0.518,0,1-0.268,1.274-0.708l5.12-8.232 C66.548,73.9,74.3,77.784,74.3,81.849C74.301,86.279,64.515,91.215,50.472,91.215z"></path> <path d="M60.213,31.67c0-5.371-4.37-9.741-9.741-9.741s-9.741,4.37-9.741,9.741s4.37,9.741,9.741,9.741 C55.843,41.411,60.213,37.041,60.213,31.67z M43.731,31.67c0-3.717,3.024-6.741,6.741-6.741s6.741,3.024,6.741,6.741 s-3.023,6.741-6.741,6.741S43.731,35.387,43.731,31.67z"></path> </g> </g></svg>
</a>

But now i need it aslo to be green while hovering like other icons, is it possible?

Thanks!

[B2Bridge]

To do that, add style for the svg to header.liquid like that: