Solution 1 :

You will see similiar code if you open any .svg file in some text editor. It’s just two-dimensional vector described in XML language which can be directly used in HTML.

SVG is a language based on XML for describing two-dimensional vector and mixed vector/raster graphics.

As an example you can check Each of these icons are downloadable as .svg but you can see their code right above the download button.

Solution 2 :

I don’t know much about SVG icons but I’ve used some in my project. The format is as shown below in the snippet I created. There is a website I use with free icons but they are not as much. The website is It gives you the full code of the icon you will choose where you just paste it into your HTML file.

  <h5>This is a user icon</h5>
  <svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3"/><circle cx="12" cy="10" r="3"/><circle cx="12" cy="12" r="10"/></svg>
  <h5>This is a brand icon</h5>
  <svg  width="24" height="24" viewBox="0 0 24 24" fill="#000"><path d="M12.04 3.5c.59 0 7.54.02 9.34.5a3.02 3.02 0 0 1 2.12 2.15C24 8.05 24 12 24 12v.04c0 .43-.03 4.03-.5 5.8A3.02 3.02 0 0 1 21.38 20c-1.76.48-8.45.5-9.3.51h-.17c-.85 0-7.54-.03-9.29-.5A3.02 3.02 0 0 1 .5 17.84c-.42-1.61-.49-4.7-.5-5.6v-.5c.01-.9.08-3.99.5-5.6a3.02 3.02 0 0 1 2.12-2.14c1.8-.49 8.75-.51 9.34-.51zM9.54 8.4v7.18L15.82 12 9.54 8.41z"/></svg>


Problem :

I often scan through the elements in websites and keep seeing things like:

<svg width="13" height="13" viewBox="0 0 13 13" version="1.1"
xmlns_xlink="" data-ui-test="undefined-svg">
<use x="0" y="0" width="13" height="13" xlink_href="/images/icons/icon_definitions.svg#heart"></use></svg>

How can I use the icons like that on my website? I tried going to to find out how but it is not very clear how to do it, if at all I can. Anyone care to explain?