Inputs.table_County code to country icon

Is there any way to represent country code (USA, ITA, CAN, etc.) to county’s flag as icon or emoji?

Example of my current table version is here

A search for flags on Observable yielded this:

Yes, I saw this, but waht is the way to embed it into the table view?

Here’s a notebook that can help:

To use in your notebook:

import {isoAlpha3toEmoji} from "@mbostock/iso-3166-alpha"

Inputs.table(perf, {
  format: {
    total_segment_score: sparkbar(d3.max(perf, d => d.total_segment_score)),
    total_element_score: sparkbar(d3.max(perf, d => d.total_element_score)),
    total_component_score: sparkbar(d3.max(perf, d => d.total_component_score)),
    nation: isoAlpha3toEmoji

It’s just convert from Alpha-3 to Alpha-2, but didn’t add Emoji itself (((
Can you, pls, change and save code just inside my notebook: Inputs.table_County code to country icon / Dmitry S / Observable
I’ve already shared it with you )

Hi Amidsi, I noticed that on your notebook you do indeed display the emoji flags, shall I mark the above response from mbostock as the solution?

Hi Duane!
Not now, thank you, coz I still have issue and don’t have an idea how to fix it, now it’s looking like that:

Then I’ll update status. Think it’ll be also important to know for society

In the notebook that you shared above the icons are showing up correctly: Inputs.table_County code to country icon / Dmitry S / Observable

Maybe you have unpublished changes that are somehow breaking the icons?

I’d sent you screenshot how it of how it is looking from my side. Though all changes are published

Hmm, the code in your notebook looks correct, and the emoji icons are appearing so I’m at a bit of a loss as to what to suggest, unfortunately. The only thing I can think of is to confirm the following:

  1. The notebook you’re referring to is Inputs.table_County code to country icon / Dmitry S / Observable
  2. You have no unpublished changes (the button in the header doesn’t say “Republish”)
  3. You can see emoji icons on other notebooks (e.g. ISO 3166 Alpha-3 to Alpha-2 / Mike Bostock / Observable)


  1. Yes
  2. Yes
  3. No
1 Like

Ah, interesting. The fact that you can’t see the flag emoji on other notebooks made me look into how reliable this approach is, and indeed it is the case that this technique isn’t 100% effective and can fail due to variations in operating system, browser, etc. So if you need the flags to render for all contexts you’ll need to use a different approach (likely using images). Take a look at this stack overflow link for more info: html - Flag Emojis not rendering - Stack Overflow


Matt Dzugan ran into the same problem in Making Maps out of Emojis / Matt Dzugan / Observable (related discussion).

You could embed the icons as SVGs from yammadev/flag-icons, e.g.:

flag = code => html`<img src="${code}.svg">`