:root {
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 28px;
}
.ui-icon {
  width: var(--icon-size, var(--icon-md));
  height: var(--icon-size, var(--icon-md));
  max-width: none;
  max-height: none;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-icon.icon-xs { --icon-size: var(--icon-xs); }
.ui-icon.icon-sm { --icon-size: var(--icon-sm); }
.ui-icon.icon-lg { --icon-size: var(--icon-lg); }
.ui-icon.icon-xl { --icon-size: var(--icon-xl); }