.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor; /* Matches the text color of the parent element */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon-email-outline {
  -webkit-mask-image: url('/icons/email-outline.svg');
  mask-image: url('/icons/email-outline.svg');
}

.icon-github {
  -webkit-mask-image: url('/icons/github.svg');
  mask-image: url('/icons/github.svg');
}

.icon-linkedin {
  -webkit-mask-image: url('/icons/linkedin.svg');
  mask-image: url('/icons/linkedin.svg');
}