next-static-site/styles/_icons.scss

.icon {
  display: inline-block;
  background-color: $jambonz;
  width: $icon-size-1;
  height: $icon-size-1;
  border-radius: 24px;
  position: relative;

  @media (max-width: $width-mobile) {
    width: $icon-size-2;
    height: $icon-size-2;
  }

  svg {
    stroke: $white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;

    @media (max-width: $width-mobile) {
      width: 18px;
      height: 18px;
    }
  }

  &--pill {
    background-color: transparent;
    border: 2px solid $jambonz;

    svg {
      stroke: $jambonz;
    }
  }

  &--fill {
    &--purple {
      background-color: $purple;
    }

    &--blue {
      background-color: $blue;
    }

    &--teal {
      background-color: $teal;
    }

    &--white {
      background-color: $white;

      svg {
        stroke: $jambonz;
      }
    }
  }
}

.icons {
  margin: 0 -16px;

  @media (max-width: $width-mobile) {
    margin: 0 -8px;
  }

  .icon {
    margin: 0 16px;

    @media (max-width: $width-mobile) {
      margin: 0 8px;
    }
  }
}