<figure>
  <figcaption>Static states</figcaption>
  <div class="static-states">
    <div class="static-state">
    <svg id="navicon-menu" class="navicon" viewbox="0 0 100 100">
      <path class="navicon-stroke navicon-stroke-top" d="M10 10 L 90 10 M10 50 L 90 50 M10 90 L 90 90"></path>
    </svg>
    <label for="navicon-menu-1">Menu</label>
  </div>
  <div class="static-state">
    <svg class="navicon" id="navicon-arrow" viewbox="0 0 100 100">
      <path class="navicon-stroke navicon-stroke-top" d="M50 10 L 10 49 M90 50 L 10 50 M50 90 L 10 51"></path>
    </svg>
    <label for="navicon-arrow">Arrow</label>
  </div>
  </div>
</figure>
@import "compass/css3";

*{
  box-sizing:border-box;
}

body{
  padding:0 1em;
}

figure{
  padding:1em 0;
  margin:0 0 0.5em;
}

figcaption{
  display:block;
  width:100%;
  padding:0.5em 0;
  border-bottom:solid thin;
  margin:0 0 1em 0;
}

.navicon{
  width:100%;
  stroke:white; 
  stroke-linecap:round; 
  stroke-width:10;
  display:block;
  background:rgb(70, 70, 70);
  padding:10%;
  border-radius:15%;
}

// Article specifc
.static-states{
  display:flex;
}
.static-state{
  width:percentage(1/5);
  padding-right:1em;
  label{
    display:block;
    margin:1em 0 0;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js