#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

CountryFlag is part of the Content category. Other components for similar needs:

• 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.
• DateFormat — to show dates in the correct DNB format.
• Heading — to create accessible page headings with the correct level.
• Icon — to render and size an icon in line with Eufemia styling.

See all in Content →

#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