Flag customizer
Pick a country, tune the styling, then copy the CSS or grab the SVG. Everything runs in your browser.
CSS
.flag-lang-fo {
width: 160px;
height: 160px;
border-radius: 50%;
border: 4px solid #111827;
box-shadow: 0 6px 12px rgba(0,0,0,0.25);
filter: saturate(100%);
opacity: 1.00;
background-image: url("/flags/lang-fo.svg");
background-size: cover;
}HTML
<img src="/flags/lang-fo.svg" alt="Flag of Faroese (language)" class="flag-lang-fo" width="160" height="160" />Embed (self-contained)
<img
src="/flags/lang-fo.svg"
alt="Flag of Faroese (language)"
width="160" height="160"
style="width:160px;height:160px;border-radius:50%;border:4px solid #111827;box-shadow:0 6px 12px rgba(0,0,0,0.25);filter:saturate(100%);opacity:1.00;object-fit:cover" />Flag icon generator
Customize a circle flag and export it
The flag customizer takes any of the 800+ circular SVG flags and lets you change the output size, border width, border colour and corner radius. The preview updates live and the export matches it pixel for pixel.
When you are done, download a styled SVG, copy the markup, or copy a CSS or HTML snippet. Everything is generated in the browser, so there is no upload or wait.
What you can change
Size
Pick an export size for raster use, or keep it as a scalable SVG.
Border
Add a ring in any colour to separate light flags from light backgrounds.
Rounding
Keep the full circle or dial back to a rounded square for app-icon styles.
Embed snippets
Copy self-contained HTML, a CSS rule or the raw SVG markup.
Flag customizer FAQ
Why add a border to a flag icon?+
Flags with white or pale edges, such as Japan or Finland, disappear on white backgrounds. A thin neutral border keeps the circle visible.
Does the customizer change the original file?+
No. The original SVG stays available as a separate download. The styled version is built on top of it.