Pure CSS Hamburger Menu Icon

This is a hamburger menu icon. Pure CSS, no image.

The hamburger icon is widely recognizable and consistently used across platforms. There is an HTML entity unicode for the hamburger icon (here ☰ --> &#9776), but it doesn't show up in older android mobile browsers. It seems a little blurry to when scaled up, and you can't change the spacing. It is small by default so it needs to be scaled up using font-size, but if you are using CSS anyway, just make a clean looking icon.

The HTML entity scaled up:

Method 1 - use double border


#burgericon1 {
    border-bottom: 10.5px double black;
    border-top: 3.5px solid black;
    height: 4px;
    width: 25px;
    text-decoration: none;


<a id="burgericon1" href="javascript:alert('clicked')"></a>

Example 1:




Method 2 - use an inner div for the center line.

#burgericon2 {
    border-top:4px #000 solid;
    border-bottom:4px #000 solid;

#burgericon2 div {
    margin:4px 0;


<a id="burgericon2" href="javascript:alert('clicked')"><div></div></a>

Example 2:

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use