.soc {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.soc-ne {
  background-image: url("../icons/socionics/soc-ne.svg");
}

.soc-se {
  background-image: url("../icons/socionics/soc-se.svg");
}

.soc-te {
  background-image: url("../icons/socionics/soc-te.svg");
}

.soc-fe {
  background-image: url("../icons/socionics/soc-fe.svg");
}

.soc-ti {
  background-image: url("../icons/socionics/soc-ti.svg");
}

.soc-fi {
  background-image: url("../icons/socionics/soc-fi.svg");
}

.soc-si {
  background-image: url("../icons/socionics/soc-si.svg");
}

.soc-ni {
  background-image: url("../icons/socionics/soc-ni.svg");
}