icon.Svg {
  display: block;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--TEXT);
}

icon.SmallSize {
  height: 16px;
  width: 16px;
}
icon.NormalSize {
  height: 24px;
  width: 24px;
}
icon.LargeSize {
  height: 32px;
  width: 32px;
}
icon.ExtraLargeSize {
  height: 48px;
  width: 48px;
}

icon.AccentColor {
  background-color: var(--ACCENT_PRIMARY);
}
icon.FontOnAccentColor {
  background-color: var(--TEXT_ON_ACCENT);
}
icon.FontColor {
  background-color: var(--TEXT);
}
icon.DisabledColor {
  background-color: var(--TEXT_DISABLED);
}

icon.Cancel {
  mask-image: url(/static/common/icons/ui/cancel.svg);
}
icon.Back {
  mask-image: url(/static/common/icons/ui/back.svg);
}
icon.Home {
  mask-image: url(/static/common/icons/ui/home.svg);
}
icon.Home.Fill {
  mask-image: url(/static/common/icons/ui/home_fill.svg);
}
icon.Settings {
  mask-image: url(/static/common/icons/ui/settings.svg);
}
icon.Settings.Fill {
  mask-image: url(/static/common/icons/ui/settings_fill.svg);
}
icon.Add {
  mask-image: url(/static/common/icons/ui/add.svg);
}