Flags for React,
without the baggage.

Playground

Every knob maps to a prop. Copy the snippet straight into your app.

<Flag code="ma" shape="circle" size={64} dropShadow gradient="linear" />

Two flags, one badge

DuoFlag fuses two flags into one badge — vertical split, diagonal triangles, or overlapping stack for versus and language pickers.

<DuoFlag a="us" b="gb" layout="split" size={96} bordered borderColor="#7a4a2b" />
<DuoFlag a="us" b="gb" layout="diagonal" size={96} />
<DuoFlag a="fr" b="ma" layout="stack" size={72} />

Import one flag, ship one flag

import MA from 'matter-flags/flags/ma';

<MA size={24} shape="circle" bordered />

import { Flag } from 'matter-flags';

<Flag code="ma" shape="rounded" size={24} />

Beyond countries

Supranational and organization flags ship in the same format — same props, same size wins. Sourced from Wikimedia Commons (public domain).

All 307 flags

Rendered with direct imports — exactly what your bundler ships when you import one. Includes 50 US states + DC (us-tx…). Mississippi is excluded — its 2020 flag isn't public domain.