絵文字の色をCSSで反転させて引き伸ばすと背景画像になる

絵文字の色を知っていなくても、とにかく引き延ばせば色を得られるのが良いと思う。
また、別の色を選んでくるんじゃなくて反転した色を使っているのも管理工数が少なくて良い。

😄😄

🔥🔥

👗👗

🤸🏼‍♂️🤸🏼‍♂️

👁👁

🚵🏼‍♂️🚵🏼‍♂️

🚴🏿‍♀️🚴🏿‍♀️

マークアップ的にはタグ1個では済んでないけど、これをただのspan1個とかにできればより良いと思う。
scaleで巨大化して、はみ出たところをトリミングするためにcontain: paintにしている。本来の用途と違う使い方なので真似しないでください。

<span class="composite">
  <span class="bg">😄</span>
  <span class="front">😄</span>
</span>

span.composite {
  display: inline-block;
  height: 1em;
  width: 1em;
  font-size: 8em;
  line-height: 1.0;
  contain: paint;
}
span.composite .bg {
  left: 0;
  top: 0;
  position: absolute;
  filter: invert(1);
  transform: scale(50);
}
span.composite .front {
  left: 0;
  top: 0;
  position: absolute;
}