A comprehensive collection of SVG flag icons as React components.
- 🌎 250+ country and territory flags in SVG format
- 🔧 Customizable size with width, height, and size props
- 🎨 Fully styleable with CSS
- 🪶 Lightweight with tree-shaking support
- ⚛️ React-friendly components
- 📱 Responsive design
# npm
npm install react-flag-icons
# yarn
yarn add react-flag-icons
# pnpm
pnpm add react-flag-iconsimport React from 'react';
import { Us, Fr, Jp } from 'react-flag-icons';
function App() {
return (
<div>
<h1>Flag Icons</h1>
<div style={{ display: 'flex', gap: '10px' }}>
<Us />
<Fr />
<Jp />
</div>
</div>
);
}
export default App;All flag components accept size, width, and height props:
import React from 'react';
import { Us, Fr, Jp } from 'react-flag-icons';
function App() {
return (
<div>
<h1>Flag Icons with Custom Sizes</h1>
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
<Us size={24} /> {/* Default size */}
<Fr size={32} /> {/* Larger */}
<Jp size={48} /> {/* Even larger */}
{/* You can also set width and height independently */}
<Us width={40} height={30} />
</div>
</div>
);
}
export default App;You can pass any standard SVG or HTML attributes to the components:
import React from 'react';
import { Us } from 'react-flag-icons';
function App() {
return (
<div>
<Us
size={32}
className="my-flag-class"
style={{ border: '1px solid #ccc', borderRadius: '4px' }}
onClick={() => alert('Clicked on US flag!')}
/>
</div>
);
}
export default App;This package includes flags for all countries and territories using their ISO 3166-1 alpha-2 codes as component names.
Examples:
<Us />- United States<Gb />- United Kingdom<Fr />- France<De />- Germany<Jp />- Japan<Cn />- China
Special regions and organizations:
<Eu />- European Union<Un />- United Nations<GbEng />- England<GbSct />- Scotland<GbWls />- Wales<EsCt />- Catalonia
| Prop | Type | Default | Description |
|---|---|---|---|
size |
number |
24 |
Sets both width and height of the flag |
width |
number |
size |
Sets the width of the flag |
height |
number |
size |
Sets the height of the flag |
className |
string |
undefined |
CSS class to apply to the SVG element |
style |
object |
undefined |
Inline styles to apply to the SVG element |
...props |
any |
- | Any other props are passed to the SVG element |
This package works in all modern browsers that support SVG:
- Chrome
- Firefox
- Safari
- Edge
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © Reda Trouki