How to resize twemoji emojis?

Question

I'm using twemoji to style emojis on a page:

$(document).ready(function () {  
  document.body = twemoji.parse(document.body)
 });

It works fine, however the default emojis turn out to be 72x72:

<img draggable="false" class="emoji" alt="" src="https://twemoji.maxcdn.com/2/72x72/1f600.png">

I'd like twemoji to render 16x16 png or svg icons instead.

The docs does not explicitly say how to change the icon size, so I tried things like:

$(document).ready(function () {  
  document.body = twemoji.parse(document.body, 
   {size: 16}
    )
 });

But none worked. How can I fix this?

They have it but the problem is how to choose `16x16` instead of the default `72x72`. — Karlom, May 30 '19 at 15:33

score 1 · Accepted Answer · answered May 30 '19 at 15:39

1

You can set the default size before running the parse() method:

$(document).ready(function () {  
  // Set the size of the rendered Emojis
  // This can be set to 16x16, 36x36, or 72x72
  twemoji.size = '36x36';

  document.body = twemoji.parse(document.body);
});

Credit to this page for the tip (and to this simple google search for finding it!).

answered May 30 '19 at 15:39

ADyson

57,178
14
51
63

1

This does work only for `twemoji.size = '72x72';` According to the docs: `the default PNG icon size is 72 pixels and there are no other PNG assets for 16 or 32.` – Karlom May 30 '19 at 15:42
it's odd because they are there in the github repo. Perhaps there is an issue on the CDN – ADyson May 30 '19 at 15:55
1

Right, I've just realized that I was using `v2` of the twemoji CDN. Using `` solved the problem. Thanks. – Karlom May 30 '19 at 15:57

How to resize twemoji emojis?

1 Answers1