Country Flag
The Country Flag shows a flag glyph next to a country or region value, so a global list reads at a glance and scans by flag instead of by text. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a choice or text column. The JSON matches the country name to its flag and keeps the name beside it, with a neutral flag for anything unmatched.
Overview
- Shows a flag glyph next to a country or region value
- Makes a global list scannable by flag, not just by text
- Matches the country name to its flag in the JSON
- Keeps the name beside the flag for an exact read
- Countries not in the list fall back to a neutral flag
- Applied as column-formatting JSON on a choice or text column, so it changes nothing about the underlying data
Common Use Cases
- Accounts or customers by country
- Offices or regions on a directory
- Shipments or orders by destination
- Language or market on a content list
- Travel or event locations
- Any country or region value you want shown with a flag
Details
- Design Pattern: Status & Indicator Badges
- Format Scope: Column
Required Columns
| Display name | Column type | Internal name |
|---|---|---|
| Account | Single line of text | [Title] |
| Region | Choice | [Region] |
Prerequisites
- Build a list with a choice or text column for the country before you paste the JSON.
- Then populate the list with country names.
- The JSON keys off specific country names; use these exact names in your column or add your countries to the map in the JSON (a neutral flag covers the rest).
- Apply the formatting to the country column.
- Flags are provided for only ten mapped country names, and the names are case-sensitive – adding another country means adding its SVG flag to the JSON, not just its name.
How to Apply JSON code
- On the Region column, open the column header menu, choose Column settings, then Format this column.
- Switch to Advanced mode.
- Paste the JSON below and click Save.
JSON Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"gap": "10px",
"min-height": "26px",
"white-space": "nowrap"
},
"children": [
{
"elmType": "div",
"style": {
"width": "30px",
"height": "20px",
"flex-shrink": "0",
"overflow": "hidden",
"border": "1px solid #A19F9D",
"border-radius": "2px",
"background-color": "#F3F2F1"
},
"children": [
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'United States', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V20H0Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V2H0ZM0 4H30V6H0ZM0 8H30V10H0ZM0 12H30V14H0ZM0 16H30V18H0Z"
},
"style": {
"fill": "#B22234"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 0H13V10H0Z"
},
"style": {
"fill": "#3C3B6E"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'Japan', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V20H0Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M15 5A5 5 0 1 0 15 15A5 5 0 1 0 15 5Z"
},
"style": {
"fill": "#BC002D"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'Germany', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V6.67H0Z"
},
"style": {
"fill": "#000000"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 6.67H30V13.34H0Z"
},
"style": {
"fill": "#DD0000"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 13.34H30V20H0Z"
},
"style": {
"fill": "#FFCE00"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'United Kingdom', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V20H0Z"
},
"style": {
"fill": "#012169"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 0H4L30 16V20H26L0 4ZM30 0H26L0 16V20H4L30 4Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 0H2L30 18V20H28L0 2ZM30 0H28L0 18V20H2L30 2Z"
},
"style": {
"fill": "#C8102E"
}
},
{
"elmType": "path",
"attributes": {
"d": "M11 0H19V20H11Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 6H30V14H0Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M13 0H17V20H13ZM0 8H30V12H0Z"
},
"style": {
"fill": "#C8102E"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'France', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H10V20H0Z"
},
"style": {
"fill": "#0055A4"
}
},
{
"elmType": "path",
"attributes": {
"d": "M10 0H20V20H10Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M20 0H30V20H20Z"
},
"style": {
"fill": "#EF4135"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'Canada', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V20H0Z"
},
"style": {
"fill": "#D80621"
}
},
{
"elmType": "path",
"attributes": {
"d": "M7.5 0H22.5V20H7.5Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M15 2.5L16.2 6L19 5L17.8 8L20.5 9.2L17.5 10.4L18.2 13L15.8 11.7L15.6 17H14.4L14.2 11.7L11.8 13L12.5 10.4L9.5 9.2L12.2 8L11 5L13.8 6Z"
},
"style": {
"fill": "#D80621"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'Australia', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V20H0Z"
},
"style": {
"fill": "#012169"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 0H2L15 8V10H13L0 2ZM15 0H13L0 8V10H2L15 2Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M5.5 0H9.5V10H5.5ZM0 3H15V7H0Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M6.5 0H8.5V10H6.5ZM0 4H15V6H0Z"
},
"style": {
"fill": "#C8102E"
}
},
{
"elmType": "path",
"attributes": {
"d": "M22 3L23 5.5L25.5 5.5L23.5 7L24.3 9.5L22 8L19.7 9.5L20.5 7L18.5 5.5L21 5.5Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M24 13L24.7 14.5L26.2 14.5L25 15.4L25.5 17L24 16L22.5 17L23 15.4L21.8 14.5L23.3 14.5Z"
},
"style": {
"fill": "#FFFFFF"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'India', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V6.67H0Z"
},
"style": {
"fill": "#FF9933"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 6.67H30V13.34H0Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M0 13.34H30V20H0Z"
},
"style": {
"fill": "#138808"
}
},
{
"elmType": "path",
"attributes": {
"d": "M15 8A2 2 0 1 0 15 12A2 2 0 1 0 15 8Z"
},
"style": {
"fill": "#000080"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'Brazil', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H30V20H0Z"
},
"style": {
"fill": "#009C3B"
}
},
{
"elmType": "path",
"attributes": {
"d": "M15 2.5L27 10L15 17.5L3 10Z"
},
"style": {
"fill": "#FFDF00"
}
},
{
"elmType": "path",
"attributes": {
"d": "M15 6A4 4 0 1 0 15 14A4 4 0 1 0 15 6Z"
},
"style": {
"fill": "#002776"
}
}
]
},
{
"elmType": "svg",
"attributes": {
"viewBox": "0 0 30 20",
"preserveAspectRatio": "none"
},
"style": {
"display": "=if(@currentField == 'Mexico', 'block', 'none')",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M0 0H10V20H0Z"
},
"style": {
"fill": "#006847"
}
},
{
"elmType": "path",
"attributes": {
"d": "M10 0H20V20H10Z"
},
"style": {
"fill": "#FFFFFF"
}
},
{
"elmType": "path",
"attributes": {
"d": "M20 0H30V20H20Z"
},
"style": {
"fill": "#CE1126"
}
},
{
"elmType": "path",
"attributes": {
"d": "M15 7A3 3 0 1 0 15 13A3 3 0 1 0 15 7Z"
},
"style": {
"fill": "#8A6D3B"
}
}
]
}
]
},
{
"elmType": "span",
"txtContent": "=if(@currentField == '', '—', @currentField)",
"style": {
"font-size": "14px",
"font-weight": "600",
"color": "#201F1E",
"line-height": "20px"
}
}
]
}Common Questions About the Country Flag
What is the Country Flag built with?
It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a country column that reads with a flag without ongoing development overhead.
What columns does it need?
It needs one Choice or text column holding the country name, where the JSON is applied, plus any label column such as the account name. The flag is chosen from that name.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.
If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?
Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.
What if my country is not in the list?
Add it to the map in the JSON with its flag. The example ships with a set of common countries, and anything unmatched shows a neutral flag until you add it.
Can Greg build a design like this for our lists?
Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.
