JSFiddle - React, Tailwind, and code Playground

HTML

<i class="em em-grinning"/>

CSS

.em {
  display: inline-block;
  height: 1em;
  width: 1em;
  overflow: hidden;
  line-height: 18px;
  font-size: 22px;
  vertical-align: middle;
  margin-top: -4px;
  color: transparent !important;
  background: url(https://raw.githubusercontent.com/needim/wdt-emoji-bundle/master/sheets/sheet_messenger_64_indexed_128.png);
  background-size: 4100%;
}

.em .em-grinning {
	background-position: 65% 37.5%
}

.em.em-grin {
	background-position: 65% 40%
}