.icon-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  /* display: inline-block !important;
  vertical-align: middle;
  transform: translateY(-2px); */
}

.menu-icon-svg {
  width: 18px;
  height: 18px;
  fill: currentColor; /* clave */
  /* transition: color 0.2s ease; */
  transition: transform 0.2s ease, opacity 0.2s ease;
  vertical-align: middle !important;
}

.icon-svg-xs { width: 12px; height: 12px; }
.icon-svg-sm { width: 16px; height: 16px; }
.icon-svg-md { width: 20px; height: 20px; }
.icon-svg-lg { width: 24px; height: 24px; }
.icon-svg-xl { width: 28px; height: 28px; }
.icon-svg-main-profile { width: 75px; height: 75px; }

.icon-svg-xs,
.icon-svg-sm,
.icon-svg-md,
.icon-svg-lg,
.icon-svg-xl {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn:hover .menu-icon-svg,
.btn:hover .icon-svg-xs,
.btn:hover .icon-svg-md,
.btn:hover .icon-svg-lg,
.btn:hover .icon-svg-sm {
    transform: scale(1.1) rotate(5deg);
}

.icon-svg-sage { color: #99AD7A; }

.icon-svg-coral { color: #FF5B5B; }

.icon-svg-teal { color: #79B6B3; }

.icon-svg-azure { color: #5DADE2; }

.icon-svg-lime { color: #D8D365; }

.icon-svg-home {
  width: 35px;
  height: 35px;
  fill: currentColor; /* clave */
  /* transition: color 0.2s ease; */
  /* transition: transform 0.2s ease, opacity 0.2s ease;
  vertical-align: middle !important; */
}
.icon-svg-home-xs { width: 30px; height: 30px; }
.icon-svg-home-sm { width: 40px; height: 40px; }
.icon-svg-home-md { width: 45px; height: 45px; }
.icon-svg-home-lg { width: 50px; height: 50px; }