:where(html) {

  /*** Icon ***/

  /* Icon Size Based on Pixels */
  --icon-size-xs: var(--body-text-size-xs); /* 12px */
  --icon-size-s:  var(--body-text-size-s); /* 14px */
  --icon-size-m:  var(--body-text-size-m); /* 16px */
  --icon-size-l:  var(--body-text-size-l); /* 18px */
  --icon-size-xl:  var(--heading-text-size-h6); /* 20px */
  --icon-size-h6: var(--heading-text-size-h6); /* 20px */
  --icon-size-h5: var(--heading-text-size-h5); /* 24px */
  --icon-size-h4: var(--heading-text-size-h4);  /* 28px */
  --icon-size-h3: var(--heading-text-size-h3);  /* 32px */
  --icon-size-h2: var(--heading-text-size-h2);  /* 36px */
  --icon-size-h1: var(--heading-text-size-h1);  /* 40px */
  --icon-size-display-s: 48px;  /* 40px */

  /* Icon Line Height Based on Pixels */
  --icon-line-height-xs: var(--body-text-line-height-xs); /* 20px */
  --icon-line-height-s:  var(--body-text-line-height-s); /* 20px */
  --icon-line-height-m:  var(--body-text-line-height-m); /* 24px */
  --icon-line-height-l:  var(--body-text-line-height-l); /* 28px */
  --icon-line-height-h6: var(--heading-text-line-height-h6); /* 28px */
  --icon-line-height-h5: var(--heading-text-line-height-h5); /* 32px */
  --icon-line-height-h4: var(--heading-text-line-height-h4); /* 36px */
  --icon-line-height-h3: var(--heading-text-line-height-h3); /* 40px */
  --icon-line-height-h2: var(--heading-text-line-height-h2); /* 44px */
  --icon-line-height-h1: var(--heading-text-line-height-h1); /* 48px */
  
  /* Icon Color */
  --icon-color: var(--body-text-color);

  /* Icon Background Color */
  --icon-bg: var(--body-text-bg);
}


:where(
  .icon-xs,
  .icon-s,
  .icon-m,
  .icon-l) {
  /* color: var(--icon-color); */
  background-color: var(--icon-bg);
  /* border-radius: var(--border-radius-circle); */
}
:where(.icon-xs) {
  font-size: var(--icon-size-xs);
  line-height: var(--icon-line-height-xs);
  height: var(--icon-size-xs);
  --button-icon-size: var(--button-icon-size-xs);
}
:where(.icon-s) {
  font-size: var(--icon-size-s);
  line-height: var(--icon-line-height-s);
  height: var(--icon-size-s);
  --button-icon-size: var(--button-icon-size-s);
}
:where(
  .icon,
  .icon-m) {
  font-size: var(--icon-size-m);
  line-height: var(--icon-line-height-m);
  height: var(--icon-size-m);
  --button-icon-size: var(--button-icon-size-m);
}
:where(.icon-l) {
  font-size: var(--icon-size-l);
  line-height: var(--icon-line-height-l);
  height: var(--icon-size-l);
  --button-icon-size: var(--button-icon-size-l);
}
:where(.icon-xl) {
  font-size: var(--icon-size-xl);
  line-height: var(--icon-line-height-xl);
  height: var(--icon-size-xl);
  --button-icon-size: var(--button-icon-size-xl);
}
:where(
  h6.icon,
  h5.icon,
  h4.icon,
  h3.icon,
  h2.icon,
  h1.icon,
  .h6.icon,
  .h5.icon,
  .h4.icon,
  .h3.icon,
  .h2.icon,
  .h1.icon){
  color: var(--icon-color);
  background-color: var(--icon-bg);
  /* border-radius: var(--border-radius-circle); */
}
:where(
  h6.icon,
  .h6.icon) {
  font-size: var(--icon-size-h6);
  line-height: var(--icon-line-height-h6);
  height: var(--icon-size-h6);
  --button-icon-size: var(--button-icon-size-h6);
}
:where(
  h5.icon,
  .h5.icon) {
  font-size: var(--icon-size-h5);
  line-height: var(--icon-line-height-h5);
  height: var(--icon-size-h5);
  --button-icon-size: var(--button-icon-size-h5);
}
:where(
  h4.icon,
  .h4.icon)  {
  font-size: var(--icon-size-h4);
  line-height: var(--icon-line-height-h4);
  height: var(--icon-size-h4);
  --button-icon-size: var(--button-icon-size-h4);
}
:where(
  h3.icon,
  .h3.icon)  {
  font-size: var(--icon-size-h3);
  line-height: var(--icon-line-height-h3);
  height: var(--icon-size-h3);
  --button-icon-size: var(--button-icon-size-h3);
}
:where(
  h2.icon,
  .h2.icon)  {
  font-size: var(--icon-size-h2);
  line-height: var(--icon-line-height-h2);
  height: var(--icon-size-h2);
  --button-icon-size: var(--button-icon-size-h2);
}
:where(
  h1.icon,
  .h1.icon) {
  font-size: var(--icon-size-h1);
  line-height: var(--icon-line-height-h1);
  height: var(--icon-size-h1);
  --button-icon-size: var(--button-icon-size-h1);
}

iconify-icon.large {
  font-size: var(--icon-size-l);
  line-height: var(--icon-line-height-l);
  height: var(--icon-size-l);
}

iconify-icon.x-large {
  font-size: var(--icon-size-xl);
  line-height: var(--icon-line-height-xl);
  height: var(--icon-size-xl);
}