<div style="display: grid; grid: 2rem / repeat(auto-fit, 2rem minmax(10rem, 1fr)); gap: 1rem .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: .3125em;
  }

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

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

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