How to use <use> for SVG's

The basic idea:

Put all of your svg's inside a hidden svg tag and wrap the contents of each icon in a symbol tag with an id.

Then you reference your svg by it's id like so: 

It's really that easy. (You can add optional attributes directly to the svg tag itself, or give it a class and add styles that way).

Update:

I recently learned that you can also reference an external svg file, and that would look something like this:

<svg>
  <use href="/path/to/external-file.svg#my-svg"></use>
</svg>