Letztens habe ich mir gedacht: warum schreibst du nicht einfach ein paar CSS-Symbole die du immer wieder brauchst. Das verringert Daten gegenüber Icons (ok, wirklich nicht viel, aber hey, wenn schon, denn schon) und lässt sich schöner einbinden. Gesagt, getan. Hier das Mail-Symbol.

Dabei wird ein (z.B.) DIV so gestyled dass es einen runden Button darstellt, und mittels der :before & :after pseudoelemente wird das eigentliche Mail-Symbol in selbiges hinein gestyled. Im Fall des Beispiels wird das Mixin auf ein Element mit der Klasse .mail-120 angewendet. Größe sind 120px, #bab7ff als Symbol und #1d9d73 als Hintergrundfarbe.

Das :before Element ist dabei der „Briefumschlag selbst, und einfach ein Rechteck mit definierter Größe, das :after Element ein um 45° gedrehtes Quadrat mit nur der Hälfte an borders (bottom und right), das darüber liegt und somit die Klappe des Umschlags.

@mixin mail-button(
  $size,
  $color-lines,
  $color-bg
) {

  $size-line: $size/15;
  position: relative;

  box-sizing: border-box;
  width: $size;
  height: $size;

  border: solid $size-line $color-lines;
  border-radius: $size;

  background-color: $color-bg;

  &:before {
    content: '';
    display: block;

    position: absolute;
    top: ($size/3) - ($size-line*2);
    left: ($size/4) - ($size-line*2);

    width: $size/2;
    height: $size/3;

    border: solid $size-line $color-lines;
  }
  &:after {
    content: '';
    display: block;

    position: absolute;
    top: $size*0.0976;
    left: $size*0.2643;

    box-sizing: border-box;
    width: $size/3;
    height: $size/3;

    border-bottom: solid $size-line $color-lines;
    border-right: solid $size-line $color-lines;

    transform: rotate(45deg);
  }
}

.mail-120 {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 120px;
  height: 120px;
  border: solid 8px #bab7ff;
  border-radius: 120px;
  background-color: #1d9d73
}

.mail-120:before {
  content: '';
  display: block;
  position: absolute;
  top: 24px;
  left: 14px;
  width: 60px;
  height: 40px;
  border: solid 8px #bab7ff
}

.mail-120:after {
  content: '';
  display: block;
  position: absolute;
  top: 11.712px;
  left: 31.716px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-bottom: solid 8px #bab7ff;
  border-right: solid 8px #bab7ff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}