@adobe/spectrum-css/dist/components/icon/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Icon,
.spectrum-UIIcon {
  display: inline-block;
  color: inherit;
  fill: currentColor;
  pointer-events: none;
}

.spectrum-Icon:not(:root), .spectrum-UIIcon:not(:root) {
    overflow: hidden;
  }

.spectrum-Icon--sizeXXS,
  .spectrum-Icon--sizeXXS img,
  .spectrum-Icon--sizeXXS svg {
    height: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) / 2);
    width: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) / 2);
  }

.spectrum-Icon--sizeXS,
  .spectrum-Icon--sizeXS img,
  .spectrum-Icon--sizeXS svg {
    height: calc(var(--spectrum-global-dimension-size-300) / 2);
    width: calc(var(--spectrum-global-dimension-size-300) / 2);
  }

.spectrum-Icon--sizeS,
  .spectrum-Icon--sizeS img,
  .spectrum-Icon--sizeS svg {
    height: var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225));
    width: var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225));
  }

.spectrum-Icon--sizeM,
  .spectrum-Icon--sizeM img,
  .spectrum-Icon--sizeM svg {
    height: var(--spectrum-global-dimension-size-300);
    width: var(--spectrum-global-dimension-size-300);
  }

.spectrum-Icon--sizeL,
  .spectrum-Icon--sizeL img,
  .spectrum-Icon--sizeL svg {
    height: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) * 2);
    width: calc(var(--spectrum-alias-workflow-icon-size, var(--spectrum-global-dimension-size-225)) * 2);
  }

.spectrum-Icon--sizeXL,
  .spectrum-Icon--sizeXL img,
  .spectrum-Icon--sizeXL svg {
    height: calc(var(--spectrum-global-dimension-size-300) * 2);
    width: calc(var(--spectrum-global-dimension-size-300) * 2);
  }

.spectrum-Icon--sizeXXL,
  .spectrum-Icon--sizeXXL img,
  .spectrum-Icon--sizeXXL svg {
    height: calc(var(--spectrum-global-dimension-size-300) * 3);
    width: calc(var(--spectrum-global-dimension-size-300) * 3);
  }

.spectrum--medium .spectrum-UIIcon--large {
    display: none;
  }

.spectrum--medium .spectrum-UIIcon--medium {
    display: inline;
  }

.spectrum--large .spectrum-UIIcon--medium {
    display: none;
  }

.spectrum--large .spectrum-UIIcon--large {
    display: inline;
  }

.spectrum--large {
  --ui-icon-large-display: block;
  --ui-icon-medium-display: none;
}

.spectrum--medium {
  --ui-icon-medium-display: block;
  --ui-icon-large-display: none;
}

.spectrum-UIIcon--large {
  display: var(--ui-icon-large-display);
}

.spectrum-UIIcon--medium {
  display: var(--ui-icon-medium-display);
}

