Import#

import { CountryFlag } from '@dnb/eufemia'

// Import the flag icons as CSS
import '@dnb/eufemia/components/country-flag/style/dnb-country-flag-icons.min.css'

// ... or as SCSS
import '@dnb/eufemia/components/country-flag/style/dnb-country-flag-icons.scss'

Description#

The CountryFlag component lets you display a country flag based on a ISO 3166-1 alpha-2 code like NO for Norway.

In order to use the CountryFlag component, you need to import the flag styles as CSS or SCSS. The flag styles are available in the dnb-country-flag-icons.min.css and dnb-country-flag-icons.scss files. See the import example above.

These style files will import the SVG flag icon via a CSS background-image. This way only the used flags will be loaded by the browser.

For UX designers, there is the Figma Flags Library, which provides a comprehensive collection of flag icons that can be used in your design projects.

Relevant links#

• Source code
• Docs code

Related components#

Country flags is part of the Content and layout category. More components in this category:

• Accordion — to let people open and close sections of related content.
• Avatar — to make a person, company, or profile easier to recognize.
• Card — to group related content in a clear, separated area.
• Icon component — to render and size an icon in line with Eufemia styling.
• Info card — InfoCard is deprecated. Use Card.Info with composed children for information and tips.
• List — to show rows of related content, with optional actions or navigation.

See all in Content and layout →

Demos#

All sizes#

<Flex.Horizontal align="center">
  <CountryFlag iso="NO" size="auto" />
  <CountryFlag iso="NO" size="xx-small" />
  <CountryFlag iso="NO" size="x-small" />
  <CountryFlag iso="NO" size="small" />
  <CountryFlag iso="NO" size="medium" />
  <CountryFlag iso="NO" size="large" />
  <CountryFlag iso="NO" size="x-large" />
</Flex.Horizontal>

Square#

<CountryFlag iso="CH" shape="square" size="large" />

Eufemia Forms#

const MyComponent = ({ label, ...props }) => {
  const { value } = useValueProps(props)
  const iso = String(value)
  return (
    <FieldBlock label={label}>
      <CountryFlag iso={iso} size="large" />
    </FieldBlock>
  )
}
render(
  <Form.Handler>
    <Field.Composition>
      <Field.SelectCountry
        label="Select a country"
        path="/country"
        width="medium"
        value="SE"
      />
      <MyComponent label="Country flag" path="/country" />
    </Field.Composition>
  </Form.Handler>
)

In various components#