# Flags

How to use flags in design and code, and how to request a new one.

Tabs: [Overview](/graphic-elements/flags/flags.overview.md) · [Guidelines](/graphic-elements/flags/flags.guidelines.md) · [Code](/graphic-elements/flags/flags.code.md)

# 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](https://telescope.pleo.io/graphic-elements/flags/flags.overview) for the full set.

## Using flags in Figma

Flags live on a dedicated `Flags` page inside the same [Re-brand UI Icons - Telescope](https://www.figma.com/design/iWrltAt3Sgulfn6u0Q3A16) 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](https://telescope.pleo.io/graphic-elements/flags/flags.code) tab for usage.

## Requesting a new flag

1. You [reach out to us](https://getpleo.slack.com/archives/CPCFSJK1R) 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](https://www.figma.com/design/iWrltAt3Sgulfn6u0Q3A16) 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](https://github.com/pleo-io/web/tree/main/published-packages/telescope-flags#readme))
4. We update our applications (e.g. [product-web](https://github.com/pleo-io/web/tree/main/apps/product-web)) to use the new flags package
5. We notify you that the flag is now available for use in code