🌐 simple-react-flags

A plug-and-play React component to render country flags as SVGs. All flags are bundled (no external requests needed!) and can be fully customized using standard SVG props.

Ideal for internationalization, dropdowns, profiles, and more.

✨ Features

• ✅ 255+ country flags included
• ✅ TypeScript safe: strong types & IntelliSense
• ✅ Fully bundled: no need to load external files
• ✅ Easy customization via SVGProps
• ✅ ESModule + CommonJS output

📦 Installation

# using npm
npm install simple-react-flags

# or using bun
bun add simple-react-flags

🛠 Usage

import React from 'react';
import { Flag } from 'simple-react-flags';

export default function Example() {
  return (
    <div>
      <Flag code="us" width={48} height={48} title="USA Flag" />
      <Flag code="fr" width={48} height={48} title="France Flag" />
      <Flag code="jp" width={48} height={48} title="Japan Flag" />
    </div>
  );
}

🔑 Props

| Prop | Type | Required | Description | | -------- | --------------------------------------- | -------- | --------------------------------------------------------- | | code | FlagCode (union of ISO country codes) | ✅ Yes | The country code (e.g., 'us', 'fr', 'jp') | | ...other | React.SVGProps<SVGSVGElement> | ❌ No | Any valid SVG prop (e.g., width, height, className) |

Example of valid codes:

'us' | 'fr' | 'de' | 'gb' | 'ae' | 'cn' | 'ru' | ...etc.

🔒 TypeScript Safe

This package is fully TypeScript-ready ✅.

You can also import the types for type-safe handling of country codes:

import type { FlagCode } from 'simple-react-flags';

const code: FlagCode = 'us'; // ✅ Type-safe

The FlagCode type is a union of all supported ISO country codes, ensuring you can’t pass invalid codes.

🛑 Missing Flag?

If the code you pass does not match any bundled flag, you'll get a console warning:

Flag not found for code: xx

Islam Yamor 2025