A battery icon made purly in CSS, heavily influated by the battery from @captainbrosset

battery.scss

.battery {
  $bg: $bright-color;
  $border: $dark-color;
  $level-good: $green;
  $level-bad: $red;
  font-size: 2px;
  display: inline-block;
  width: 4.5em;
  height: 11em;
  border: 0.8em solid $bg;
  box-shadow: 0 0 0 1px $border;
  margin: 1em 1.5em 0 1.5em;
  position: relative;
  background-color: $level-good;
  background-size: 100%;
  &:before {
    position: absolute;
    top: -2em;
    left: 0em;
    display: block;
    background: $border;
    width: 3.4em;
    height: 1em;
    content : "";
    border-radius: 1em 1em 0 0;
  }
  &:after {
    position: absolute;
    top: 0em;
    left: -0.6em;
    display: block;
    background: $bg;
    width: 4.5em;
    height: 0;
    content : "";
  }
  &.good {
    &:after {
      height: 2.2em;
    }
  }
  &.bad {
    &:after {
      height: 6em;
    }
  }
  &.bad, &.critical {
    background-color: $level-bad;
  }
  &.critical {
    &:after {
      height: 8em;
    }
  }
}

Thanks to @captainbrosset (https://github.com/captainbrosset) for his example.