Cannot display emoji ✔️, 🙋‍♂️

[yzhang-gh]

Steps to Reproduce:

1. Open a new file
2. Copy these two emoji ✔️❌ to it
3. See this result

Expected

on Windows 10

---

2022.12: Edited to add a workaround:

Workaround. Append a color emoji font to the editor font family e.g.:

• Windows: Consolas, 'Courier New', monospace, 'Segoe UI Emoji'
• MacOS: Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'
• Linux: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'

e.g. on macOS

• "editor.fontFamily": "Roboto Mono, 'Apple Color Emoji'",

or for a cross-platform solution:

• "editor.fontFamily": "Consolas, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji'"

[rebornix]

The style is decided by the browser and since we are using Chromium under the hood, it's Google's Emoji.

[rianadon]

This may not be how it really works, but from my understanding this is how Windows displays emoji as a fallback when no specific "emoji font" is used.

This can be fixed by adding 'Segoe UI Emoji' to the end of the editor.fontFamily setting so emojis fall back to the correct, colored font. Or you could use 'Segoe UI Symbol' instead to get monochrome emoji.

Thus, building off the default setting, Consolas, 'Courier New', monospace, 'Segoe UI Emoji' would give you colored emoji. This should really be the default. But for now you could change this yourself to make the emoji display correctly.

[yzhang-gh]

@rianadon many thanks!

[rianadon]

@alexandrudima I wouldn't call this an issue with something upstream since there is a solution to solve this in Electron/Chromium - add all the emoji fonts to the font stack. For example GitHub uses the emoji fonts for both macOS and Windows in their CSS (along with the native system fonts): -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol".

The fix to this would be to edit the default by appending Segoe UI Emoji and possibly the Apple emoji font too.

[yzhang-gh]

Another emoji: 🙋‍♂️ (man raising hand) in vscode expected (as shown on GitHub webpage)

with font settings Consolas, 'Microsoft Yahei', 'Segoe UI emoji', 'Segoe UI Symbol' on Windows 10 Pro 1709

[rianadon]

I see this too. The issue goes away when I change the font to only 'Segoe UI Emoji', which likely handles the zero width joiner.

This probably isn't going to have an easy fix, as while putting the emoji font first fixes the problem, it doesn't allow for the customization of the text font (as the emoji font seems to have glyphs for text). One solution would be to do as GitHub does and enclose emoji inside a separate element with its own font-family, but doing so would require a change in Monaco's syntax highlighting.

[sylann]

When I paste this emoji: 👈, in any file in vscode (on ubuntu), I get this : It's the same in the integrated terminal of vscode;

While it is properly displayed in my terminal (tilix).

[rianadon]

@SylannBin good find! Would you happen to know what font tilix is using?

Also what happens if you add 'Noto Color Emoji' to the start or end of your editor.fontFamily setting (with the single quotes)? It seems like this is the emoji font Ubuntu uses but I'm not completely sure.

[sylann]

@rianadon Adding the 'Noto Color Emoji' font family makes the above emoji properly displayed both in the editor and the integrated terminal. But without surprise, it also affects all other characters. For example, numbers and stars are showed in a peculiar white fashion:

However if I put the font at the end of the list, it works perfectly.

Apparently, the ability to print the emojis properly in tilix is not related to Tilix itlsef but to the version of GTK that is being used. Color emojis work in ubuntu 18.04 but not in 17.10, it appears it has been added with gtk 3.22. source I've searched a bit, in the gtk repo, it seems the feature was handled by cairo for several years already, and was fixed very recently in gtk, but this is quite obscure to me right now and I couldn't figure out which commits introduced the fix.

[rianadon]

Great to hear it works if you put the font at the end! I've never seen an emoji font handle stars and numbers specially before though.

Also, I'm probably going to submit a PR soon to change the default font-family to include emoji. For my later reference (and anyone looking to make emoji work on their system), these defaults would be:

• Windows: Consolas, 'Courier New', monospace, 'Segoe UI Emoji'
• MacOS: Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'
• Linux: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'

[NatoBoram]

