When listing social media icons, you can use this with your existing li
wrapper elements:
<li class="your-li-class">...//facebook
<li class="your-li-class">...//instagram
<li class="your-li-class">
<a href="https://x.com/yourhandle" target="_blank" class="your-li-a-class">
<img src="assets/images/icons/x_com.svg" alt="x.com">
</a>
</li>
to achieve something like this

Your li
and a
dimensions will determine the bounds of the SVG and the circle and X logo should be centered within it.