Flags that fitevery interface.

Typed SVG components for React, Vue, Solid, and Svelte, verified with Vite 8, Next.js, and Nuxt.

Browse flagsRead the docs
pnpm add @sankyu/react-circle-flags

Live components

Select a flag to open its details.

48 × 48

Builtforthefrontendstacksyoualreadyuse.

Import one component, keep full SVG control, and use one consistent API across verified client and server stacks.

One API across frameworks

Framework-native components with matching names, props, and generated flag coverage.

React

Stable

Vue

Beta

Solid

Beta

Svelte

Beta

SSR without placeholders

Static flags render directly to HTML in Next.js and Nuxt, with no client fetch in normal usage.

import { FlagUs } from
'@sankyu/react-circle-flags/flags/us'

Deterministic imports

Per-flag subpaths give bundlers an explicit boundary while the dynamic registry remains available when needed.

Bundle guidance

SVG props stay yours

Set size, title, class names, inline styles, and accessibility attributes without learning a custom styling layer.

USUSUS

430+ generated flag components and aliases.

Start with one import.

Choose a framework, copy the package command, and render a typed flag component.

Rendering
Inline SVG
Types
Included
SSR
Supported
Runtime fetch
Not required
pnpm add @sankyu/react-circle-flags
import { FlagUs } from '@sankyu/react-circle-flags/flags/us'

export function Locale() {
  return <FlagUs width={40} height={40} title="United States" />
}