Template:CSS Icon/style.css

/* all icons should take up the same base amount of space */
.template-css-icon {
  width: 1.6em;
  height: 1.6em;
  display: inline-block;
  position: relative;
  vertical-align: center;
  /* for seeing how much space the container itself takes up, will not be in final version */
  /*! background: color-mix(currentColor 10%, transparent 100%); */
}

/* color values for theme-aware color classes */
.template-css-icon.green {
  color:#0baf3a;
}
html.view-dark .template-css-icon.green {
  color:#0DCF45;
}
.template-css-icon.blue {
  color:#4B84F6;
}
html.view-dark .template-css-icon.blue {
  color:#74A1FF;
}
.template-css-icon.yellow {
  color:#999e00;
}
html.view-dark .template-css-icon.yellow {
  color:#ffe141;
}
.template-css-icon.red {
  color:#CF0000;
}
html.view-dark .template-css-icon.red {
  color:#FB7575;
}
.template-css-icon.purple {
  color:#4F45B4;
}
html.view-dark .template-css-icon.purple {
  color:#8378F6;
}
.template-css-icon.orange {
  color:#C98400;
}
html.view-dark .template-css-icon.orange {
  color:#FF8F2C;
}

/* hide the "alt text" span generated by the template (will be used as fallback if icon is used in heading) */
.template-css-icon .css-icon__alt {
  display:none;
}

/* shapes! */
.template-css-icon.css-icon__yes::after {
  position:absolute;
  inset: 0;
  display:inline-block;
  content:' ';
  border:solid 0px currentColor;
  width:.46em;
  height:.93em;
  border-bottom:solid .3em currentColor;
  border-right:solid .3em currentColor;
  transform:rotate(45deg);
  margin-left:.43em;
  margin-top:.05em;
}

.template-css-icon.css-icon__no::before,
.template-css-icon.css-icon__no::after {
  position:absolute;
  inset: 0;
  display:inline-block;
  content:' ';
  border:solid 0px currentColor;
  border-bottom:solid .3em currentColor;
  width:1.4em;
  height:0em;
  transform:rotate(45deg);
  margin-left:0.074em;
  margin-top:.66em;
}

.template-css-icon.css-icon__no::after {
  transform:rotate(-45deg);
}

.template-css-icon.css-icon__circle::before {
  position:absolute;
  inset: 0;
  display:inline-block;
  content:" ";
  border:solid .25em currentColor;
  border-radius: 1em;
  width:.9em;
  aspect-ratio: 1;
  margin: .1em;
}
.template-css-icon.css-icon__circle::after {
  position:absolute;
  inset: 0;
  display:inline-block;
  content:" ";
  border:solid 0px currentColor;
  border-bottom:solid .25em currentColor;
  width:1.1em;
  height:0em;
  transform:rotate(-45deg);
  margin-left:.25em;
  margin-top:.65em
}