.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--color-lighDark); /* se pinta del color de texto */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}
.icon-larger {
  display: inline-block;
  width: 75px;
  height: 75px;
  background-color: var(--color-lighDark); /* se pinta del color de texto */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.icon-select {
    padding-left: 40px;
    height: 40px;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    background-size: 24px !important;
}

.icon-color-primary {
  background-color: var(--color-primary) !important;
}

.icon-search {
  -webkit-mask-image: url("../svg/general/search.svg");
  mask-image: url("../svg/general/search.svg");
}

.icon-facebook {
  -webkit-mask-image: url("../svg/social-network/facebook.svg");
  mask-image: url("../svg/social-network/facebook.svg");
}

.icon-instagram {
  -webkit-mask-image: url("../svg/social-network/instagram.svg");
  mask-image: url("../svg/social-network/instagram.svg");
}

.icon-linkedin {
  -webkit-mask-image: url("../svg/social-network/linkedin.svg");
  mask-image: url("../svg/social-network/linkedin.svg");
}

.icon-youtube {
  -webkit-mask-image: url("../svg/social-network/youtube.svg");
  mask-image: url("../svg/social-network/youtube.svg");
}

.icon-tiktok {
  -webkit-mask-image: url("../svg/social-network/tiktok.svg");
  mask-image: url("../svg/social-network/tiktok.svg");
}

.icon-pinterest {
  -webkit-mask-image: url("../svg/social-network/pinterest.svg");
  mask-image: url("../svg/social-network/pinterest.svg");
}

.icon-x {
  -webkit-mask-image: url("../svg/social-network/x.svg");
  mask-image: url("../svg/social-network/x.svg");
}



.icon-glass-cup{
  -webkit-mask-image: url("../svg/point-interest/glass-cup.svg");
  mask-image: url("../svg/point-interest/glass-cup.svg");
}

.icon-park{
  -webkit-mask-image: url("../svg/point-interest/park.svg");
  mask-image: url("../svg/point-interest/park.svg");
}

.icon-bag-shopping{
  -webkit-mask-image: url("../svg/point-interest/bag-shop.svg");
  mask-image: url("../svg/point-interest/bag-shop.svg");
}


.icon-preview {
  background-color: #000; /* color del icono */
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}