Skip to content
Home

CountryFlag

Info
Demos
Properties

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 SASS
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 SASS. 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.

Demos

All sizes

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

Square

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

Eufemia Forms

Code Editor
const MyComponent = ({ label, ...props }) => {
  const { value } = useValueProps(props)
  const iso = String(value)
  return (
    <FieldBlock label={label}>
      <CountryFlag iso={iso} size="medium" />
    </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

In Icon component:

H1 heading Norge

H2 heading Norge

H3 heading Norge

Norge Paragraph Eiusmod id cillum Lorem nulla non consectetur pariatur mollit Lorem non do nulla reprehenderit Norge