.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: currentColor;
  color: currentColor;
  font-size: 18px;
  vertical-align: middle;
  filter: var(--icon-filter, none);
}

.icon-lg {
  width: auto;
  height: auto;
  font-size: 26px;
}

.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 24px; height: 24px; }

.icon--muted {
  filter: var(--icon-filter-muted, var(--icon-filter));
}

.icon--nofilter {
  filter: none;
}

.icon--spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nav-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: invert(80%) sepia(4%) saturate(500%) hue-rotate(200deg) brightness(105%);
  opacity: 0.95;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.nav-item:hover .nav-icon-img,
.nav-item.active .nav-icon-img {
  filter: invert(65%) sepia(60%) saturate(1200%) hue-rotate(220deg) brightness(110%);
  opacity: 1;
}