Flags

---

Usage

Do use flags to identify countries, regions or organisations in components such as popover, menu or table, across all device types. For data-dense dashboards, flags may aid visual recognition and improve user experience.

Don’t use flags to represent languages, as multiple languages may be spoken in one country.

---

Features

Sizes

Flags are available at a minimum size of 20px and can be scaled up in increments of 4px to suit the UI context.

Colour

Colours are specific to each flag’s identity, so avoid creating alternatives in black and white, monochrome, outlines or greyscale as the flag will lose meaning and cause confusion for your users.

Off-white is used for flags that feature white in their design, to differentiate them from a white background they may sit upon.

As internationally standardised symbols, flag colours are not based on the Shell DS or Brand palette.

Clarity

Flag designs are simplified to improve their legibility. An example of this are flags which feature a coat of arms or other detailed symbols.

Shape

Flags have a circular design which is both aesthetically pleasing and improves user experience on touch devices.

Alignment

Positioning flags with a consistent amount of space around them avoids clutter in your UI. Maintain consistency when aligning flags with other elements and related content.

In code

A flag can use the two digit country code, the full name, or a common alias.