.icon {

  &-primary{

    &::before {
      color: var(--color-primary);
    }
    &.hover:hover::before {
      color: var(--color-secondary);
    }
  }
  &-secondary{

    &::before {
      color: var(--color-secondary);
    }
    &.hover:hover::before {
      color: var(--color-primary);
    }
  }
  &-third{

    &::before {
      color: var(--color-third);
    }
    &.hover:hover::before {
      color: var(--color-heading);
    }
  }
  &-heading{

    &::before {
      color: var(--color-heading);
    }
    &.hover:hover::before {
      color: var(--color-third);
    }
  }
  &-white {

    &::before {
      color: white;
    }
  }
  &-grey::before {
    color: var(--color-text);
  }
}