Data URIs for navicon (hamburger menu) icons

The "hamburger" icon is becoming a staple of modern UI design. Users see those three lines and immediately know that a menu lies beneath. There are many approaches to getting them into your app, including border hacks, box-shadow hacks, etc. Here's an approach that uses a very small data URI to get the job done.


Pretty basic. Just a link:

<a href="#" class="navicon">Menu</a>


.navicon {
    /* This is all that's required */
    position: relative;

    /* This just makes it look like a button for the demo */
    font-family: sans-serif;
    color: white;
    text-decoration: none;
    background: black;
    border-radius: 4px;
    padding: .5em .75em .5em 2em;
    display: inline-block;

.navicon:before {
    position: absolute;
    top: 50%;
    left: .75em;
    width: .8em;
    height: .8em;
    margin-top: -.4em;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    /* white navicon */
    /* black navicon */

The result

Navicon Example

Of course, you can scale it up and down as needed. The original image is 100px by 115px, but only about 250 bytes as a data URI, so it's very quick to load.

The only drawback to this method compared to a border hack is that it may render blurry at certain sizes. However, the tradeoff for ease of use may be worth it. Enjoy!


Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.