Usage

Code

NPM package

All flags are published as part of the @cosmos/foundation NPM package. All SVG source files are optimized and located in @cosmos/foundation/lib/primitives/flags/

Static File Host

Flags are hosted on Cosmos' static file host and can be accessed via URL

<!-- Accessing a flag directly from the static host -->
<img src="https://rbds-static.redbull.com/@cosmos/foundation/latest/flags/cosmos-flag-AT.svg" alt="Austria Flag">

Flag Code List

The flag codes are provided as a JSON array from the Foundation package, containing all valid codes for the Cosmos Flag component.

// Named import:
import { cosmosFlagCodes } from "@cosmos/foundation";

// Direct JSON import:
import cosmosFlagCodeList from "@cosmos/foundation/lib/primitives/flags/cosmos-flag-code-list.json";

// Static file host:
const staticFlagCodeListUrl = 'https://rbds-static.redbull.com/@cosmos/foundation/latest/flags/cosmos-flag-code-list.json';

fetch(staticFlagCodeListUrl)
  .then(response => response.json())
  .then(flagCodes => console.log(flagCodes))
  .catch(console.error);

Figma

In Figma, Flag is a single component with all different flags as variants.