JSFiddle - React, Tailwind, and code Playground

HTML

<span class="block block-0"></span>
<span class="block block-1"></span>
<span class="block block-2"></span>
<span class="block block-3"></span>

CSS

.filter-invert {
  filter: invert(1);
}
.block {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(https://dr.habracdn.net/qna/5eaa840c/images/placeholders_icons_sheet.png);
  background-repeat: no-repeat;
  user-select: none;
}
.block.block-0 {
  background-position: 0 0px;
}
.block.block-1 {
  background-position: -150px 0px;
}
.block.block-2 {
  background-position: -300px 0px;
}
.block.block-3 {
  background-position: -450px 0px;
}

JavaScript

$('body').on('click', '.block', function(event){
	if (event.shiftKey) {
    $(event.currentTarget).toggleClass('filter-invert');
  }
});