I confirm that this worked for me on Ubuntu.

"editor.fontFamily": "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'"

[Yanpas]

Beetle :beetle: emoji used by java language server is not rendered on linux:

"editor.fontFamily": "'Twitter Color Emoji', 'Fira Code','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'"

Seems like there is color-emoji rendering problem on linux, kubuntu 18.04

[develleoper]

Also experiencing it on Windows 10, October update. Especially difficult to get emoji fallbacks working in the integrated terminal (haven't found a fully working solution yet).

[Elaniobro]

add 🧪(test tube) emoji to the growing list.

[alexdima]

I have tested on browsers with https://microsoft.github.io/monaco-editor/

app	result
VS Code Insiders (Chromium Version 69.0.3497.128)
Chromium Version 69.0.3497.128
Chrome Stable Version 77.0.3865.90
Edge Dev Chromium Version 79.0.287.2
Chrome Canary Version 79.0.3936.0

So, IMHO this is an upstream issue which will get resolved once we update to a newer Electron / Chromium version which contains this change... In the meantime, you can workaround on your machines via the editor.fontFamily

[polarathene]

While this is apparently solved(or will be with future Electron/VSCode release), thought I might suggest what might have been a cause.

✔️(✔️): https://emojipedia.org/heavy-check-mark/ ❌(❌): https://emojipedia.org/cross-mark/

You can note the codepoints for both of these(defined after the image preview list from various vendors). ✔️ requires the Variation Selector VS16(FE0F) to switch to a colour presenation while the ❌ does not. If you were to inspect the codepoints used in the glyphs, you might just find that the ✔️ lacked the VS16 codepoint to indicate emoji presentation.

🙋‍♂️(🙋‍♂️): https://emojipedia.org/man-raising-hand/

This one does use a ZWJ(Zero-Width Joiner), but the 2nd emoji to compose it with ♂️(♂️), uses a VS16 as well, otherwise it presents itself as text.

🧪(🧪): https://emojipedia.org/test-tube/

This emoji was part of Unicode v11 in 2018. It's possible that the user who pointed this one out was using an emoji font that did not have the emoji, perhaps the latest version of the font did but the one they had did not. The user-friendly get noto website isn't always providing the latest versions of fonts(Noto Sans Mono is a good example of this, which has a github issue about ligature issues iirc, resolved on github but not updated on get noto). So depending where the font was sourced from and when, it could be that it simply did not have that emoji.

Chromium/Chrome also did not have complete COLR/CPAL font support across all platforms using Blink until around September 2018, which adds another possible cause(but less likely since @Elaniobro mentioned it in Aug 2019..). For what it's worth, it renders perfectly fine for me in Chrome and VSCode currently on Linux.

🐞(🐞): https://emojipedia.org/lady-beetle/

No clue about that one. Only one user seemed to be affected and they were happy to later notice it working(with a text variant) later.

It's been defined early on in Unicode and default presentation is colour/emoji afaik. They mention they use Ubuntu 18.04 at the time, which was when emoji support was just getting decent for Ubuntu iirc? I'm not sure what font was providing that glyph, it doesn't appear to be any in their font list(Maybe the twitter emoji one, assuming it had the black/white fallback).

---

I would say that they're all likely issues with font handling on the OS level(bad fallback/config), or user error(whomever defined the glyph/emoji and missed the VS16 where needed, or has an outdated font).

@alexandrudima I notice no issue with Chrome Version 77.0.3865.90 (Official Build) (64-bit) or VSCode (Chrome 69.0.3497.128) on Linux. Are you sure it's not the effect of something else?(there is no upstream commit to reference for Chrome provided related to this)

It could just be that you installed those at a time where something else on your system had changed and thus affected them? Similar to @Yanpas experience with 🐞, you can install some fonts and need to restart the apps or system for certain parts to properly take effect.

On Linux sometimes that may also require resetting the font cache(although that never seemed necessary for me and had no effect). I don't know how other OS handle it, but I wouldn't be surprised if uninstalling your stable chrome and reinstalling it showed similar results of fixing the problem?

To be clear, I've had rendering issues previously, but have been looking into the whys and how to fix them. Other fonts with emoji/symbols took priority as fallback over Noto Color Emoji for me in the browser(and anywhere else really), so I had to prevent that by tweaking some config files.

Technically rendering the ✔️ as black/white text style is correct if the VS16 was missing, so to not do so would be a regression/against spec. Likewise, 🙋‍♂️ decomposing to 🙋 + ♂️ (🙋 + ♂️) is correct for the same reasons, although some implementations might disregard that and render a minimally-qualified/unqualified sequence as 🙋‍♂️ since it was probably the intended result and there isn't an equivalent alternative, so long as the ZWJ was there to bind them.

In my current config, while I can paste 🙋‍♂️ as a single emoji just fine, right-click context menu, or pasting into ominbox or googles search field is pasting the decomposed version for me on my stable Chrome release as well as dev Version 79.0.3921.0 (Official Build) dev (64-bit), any newer version is not available on my system, your test didn't confirm if that is any different. Pasting it into the Monaco editor you linked works fine, but not omnibox.

[Lexicality]

I added , 'Segoe UI Emoji' to the end of all the Font Family settings and that fixed most of it, however emoji still don't render correctly in the intellisense popup for me.

Is there a secret font setting somewhere for this?

[xgqfrms]

macOS warning emoji render bug

⚠️

[engineervix]

I confirm that this worked for me on Ubuntu.

"editor.fontFamily": "'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'"

Thanks! This also worked for me on Fedora 32

[alexdima]

Closing as this works now in latest VS Code.

[xgqfrms]

@alexdima ⚠️ is still not worked at all!

[alexdima]

@xgqfrms What OS are you on? That looks like macOS, while this issue is about windows. Also, the issue will be fixed with the February release which has not yet shipped to stable (might happen today if all goes well). What VS Code version are you on?

[Lexicality]

@alexdima does it work in intellisense now too?

[xgqfrms]

still not working in macOS

my VSCode info

Version: 1.53.2
Commit: 622cb03f7e070a9670c94bae1a45d78d7181fbd4
Date: 2021-02-11T11:45:54.515Z
Electron: 11.2.1
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Darwin x64 20.3.0

[alexdima]

@xgqfrms Sorry about that. I thought this specific issue was only about Windows, where this specific emoji is now rendered fine with default VS Code settings:

[PathogenDavid]

@alexdima It's not fixed for me on for VS Code 1.53.2 on Windows 20H2 either:

(That's with default settings and no extensions.)

[xgqfrms]

@alexdima How to enable the default VS Code settings?

[neupauer]

Hi, I found another emoji that doesn't work: ‼️ (Double Exclamation Mark)

OS: macOS 11.4 (Big Sur) - I have tried different fonts but none renders the emoji

[quyctd]

I have the same problem on MacOS

[ChangeHow]

In my case, i type 🎉 :tada but display like

that make me almost crazy!!! 😞

OS: MacOS

[matthijsgroen]

In my case, i type 🎉 :tada but display like

that make me almost crazy!!! 😞

OS: MacOS

I have the same in windows...

[q1b]

same here

[HaloWang]

Hi, guys. I think fontFamily need to be noticed: Iosevka + Source Han Sans, monospace is broken by some emojis: Some fallback: Default: Windows:

[j1mmie]

On MacOs, "Menlo" is actually breaking some emojis for me. I've installed the free Robot font from Google:

https://fonts.google.com/specimen/Roboto+Mono

and changed my editor.fontFamily to:

"editor.fontFamily": "'Roboto Mono', 'Apple Color Emoji'"

And it's a pretty acceptable alternative.

[DYW972]

2022 thanks to @alexdima ! I solved this issue on my macOS by removing Menlo in editor.fontFamily": "Monaco, 'Courier New', monospace",

Now everything works like expected.

🙌

[DG9Jww]

In my case, i type 🎉 :tada but display like

that make me almost crazy!!! 😞

OS: MacOS

same here in windows😖

[Jafetlch]

I have the same problem on Windows 10

[kartinul]

Same here

[pohy]

I have the same issue on Windows 10 using the Windows Emoji keyboard.
But! The same emojis render correctly when inserted through the Emoji Snippets extension.

[kartinul]

For me this problem was related with the vim extension,

[divyamrit]

Might you be right, I have my vim extension also enabled. Showing the same results never tried toggling it, let might this is an issue with the vim extension

[kartinul]

here is the issue that was opened in VsCodeVim/Vim github https://github.com/VSCodeVim/Vim/issues/7547

[odebroqueville]

I'm using VS Code Version: 1.70.0 (Universal) Commit: da76f93349a72022ca4670c1b84860304616aaa2 Date: 2022-08-04T04:38:55.829Z Electron: 18.3.5 Chromium: 100.0.4896.160 Node.js: 16.13.2 V8: 10.0.139.17-electron.0 OS: Darwin x64 21.6.0

I'm neither using the Menlo font family nor Vim and some emojis appear in b&w instead of colour such as :red_heart:

Running the following Python script:

import emoji
print(emoji.emojize('Python is :thumbs_up:'))
print(emoji.emojize("I :red_heart: Python", variant="emoji_type"))
print(emoji.emojize("Python is fun :softball:", variant="emoji_type"))

Renders:

VS Code font family settings:

{
  "editor.fontLigatures": "'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontFamily": "'Source Code Pro', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.accessibilitySupport": "off",
  "editor.fontSize": 15,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.inheritEnv": false,
  "editor.guides.bracketPairs": true,
  "editor.guides.bracketPairsHorizontal": true,
  "workbench.editor.enablePreview": false,
  "terminal.integrated.localEchoStyle": "dim",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontWeight": "normal"
}

[11xxx22]

@alexdima теперь это работает и в intellisense?

:white_check_mark:

[amir-khoshbakht]

It is easy to understand what emojis vsCode can show: emoji list website

All the emojis that are shown in color on this page are also shown in color in vsCode

example of uncolored emoji: and the same exact emoji in my vsCode:

[Ali-Jahankah]

I'm using emojis in my vs code integrated terminal and you can add these settings to your settings.json file to see the emojis

"terminal.integrated.cursorStyle": "line", "terminal.integrated.cursorWidth": 4, "terminal.integrated.cursorBlinking": true, "terminal.integrated.fontSize": 12, "terminal.integrated.fontFamily": "monospace", "terminal.integrated.letterSpacing": 1, "terminal.integrated.lineHeight": 1,

[mpacary]

Ubuntu 22.04 / Gnome here ; recommended option 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji' did not work (e.g. "⚠️" was displayed b&w), as well as the cross platform one.

After trying various combinations, this one worked:

'Courier New', 'Noto Color Emoji'

Poke @yzhang-gh if you wish to update the top message :wink:

[redactedscribe]

The information emoji (ℹ️) also doesn't display as expected (i.e. coloured):

[felixhaeberle]

ℹ ✅ Using inlang config file at /Users/felixhaberle/Desktop/git/inlang/source-code/sdk-js/src/adapter-sveltekit/examples/test-app/inlang.config.js
ℹ 🌏 Found 3 languages with a total of 6 messages.                                                                                        
ℹ 📝 Translating to 2 languages. [de, es]                                                                                               
ℹ 🇪🇸 Translated message welcome to Bienvenido a inlang                                                                                    
ℹ 🇪🇸 Translated message machine-test to Esta es una prueba de máquina.                                                                     
ℹ 🇪🇸 Translated message already-existing to Esta clave existe y es una prueba.       

Just to let you know: The flags doesn't display correctly with the default settings. They getting displayed like [E][S] for Spain -> 🇪🇸.

[tanpengsccd]

On MacOs, "Menlo" is actually breaking some emojis for me. I've installed the free Robot font from Google:

https://fonts.google.com/specimen/Roboto+Mono

and changed my editor.fontFamily to:

"editor.fontFamily": "'Roboto Mono', 'Apple Color Emoji'"

And it's a pretty acceptable alternative.

It is perfect for mac user, like ♻️ can't display the color.