flagg ikoner - www.nav.no

high contrast

Flag

Flag component renders any world flag in SVG format.

Flag styles and sizes

At the moment, there is only two sizes: M and L, and two styles:circle and original.

Choose country

Choose size

Country: Norge

<Flag country='no' label='Norge' size='M' type='original'/>

<Flag country='no' label='Norge' size='M' type='circle'/>

Flag list

The FlagList component can render a list of flags, as follows.

<FlagList
  items={[
    {country: 'no', label: 'Norway'},
    {country: 'se', label: 'Sweden'},
    {country: 'dk', label: 'Denmark'},
    {country: 'fi', label: 'Finland'},
  ]}
  size='M'
  type='circle'
/>

We can set an overflow limit to the flag list.

 <FlagList 
  overflowLimit={2}
  items={[
    {country: 'no', label: 'Norway'},
    {country: 'se', label: 'Sweden'},
    {country: 'dk', label: 'Denmark'},
    {country: 'fi', label: 'Finland'},
  ]}
  size='M'
  type='circle'
/>

Available flags - rectangle form

Use the two-letter country code for country list. Hover the mouser cursor over the desired flag to get the country code.

Sør-Georgia og de søre Sandwichøyene - GS

Available flags - circle form

Component import

import Flag, { FlagList } from 'flagg-ikoner'

React props

Property	Type	Required	Description	Default
className	`string`	false	Additional classnames	-
country	`string`	false	Flag's 2-letter country code (for `Flag` component only)	-
items	`list`	false	Country list with keys `country` and `label` (for `FlagList` component only)	-
label	`string`	false	flag's tooltip label (for `Flag` component only)	-
locale	`string`	false	Flag label's locale -- valid options are `en` (English) and `nb` (Norsk Bokmål)	nb
overflowLimit	`number`	true	Max limit of flags shown for a flag list (for `FlagList` component only)	-
size	`string`	false	Flag size. Accepted values: `XS`, `S`, `M`, `L`, `XL` and `XXL`.	M
tooltip	`boolean`	false	Adds a tooltip with the country label.	true
type	`string`	false	Flag type. Accepted values: `original` and `circle`.	original
wrap	`boolean`	false	Toggle for wrapping flags or keeping them in one line (for `FlagList` component only).	false
wrapper	`boolean`	false	Adding a wrapper div around flag icons or not (for `FlagList` component only).	true