:root {
  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  --icon-size-xxl: 48px;
}

/* Apply to either the placeholder <i> or the replaced <svg> */
.icon-xs, svg.feather.icon-xs { width: var(--icon-size-xs); height: var(--icon-size-xs); }
.icon-sm, svg.feather.icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-md, svg.feather.icon-md { width: var(--icon-size-md); height: var(--icon-size-md); }
.icon-lg, svg.feather.icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.icon-xl, svg.feather.icon-xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
.icon-xxl, svg.feather.icon-xxl { width: var(--icon-size-xxl); height: var(--icon-size-xxl); }

/* Utility: keep icons aligned with text */
.icon-inline { vertical-align: middle; display: inline-block; }