Flag Icons
Original SVG flags for every country, sized for form fields.
npm install @devix-labs/flag-icons
246 flags covering every territory with a calling code, in rectangle, square and circle shapes. Zero dependencies, about 14 KB for the whole set, and they render on Windows where emoji flags turn into letters.
What you get
Every territory
246 flags — every place with an international calling code, including Ascension, Kosovo and Tristan da Cunha.
Tiny
About 14 KB gzipped for all of them as JavaScript, or a few hundred bytes per SVG file.
Readable at 16px
Drawn from exact geometry, with emblems simplified to what a small flag can actually show.
Windows-proof
Emoji flags render as two letters on Windows. These render as flags everywhere.
Three shapes
Rectangle, square and circle from one drawing — no separate sets to keep in sync.
Accessible
Decorative by default; pass a title and the SVG becomes a labelled image.
Built for the size flags are actually used at
Most flag sets are drawn for posters and scaled down, so a coat of arms turns into a smudge inside a 20px country picker. Devix Flag Icons are drawn on a small art board from exact geometry — stripes, crosses, stars and crescents — and national emblems are reduced to the shape and colour that still read at small sizes.
import { flagSvg } from '@devix/flag-icons';
document.querySelector('#country').innerHTML = flagSvg('ae', { width: 20 });
Three ways to use it
| Method | Best for | Cost |
|---|---|---|
flagSvg() in JavaScript |
Components, dropdowns, React/Vue/Svelte | ~14 KB once, then free |
<dx-flag> web component |
Plain HTML, CMS templates | +0.5 KB |
| CSS classes | Static pages | One small SVG per flag shown |
It is the flag set inside Devix Phone Input.
Demos
All demos →Questions
Why not just use emoji flags?
Windows shows regional-indicator emoji as letters (AE, PK), and emoji look different on every platform. These SVGs look the same everywhere.
How is this different from flag-icons or country-flag-icons?
The drawings are original and made for UI sizes, the whole set is about 14 KB gzipped, there are three shapes from one source, and nothing is fetched from a third-party CDN at runtime.
Can I use it commercially?
Yes. It is MIT licensed.
Does it work without a build step?
Yes — load element.js from the CDN and use <dx-flag code="ae">, or link the CSS and use classes.