User experience (UX) consistency: Replace emojis with twemojis

Hello all,

I’m glad to share with you something that has not been addressed yet (I believe): the fact that emojis are rendered differently on several OS, browsers, etc.

Twemojis are already used by Streamlit but only for the favicon ! All other emojis are rendered using the OS/Browser emojis and in some versions of Windows, those are DAMN ugly !

I think there should be an option in set_page_config to force the use of Twemojis everywhere in your streamlit app.

In the meantime, here’s the code you can insert (tested with v1.23.1) to automatically replace all the default emojis with those of Twitter. Unfortunately it uses a timeout of 1second (change this to your needs) because I did not find a way to trigger the whole page “load” event. If someone has a suggestion to fix this, that would be great !

Code inspiration is in the comments of the snippet. Hope you’ll like this.

from streamlit.components.v1 import html

<script src="" crossorigin="anonymous"></Script>
window.addEventListener("load", (event) => {
    // Parses the document body and
    // inserts <img> tags in place of Unicode Emojis

    setTimeout (function() {
    twemoji.parse(window.frameElement.getRootNode(), { folder: 'svg', ext: '.svg' }); // This is to specify to Twemoji to use SVGs and not PNGs
    }, 1000);
""", height=0)

        img.emoji {
            /* Since we are using SVGs, you have to change the width using CSS */

            This is to make the emojis feel like actual emojis to 
            the user and they won't act like images. This makes the emojis
            non-reactive to any mouse events such as dragging, 
            hovering, clicking etc. Makes it feel like its actual text.
            pointer-events: none; 
        """, unsafe_allow_html=True)

Do you have an example of using this in Streamlit?

sorry there were several errors in this code … looks like I copy/pasted an old WIP version :zipper_mouth_face:

this should work now

hello , thanks but any way to use this on streamlit selectbox ?

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.