---
title: "getCountryFlagUrl"
description: "Get country flag from flagcdn.com with a simple function call"
package: "@maz-ui/utils"
url: "https://maz-ui.com/ecosystem/utils/get-country-flag-url"
---

# getCountryFlagUrl

> Get country flag from flagcdn.com with a simple function call

- Package: `@maz-ui/utils`
- Import: `import { getCountryFlagUrl } from '@maz-ui/utils/helpers/getCountryFlagUrl'`
- Web: https://maz-ui.com/ecosystem/utils/get-country-flag-url

## Basic usage

```vue
<template>
  <img :src="flagSrc" alt="Flag of France" />
</template>

<script lang="ts" setup >
  import { getCountryFlagUrl } from '@maz-ui/utils'

  const flagSrc = getCountryFlagUrl('FR')
</script>
```

## Sizing

**Details: Show full code**

```vue
<template>
  <img
    v-for="{ src, size, countryCode } in sizedFlags"
    :key="src"
    :src="src"
    :alt="`${countryCode} Flag`"
  />
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { getCountryFlagUrl } from '@maz-ui/utils'

  const countryCode = ref('FR')

  const sizedFlags = computed(() => {
    const sizes: Size[] = [
      '16x12',
      '20x15',
      '24x18',
      '80x60',
      'h80',
      'w160',
    ]

    return sizes.map(size => ({
      src: getCountryFlagUrl(countryCode.value, size),
      size: size,
      countryCode: countryCode.value
    }))
  })
</script>
```