How to use W3.org's SVG Icons on my website?

user_12928190 0
Viewed 32941

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="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/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 W3.org to find out how but it is not very clear how to do it, if at all I can. Anyone care to explain?

svg css html
2 Answers

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. source: w3.org/TR/SVG2/

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

user_55970170

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 https://iconsvg.xyz/. It gives you the full code of the icon you will choose where you just paste it into your HTML file.

<div>
  <h5>This is a user icon</h5>
  <svg xmlns="http://www.w3.org/2000/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 xmlns="http://www.w3.org/2000/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>

</div>

user_97770410
Related