.spectrum-UIIcon-AlertMedium {
  width: var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-alert-medium-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-AlertSmall {
  width: var(--spectrum-icon-alert-small-width, var(--spectrum-global-dimension-size-175));
  height: var(--spectrum-icon-alert-small-height, var(--spectrum-global-dimension-size-175));
}

.spectrum-UIIcon-ArrowDownSmall {
  width: var(--spectrum-icon-arrow-down-small-width, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-icon-arrow-down-small-height);
}

.spectrum-UIIcon-ArrowLeftMedium {
  width: var(--spectrum-icon-arrow-left-medium-width, var(--spectrum-global-dimension-size-175));
  height: var(--spectrum-icon-arrow-left-medium-height);
}

.spectrum-UIIcon-Asterisk {
  width: var(--spectrum-fieldlabel-asterisk-size, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-fieldlabel-asterisk-size, var(--spectrum-global-dimension-size-100));
}

.spectrum-UIIcon-CheckmarkMedium {
  width: var(--spectrum-icon-checkmark-medium-width);
  height: var(--spectrum-icon-checkmark-medium-height);
}

.spectrum-UIIcon-CheckmarkSmall {
  width: var(--spectrum-icon-checkmark-small-width);
  height: var(--spectrum-icon-checkmark-small-height);
}

.spectrum-UIIcon-ChevronDownMedium {
  width: var(--spectrum-icon-chevron-down-medium-width);
  height: var(--spectrum-icon-chevron-down-medium-height, var(--spectrum-global-dimension-size-75));
}

.spectrum-UIIcon-ChevronDownSmall {
  width: var(--spectrum-icon-chevron-down-small-width, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-icon-chevron-down-small-height, var(--spectrum-global-dimension-size-75));
}

.spectrum-UIIcon-ChevronLeftLarge {
  width: var(--spectrum-icon-chevron-left-large-width);
  height: var(--spectrum-icon-chevron-left-large-height, var(--spectrum-global-dimension-size-200));
}

.spectrum-UIIcon-ChevronLeftMedium {
  width: var(--spectrum-icon-chevron-left-medium-width, var(--spectrum-global-dimension-size-75));
  height: var(--spectrum-icon-chevron-left-medium-height);
}

.spectrum-UIIcon-ChevronRightLarge {
  width: var(--spectrum-icon-chevron-right-large-width);
  height: var(--spectrum-icon-chevron-right-large-height, var(--spectrum-global-dimension-size-200));
}

.spectrum-UIIcon-ChevronRightMedium {
  width: var(--spectrum-icon-chevron-right-medium-width, var(--spectrum-global-dimension-size-75));
  height: var(--spectrum-icon-chevron-right-medium-height);
}

.spectrum-UIIcon-ChevronRightSmall {
  width: var(--spectrum-icon-chevron-right-small-width, var(--spectrum-global-dimension-size-75));
  height: var(--spectrum-icon-chevron-right-small-height, var(--spectrum-global-dimension-size-100));
}

.spectrum-UIIcon-ChevronUpSmall {
  width: var(--spectrum-icon-chevron-up-small-width, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-icon-chevron-up-small-height, var(--spectrum-global-dimension-size-75));
}

.spectrum-UIIcon-CornerTriangle {
  width: var(--spectrum-icon-cornertriangle-width, var(--spectrum-global-dimension-size-65));
  height: var(--spectrum-icon-cornertriangle-height, var(--spectrum-global-dimension-size-65));
}

.spectrum-UIIcon-CrossLarge {
  width: var(--spectrum-icon-cross-large-width);
  height: var(--spectrum-icon-cross-large-height);
}

.spectrum-UIIcon-CrossMedium {
  width: var(--spectrum-icon-cross-medium-width, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-icon-cross-medium-height, var(--spectrum-global-dimension-size-100));
}

.spectrum-UIIcon-CrossSmall {
  width: var(--spectrum-icon-cross-small-width, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-icon-cross-small-height, var(--spectrum-global-dimension-size-100));
}

.spectrum-UIIcon-DashSmall {
  width: var(--spectrum-icon-dash-small-width);
  height: var(--spectrum-icon-dash-small-height);
}

.spectrum-UIIcon-DoubleGripper {
  width: var(--spectrum-icon-doublegripper-width, var(--spectrum-global-dimension-size-200));
  height: var(--spectrum-icon-doublegripper-height, var(--spectrum-global-dimension-size-50));
}

.spectrum-UIIcon-FolderBreadcrumb {
  width: var(--spectrum-icon-folderbreadcrumb-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-folderbreadcrumb-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-HelpMedium {
  width: var(--spectrum-icon-info-medium-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-info-medium-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-HelpSmall {
  width: var(--spectrum-icon-info-small-width, var(--spectrum-global-dimension-size-175));
  height: var(--spectrum-icon-info-small-height, var(--spectrum-global-dimension-size-175));
}

.spectrum-UIIcon-InfoMedium {
  width: var(--spectrum-icon-info-medium-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-info-medium-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-InfoSmall {
  width: var(--spectrum-icon-info-small-width, var(--spectrum-global-dimension-size-175));
  height: var(--spectrum-icon-info-small-height, var(--spectrum-global-dimension-size-175));
}

.spectrum-UIIcon-Magnifier {
  width: var(--spectrum-icon-magnifier-width, var(--spectrum-global-dimension-size-200));
  height: var(--spectrum-icon-magnifier-height, var(--spectrum-global-dimension-size-200));
}

.spectrum-UIIcon-SkipLeft {
  width: var(--spectrum-icon-skip-left-width);
  height: var(--spectrum-icon-skip-left-height);
}

.spectrum-UIIcon-SkipRight {
  width: var(--spectrum-icon-skip-right-width);
  height: var(--spectrum-icon-skip-right-height);
}

.spectrum-UIIcon-Star {
  width: var(--spectrum-icon-star-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-star-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-StarOutline {
  width: var(--spectrum-icon-star-outline-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-star-outline-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-SuccessMedium {
  width: var(--spectrum-icon-success-medium-width, var(--spectrum-global-dimension-size-225));
  height: var(--spectrum-icon-success-medium-height, var(--spectrum-global-dimension-size-225));
}

.spectrum-UIIcon-SuccessSmall {
  width: var(--spectrum-icon-success-small-width, var(--spectrum-global-dimension-size-175));
  height: var(--spectrum-icon-success-small-height, var(--spectrum-global-dimension-size-175));
}

.spectrum-UIIcon-TripleGripper {
  width: var(--spectrum-icon-triplegripper-width);
  height: var(--spectrum-icon-triplegripper-height, var(--spectrum-global-dimension-size-85));
}