Guidelines

When to use flags

Use flags to visually represent a country — for example next to a company's registered country, or a payment card's issuing country. Unlike icons, flags keep their own colors and aren't recolorable. See the Overview for the full set.

Using flags in Figma

Flags live on a dedicated Flags page inside the same Re-brand UI Icons - Telescope file our icons are sourced from, rather than as their own separately installable Figma library.

If you need a flag in a design, copy an existing flag component from the Flags page in that file.

Implementation

Use the Flag component from @pleo-io/telescope-flags with the country's ISO code when implementing a design. No SVG export is needed. See the Code tab for usage.

Requesting a new flag

1. You reach out to us and tell us which country's flag you need
2. We add it as a new component named flag-<country> on the Flags page of the Re-brand UI Icons - Telescope Figma file
3. We map it to its ISO 3166-1 alpha-2 code, regenerate the telescope-flags package and release a new version (see the package README)
4. We update our applications (e.g. product-web) to use the new flags package
5. We notify you that the flag is now available for use in code