webseite-grav/plugins/problems/scss/icons/_icons-object.scss

// Icon time
.icon-time {
  border: $icon-border-width solid currentColor;
  border-radius: 50%;
  &::before {
    background: currentColor;
    content: "";
    height: .4em;
    transform: translate(-50%, -75%);
    width: $icon-border-width;
  }
  &::after {
    background: currentColor;
    content: "";
    height: .3em;
    transform: translate(-50%, -75%) rotate(90deg);
    transform-origin: 50% 90%;
    width: $icon-border-width;
  }
}

// Icon mail
.icon-mail {
  &::before {
    border: $icon-border-width solid currentColor;
    border-radius: $border-radius;
    content: "";
    height: .8em;
    width: 1em;
  }
  &::after {
    border: $icon-border-width solid currentColor;
    border-right: 0;
    border-top: 0;
    content: "";
    height: .5em;
    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
    width: .5em;
  }
}

// Icon people
.icon-people {
  &::before {
    border: $icon-border-width solid currentColor;
    border-radius: 50%;
    content: "";
    height: .45em;
    top: 25%;
    width: .45em;
  }
  &::after {
    border: $icon-border-width solid currentColor;
    border-radius: 50% 50% 0 0;
    content: "";
    height: .4em;
    top: 75%;
    width: .9em;
  }
}

// Icon message
.icon-message {
  border: $icon-border-width solid currentColor;
  border-bottom: 0;
  border-radius: $border-radius;
  border-right: 0;
  &::before {
    border: $icon-border-width solid currentColor;
    border-bottom-right-radius: $border-radius;
    border-left: 0;
    border-top: 0;
    content: "";
    height: .8em;
    left: 65%;
    top: 40%;
    width: .7em;
  }
  &::after {
    background: currentColor;
    border-radius: $border-radius;
    content: "";
    height: .3em;
    left: 10%;
    top: 100%;
    transform: translate(0, -90%) rotate(45deg);
    width: $icon-border-width;
  }
}

// Icon photo
.icon-photo {
  border: $icon-border-width solid currentColor;
  border-radius: $border-radius;
  &::before {
    border: $icon-border-width solid currentColor;
    border-radius: 50%;
    content: "";
    height: .25em;
    left: 35%;
    top: 35%;
    width: .25em;
  }
  &::after {
    border: $icon-border-width solid currentColor;
    border-bottom: 0;
    border-left: 0;
    content: "";
    height: .5em;
    left: 60%;
    transform: translate(-50%, 25%) rotate(-45deg);
    width: .5em;
  }
}

// Icon link
.icon-link {
  &::before,
  &::after {
    border: $icon-border-width solid currentColor;
    border-radius: 5em 0 0 5em;
    border-right: 0;
    content: "";
    height: .5em;
    width: .75em;
  }
  &::before {
    transform: translate(-70%, -45%) rotate(-45deg);
  }
  &::after {
    transform: translate(-30%, -55%) rotate(135deg);
  }
}

// Icon location
.icon-location {
  &::before {
    border: $icon-border-width solid currentColor;
    border-radius: 50% 50% 50% 0;
    content: "";
    height: .8em;
    transform: translate(-50%, -60%) rotate(-45deg);
    width: .8em;
  }
  &::after {
    border: $icon-border-width solid currentColor;
    border-radius: 50%;
    content: "";
    height: .2em;
    transform: translate(-50%, -80%);
    width: .2em;
  }
}

// Icon emoji
.icon-emoji {
  border: $icon-border-width solid currentColor;
  border-radius: 50%;
  &::before {
    border-radius: 50%;
    box-shadow: -.17em -.15em, .17em -.15em;
    content: "";
    height: .1em;
    width: .1em;
  }
  &::after {
    border: $icon-border-width solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    border-right-color: transparent;
    content: "";
    height: .5em;
    transform: translate(-50%, -40%) rotate(-135deg);
    width: .5em;
  }
}