This can be accomplished in a few different ways. To keep things scaleable, you could use an icon from an icon font, an inline SVG, a linked SVG, or an SVG sprite.

I would recommend using an icon from a font if you happen to have a lot of icons on your site, or already have a icon font integrated. This can bring up a few accessibility issues, but those can be addressed.

If you don't have many, or any, other icons, then an inline SVG would work just fine. This is probably the easiest way to get the icon into the markup.

If you have a lot of icons, and don't wish to use an icon font, then SVG sprites are the way to go. This, however, can be much more complicated if you don't know much about SVGs and how they work. Icon Fonts tend to have a lot of libraries of pre-made icon sets with all the CSS included, whereas I don't know of much the same for SVG sprites, so, you would have to make your own, either out of the SVGs of other icons, or from your own custom made icons.

Inline SVG: The Simplest way

This is honestly the simplest way to get you're hamburger icon. either create the icon yourself, or get the SVG from another icon, and open that SVG in a text editor like Atom or Sublime Text. You can then copy and paste that code directly to the spot in your document where you need it. SVGs are XML documents, so they work just fine in HTML documents.

Here's an example of what it could look like once you copy & paste it in:

<span class="icon menu">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64.26">
    <title>menu</title>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
        <rect class="cls-1" width="64" height="13"/>
        <rect class="cls-1" x="2" y="27.13" width="60" height="10"/>
        <rect class="cls-1" y="51.26" width="64" height="13"/>
      </g>
    </g>
  </svg>
</span>

Here I have the SVG code wrapped in a span element with an .icon class that has global styles for icons in my stylesheet.

The CSS looks a bit like this, but it can be tweaked:

.icon > svg {
    display: inline-block;
    width: 16px;
    width: 1rem;
    height: 16px;
    height: 1rem;
    vertical-align: middle;
}

.icon > svg path {
    fill: #C84EFF;
}

Please note that the extra width and height properties are simply pixel fallbacks incase a browser doesn't support Rems

This CSS gives my icons a height and width, a display property, and even a color if the path color isn't designated as an inline style in the SVG.

How to use Icon Fonts

Now, if you are looking for a pre-made icon font, then you can look to places like IcoMoon where they have a few free sets that aren't enormous, and they allow you to build your own and download it as a ready to go font. They have instructions on how to do this on their site.

Font Awesome is another option, however, if you aren't using icons like crazy, then it can be a quite bulky option.

No matter what you choose to do, the process is basically the same once you have the icon font.

Now, if you're bringing in your font from a CDN, then you need to follow the instructions that are presented by those who provide the font. However, if you are bringing a font in to your project, then here's what it will basically look like:

/* This will allow your icon font to be used. Just make sure the `url()` points to where your font resides in your project directory */
@font-face {
    font-family: 'hbgi';
    src:    url('../fonts/hbgi.eot?abqwal');
    src:    url('../fonts/hbgi.eot?abqwal#iefix') format('embedded-opentype'),
        url('../fonts/hbgi.ttf?abqwal') format('truetype'),
        url('../fonts/hbgi.woff?abqwal') format('woff'),
        url('../fonts/hbgi.svg?abqwal#hbgi') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'hbgi' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* These are the classes you would assign to an html element to make the icon appear */
.icon-arrow-down:before {
    content: "\e900";
}
.icon-building:before {
    content: "\e901";
}
.icon-fax:before {
    content: "\e902";
}
.icon-mail:before {
    content: "\e903";
}
.icon-menu:before {
    content: "\e904";
}
.icon-minus:before {
    content: "\e905";
}
.icon-person:before {
    content: "\e906";
}
.icon-phone:before {
    content: "\e907";
}
.icon-plus:before {
    content: "\e908";
}
.icon-product:before {
    content: "\e909";
}
.icon-share:before {
    content: "\e90a";
}

Then simply to make the icon show up all you have to do is this:

<span class="icon-menu"></span>

These will usually respect their container's size and font properties. Also a small side note, while there are those who use the i element to display icons like this, it is actually semantically incorrect, and so instead I elect to use span elements.

SVG Sprites

Now, SVG sprites are a bit of a different story all together, and I really wouldn't suggest it unless you know your way around SVGs. However, The basic idea is that you have a bunch of icons in a single SVG element, set the display property for that element to none and then use the IDs of the icons in that element as reference for inserting the icons wherever you need them on the page. This works a lot like Icon fonts, or even old image sprites.

There are a lot of advantages to using SVG sprites however, and so I would highly recommend looking into them. There's a really good post on CSS-Tricks about it.

Hope this helps somewhat!