🇺🇦 React wrapper for FlagKit Flag Icons https://stephenway.github.io/react-flagkit
  • TypeScript 75.3%
  • CSS 16%
  • JavaScript 4.8%
  • HTML 3.9%
Find a file
2026-05-15 12:06:39 -07:00
.github ci: disable github actions on mirror by renaming .github/workflows 2026-05-15 12:06:39 -07:00
docs Move example dist to docs 2022-04-26 19:55:26 -07:00
example Move example dist to docs 2022-04-26 19:55:26 -07:00
src Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
test Reimport testing 2022-04-26 19:32:10 -07:00
.babelrc Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
.eslintrc.js Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
.gitignore Move example dist to docs 2022-04-26 19:55:26 -07:00
.prettierrc.js Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
LICENSE Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
package-lock.json Added volta config 2022-04-26 19:44:24 -07:00
package.json Added volta config 2022-04-26 19:44:24 -07:00
README.md Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
tsconfig.json Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
tsdx.config.js Overhaul to use tsdx example directory instead of storybook 2022-04-26 19:15:54 -07:00
yarn.lock Added volta config 2022-04-26 19:44:24 -07:00

react-flagkit

Beautiful flag icons for usage in React webapps. All flags are provided as importable images by React.

Documentation

Installation

npm install --save react-flagkit

// or

yarn add react-flagkit

Usage

import Flag from 'react-flagkit';

export default () => <Flag country="US" />;

Displays the flag of the United States (US)

<Flag country="US" />

Component can render different flags by country, a list of all codes can be found here.

<Flag country="DE" />

It's also possible to make those flags whatever pixel size you want.

Big

<Flag country="CA" size={84} />

or small

<Flag country="GB" size={15} />

If needed you can also make the flag interactive with an onClick handler, just make sure to change the role to button

<Flag
  country="SE"
  role="button"
  onClick={() => {
    alert('You just clicked on the flag.');
  }}
/>

Thanks

  • madebybowtie for FlagKit
  • jsDelivr for free CDN access