Custom emojis that have non square size

[RedKage]

Here is the issue: http://prntscr.com/jnlsip

Custom emoji:

[
{"name":"thumbsupparrot","short_names":["thumbsupparrot"],"text":"","emoticons":[],"keywords":["thumbsupparrot"],"imageUrl":"http://cultofthepartyparrot.com/parrots/thumbsupparrot.gif"}
]

Which renders this CSS:

element.style {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(http://cultofthepartyparrot.com/parrots/thumbsupparrot.gif);
    background-size: 100%;
}

I'm fixing this using this local stylus in my component which holds the picker

    :global(.emoji-mart-emoji)
      span
        background-position center
        background-repeat no-repeat