JSFiddle - React, Tailwind, and code Playground

HTML

Original one
<div>
<img class="original" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
</div>

<div>Icon one</div>

<div class="icon">
  <div class="icon-content">
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
  </div>
</div>

<div>
Color modifier
</div>

<div class="color-modifier">
  <div class="shadow-caster">
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
  </div>
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
</div>

CSS

.original {
  width: 100px;
}

.icon {
  font-size: 100px;
  height: 1em;
  width: 1em;
  overflow: hidden;
  display: inline-flex;
}

.icon-content {
  display: flex;
  height: 1em;
  width: 1em;
  position: relative;
  left: -1em;
  filter: drop-shadow(1em 0 0px #4444dd);
}

.color-modifier {
  font-size: 100px;
  height: 1em;
  width: 1em;
  overflow: hidden;
  display: inline-flex;
  position: relative;
}

.shadow-caster {
  position: absolute;
  top: 0;
  left: -1em;
  right: 0;
  bottom: 0;
  z-index: 2;
  filter: drop-shadow(1em 0 0px green);
  display: flex;
  opacity: 0.5;
}