Loading flags…
Circular flags as typed components.
430 SVG flags for React, Vue, Solid, and Svelte. Import one flag per file, render it on the server, and style it like any other SVG element.
- Flags
- 430
- Frameworks
- 4
- License
- MIT
br · FlagBr
Brazil
- xs 16
- sm 24
- md 32
- lg 48
- xl 64
Flag
$ pnpm add @sankyu/react-circle-flagsimport { FlagBr } from '@sankyu/react-circle-flags/flags/br'
export function Locale() {
return <FlagBr width={48} height={48} />
}What every package ships.
The four packages generate from the same SVG source and expose the same component names. Each example below runs on this page.
<FlagBr width={128} height={128} />
// Rendered element, read from this page
Same API in four frameworks.
React is stable. Vue, Solid, and Svelte are in beta and follow the same names and props. Installation guide
| Framework | Package | Status |
|---|---|---|
 React | @sankyu/react-circle-flags | Stable |
 Vue | @sankyu/vue-circle-flags | Beta |
 Solid | @sankyu/solid-circle-flags | Beta |
 Svelte | @sankyu/svelte-circle-flags | Beta |
430 flags in one circular frame.
Countries, subdivisions, organizations, and historical flags share the same shape, so they line up at every size. Select a flag to open it in the browser.