<div style="display: grid; grid: 2rem / repeat(auto-fit, 2rem minmax(10rem, 1fr)); gap: 1rem 0.5rem">
  <svg class="icon"><use href="/main-icons-sprite.svg#arrow-left" /></svg>
  arrow-left

  <svg class="icon"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
  arrow-right

  <svg class="icon"><use href="/main-icons-sprite.svg#bullet-thin" /></svg>
  bullet-thin

  <svg class="icon"><use href="/main-icons-sprite.svg#bullet" /></svg>
  bullet

  <svg class="icon"><use href="/main-icons-sprite.svg#check" /></svg>
  check

  <svg class="icon"><use href="/main-icons-sprite.svg#info" /></svg>
  info

  <svg class="icon"><use href="/main-icons-sprite.svg#error" /></svg>
  error

  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
  chevron-down

  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
  chevron-left

  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
  chevron-right

  <svg class="icon"><use href="/main-icons-sprite.svg#chevron-up" /></svg>
  chevron-up

  <svg class="icon"><use href="/main-icons-sprite.svg#clock" /></svg>
  clock

  <svg class="icon"><use href="/main-icons-sprite.svg#close" /></svg>
  close

  <svg class="icon"><use href="/main-icons-sprite.svg#facebook" /></svg>
  facebook

  <svg class="icon"><use href="/main-icons-sprite.svg#home" /></svg>
  home

  <svg class="icon"><use href="/main-icons-sprite.svg#instagram" /></svg>
  instagram

  <svg class="icon"><use href="/main-icons-sprite.svg#layers" /></svg>
  layers

  <svg class="icon"><use href="/main-icons-sprite.svg#linkedin" /></svg>
  linkedin

  <svg class="icon"><use href="/main-icons-sprite.svg#minus" /></svg>
  minus

  <svg class="icon"><use href="/main-icons-sprite.svg#play" /></svg>
  play

  <svg class="icon"><use href="/main-icons-sprite.svg#quote" /></svg>
  quote

  <svg class="icon"><use href="/main-icons-sprite.svg#search" /></svg>
  search

  <svg class="icon"><use href="/main-icons-sprite.svg#tag" /></svg>
  tag

  <svg class="icon"><use href="/main-icons-sprite.svg#x" /></svg>
  x

  <svg class="icon"><use href="/main-icons-sprite.svg#youtube" /></svg>
  youtube

  <svg class="icon"><use href="/main-icons-sprite.svg#date" /></svg>
  date

  <svg class="icon"><use href="/main-icons-sprite.svg#location" /></svg>
  location

  <svg class="icon"><use href="/main-icons-sprite.svg#bars" /></svg>
  bars

  <svg class="icon -circle"><use href="/main-icons-sprite.svg#check" /></svg>
  check.-circle

  <svg class="icon -circle"><use href="/main-icons-sprite.svg#minus" /></svg>
  minus.-circle

  <svg class="icon -circle"><use href="/main-icons-sprite.svg#play" /></svg>
  play.-circle

  <svg class="icon -circle"><use href="/main-icons-sprite.svg#chevron-down" /></svg>
  chevron-down.-circle

  <svg class="icon -circle success"><use href="/main-icons-sprite.svg#check" /></svg>
  check.-circle.success

  <svg class="icon -circle info"><use href="/main-icons-sprite.svg#info" /></svg>
  info.-circle.info

  <svg class="icon -circle warning"><use href="/main-icons-sprite.svg#error" /></svg>
  warning.-circle.warning

  <svg class="icon -circle error"><use href="/main-icons-sprite.svg#error" /></svg>
  error.-circle.error

  <svg class="icon -square success"><use href="/main-icons-sprite.svg#check" /></svg>
  check.-square.success

  <svg class="icon -square info"><use href="/main-icons-sprite.svg#info" /></svg>
  info.-square.info

  <svg class="icon -square warning"><use href="/main-icons-sprite.svg#error" /></svg>
  warning.-square.warning

  <svg class="icon -square error"><use href="/main-icons-sprite.svg#error" /></svg>
  error.-square.error
</div>

.icon {
  --icon-color: var(--accent-color);

  aspect-ratio: 1;
  height: 1.5em;

  &.-square,
  &.-circle {
    background: var(--accent-color);

    --icon-color: var(--icon-stroke-color);

    display: inline grid;
    padding: 0.3125em;
  }

  &.-square {
    border-radius: 0.25em;
  }

  &.-circle {
    /* Using mask-image to avoid clipping the icons. */
    mask: radial-gradient(closest-side, #ffffff calc(100% - 1px), #00000000);
  }

  &.-light {
    --icon-color: var(--accent-color-700);

    background: var(--accent-color-300);
  }
}