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

NorgeNorgeNorgeNorge
Code Editor
<Flex.Horizontal align="center">
  <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" />

Eufemia Forms

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

In various components

NorgeNorgeNorgeNorgeNorgeNorge
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

Code Editor
<Flex.Vertical gap="x-small">
  <Button icon={<CountryFlag iso="NO" />} title="Icon button" />
  <Button
    icon={<CountryFlag iso="NO" />}
    title="Icon button"
    size="large"
  />
  <Button
    icon={<CountryFlag iso="NO" />}
    icon_position="left"
    text="Button"
    variant="secondary"
  />
  <Button
    icon={<CountryFlag iso="NO" />}
    icon_size="medium"
    icon_position="left"
    size="large"
    text="Button"
    variant="secondary"
  />
  <Input
    icon={<CountryFlag iso="NO" />}
    icon_position="left"
    placeholder="Write something"
  />
  <Input
    icon={<CountryFlag iso="NO" />}
    icon_position="left"
    size="large"
    placeholder="Write something"
  />
  <Dropdown
    value="NO"
    icon_position="left"
    data={{
      NO: (
        <Dropdown.HorizontalItem>
          <CountryFlag iso="NO" />
          {' '}Norway
        </Dropdown.HorizontalItem>
      ),
      SE: (
        <Dropdown.HorizontalItem>
          <CountryFlag iso="SE" />
          {' '}Sweden
        </Dropdown.HorizontalItem>
      ),
    }}
  />
  <Dropdown icon={<CountryFlag iso="NO" />} size="large" />

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

  <Flex.Horizontal align="center" gap="x-small">
    In Icon component:
    <Icon icon={<CountryFlag iso="NO" />} />
    <Icon icon={<CountryFlag iso="NO" />} size="medium" />
  </Flex.Horizontal>

  <Flex.Vertical>
    <Heading level="1">
      H1 heading <CountryFlag iso="NO" />
    </Heading>
    <Heading level="2">
      H2 heading <CountryFlag iso="NO" />
    </Heading>
    <Heading level="3">
      H3 heading <CountryFlag iso="NO" />
    </Heading>
    <P
      style={{
        maxWidth: '20rem',
      }}
    >
      <CountryFlag iso="NO" /> Paragraph Eiusmod id cillum Lorem nulla non
      consectetur pariatur mollit Lorem non do nulla reprehenderit
      {' '}
      <CountryFlag iso="NO" />
    </P>
  </Flex.Vertical>
</Flex.Vertical>