.root {
  display: inline-block;
  position: relative;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.root :global svg {
  width: inherit;
  height: inherit;
  line-height: inherit;
}

.pactH {
  height: 1.1em;
  width: calc(1.1em * 2.272727273);
}

/* Stroked */
.clock,
.coffee,
.recurring,
.cog,
.tick,
.chevron,
.bean,
.aeropressFilter,
.anDrip,
.pause,
.cross,
.plus,
.heart,
.pod,
.pod_long,
.pod_short,
.card,
.arrow,
.asap {
  fill: transparent;
  stroke: currentColor;
}

/* Filled */
.pactV,
.pactH,
.triangle,
.stamp,
.pin,
.play,
.thumb,
.voucher,
.drip,
.aeropress,
.cafetiere,
.wholebean,
.espresso,
.stovetop,
.calendar {
  fill: currentColor;
}

.twitter {
  fill: var(--color-twitter);
}
.facebook {
  fill: var(--color-facebook);
}
.instagram {
  fill: var(--color-instagram);
}

.root {
  display: inline-block;
  position: relative;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.root :global svg {
  width: inherit;
  height: inherit;
  line-height: inherit;
}

.pactH {
  height: 1.1em;
  width: calc(1.1em * 2.272727273);
}

/* Stroked */
.clock,
.coffee,
.recurring,
.cog,
.tick,
.chevron,
.bean,
.aeropressFilter,
.anDrip,
.pause,
.cross,
.plus,
.heart,
.pod,
.pod_long,
.pod_short,
.card,
.arrow,
.play,
.asap {
  fill: transparent;
  stroke: currentColor;
}

/* Filled */
.pactV,
.pactH,
.triangle,
.stamp,
.pin,
.thumb,
.voucher,
.drip,
.aeropress,
.cafetiere,
.wholebean,
.espresso,
.stovetop,
.calendar {
  fill: currentColor;
}

.twitter {
  fill: var(--color-twitter);
}
.facebook {
  fill: var(--color-facebook);
}
.instagram {
  fill: var(--color-instagram);
}

Change play icon to be stroked
Change play icon to be stroked
