<svg style="display: none;">
  <symbol viewbox="0 0 24 24" id="inbox">
    <path fill="currentColor" fill-rule="evenodd" d="M1,16 L4,2 L20,2 L23,16 L23,22 L1,22 L1,16 L1,16 Z M4,16 L6,5 L18,5 L20,16 L4,16 L4,16 Z"></path>
  </symbol>
  <symbol viewbox="0 0 24 24" id="archive">
    <path fill="none" stroke="#4BBC86" stroke-width="4" stroke-linecap="square" d="M21,5 L9,18 L3,12"></path>
  </symbol>
  <symbol viewbox="0 0 24 24" id="trash">
    <g stroke="#FF4136" stroke-width="4" stroke-linecap="square">
      <path d="M19,5 L5,19"></path>
      <path d="M5,5 L19,19"></path>
    </g>
  </symbol>
  <symbol viewbox="0 0 24 24" id="sent">
    <g fill="currentColor">
      <path d="M24,18.000385 C24,19.1047419 23.1029738,20 21.9950534,20 L2.00494659,20 C0.897645164,20 0,19.1125667 0,18.000385 L0,10 C0,10 7.86197917,15 12,15 C15.8619792,15 24,10 24,10 L24,18.000385 L24,18.000385 Z"></path>
      <path d="M0,6 C0,4.8954305 0.897026226,4 2.00494659,4 L21.9950534,4 C23.1023548,4 24,4.88772964 24,6 L24,8 C24,8 16.1380208,13 12,13 C8.13802083,13 0,8 0,8 L0,6 Z"></path>
    </g>
  </symbol>
</svg>

<ul class="menu">
  <li>
    <label class="menu-item">
      <input class="menu-input" type="radio" name="folder" checked>
      <span class="menu-label">
        <svg class="menu-icon">
          <use xlink:href="#inbox">
        </svg>
        Inbox
      </span>
    </label>
  </li>
  <li>
    <label class="menu-item">
      <input class="menu-input" type="radio" name="folder">
      <span class="menu-label">
        <svg class="menu-icon">
          <use xlink:href="#archive">
        </svg>
        Archive
      </span>
    </label>
  </li>
  <li>
    <label class="menu-item">
      <input class="menu-input" type="radio" name="folder">
      <span class="menu-label">
        <svg class="menu-icon">
          <use xlink:href="#trash">
        </svg>
        Trash
      </span>
    </label>
  </li>
  <li>
    <label class="menu-item">
      <input class="menu-input" type="radio" name="folder">
      <span class="menu-label">
        <svg class="menu-icon">
          <use xlink:href="#sent">
        </svg>
        Sent
      </span>
    </label>
  </li>
</ul>

body {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 20px;
  margin: 2em auto;
  padding: 0 2em;
  max-width: 20em;
}

.menu {
  list-style: none;
  padding: 0;
}

.menu-item {
  display: block;
}

.menu-input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.menu-label {
  color: #909799;
  cursor: pointer;
  display: block;
  padding: 0.75em 1.25em;
}

.menu-input:checked + .menu-label {
  background: #E4EEF2;
  border-radius: 0.25em;
  color: #001f3f;
}

.menu-icon {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
  position: relative;
  margin: -0.25em 0.375em -0.25em 0;
  top: -1px;
}