JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div>
<h2>
Refer
</h2>
<img class="svg" src="https://svgshare.com/i/idw.svg" alt="" />
</div>
<div>
<h2>
Inline
</h2>
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="favicon">
<g id="cloud-solid">
<path id="Vector" d="M40.0055 108.438L41.7666 107.821L41.6765 105.958C41.6267 104.928 41.6 103.901 41.6 102.877C41.6 69.3328 68.8869 42.1462 102.6 42.1462C125.209 42.1462 144.92 54.3863 155.484 72.5953L156.875 74.9929L159.117 73.3627C164.649 69.3396 171.412 67.4386 178.8 67.4386C198.479 67.4386 214.4 82.9822 214.4 102.877C214.4 107.378 213.549 111.661 212.024 115.66L210.972 118.419L213.867 119.002C235.906 123.436 252.5 142.865 252.5 166.108C252.5 192.658 230.888 214.193 204.2 214.193H58.15C27.9576 214.193 3.5 189.813 3.5 159.785C3.5 136.067 18.7351 115.885 40.0055 108.438Z" fill="#F2F2F2" stroke="#254B59" stroke-width="5" />
<g id="music-solid 1" clip-path="url(#clip0_231_2)">
<path id="Vector_2" d="M163.091 165.154C163.091 172.498 155.947 178.452 147.283 178.452C138.619 178.452 131.474 172.498 131.474 165.304C131.474 157.96 138.619 152.155 147.283 152.155C149.158 152.155 150.931 152.474 152.604 152.969V128.75L110.047 141.366L110.047 175.959C109.897 183.29 102.899 189.241 93.9394 189.241C84.9795 189.241 78.1309 183.29 78.1309 175.942C78.1309 168.598 85.2754 162.794 93.9394 162.794C95.8144 162.794 97.5881 163.113 99.2587 163.608V125.159C99.2587 123.003 100.931 120.732 102.984 120.086L156.028 104.379C156.608 104.241 157.473 104.131 157.921 104.131C160.857 104.131 163.236 106.515 163.241 109.449L163.091 165.154Z" fill="#254B59" />
</g>
</g>
</g>
<defs>
<clipPath id="clip0_231_2">
<rect width="85.1099" height="85.1099" fill="white" transform="translate(78.1309 104.131)" />
</clipPath>
</defs>
</svg>
</div>
</div>
CSS
.wrapper {
display: flex;
gap: 1rem;
font-family: sans-serif;
text-align: center;
}
#Vector {
fill: red;
}