Styling

Flags are plain SVG, so everything CSS can do to an image works. On top of that:

Size#

Every SVG scales to its box. Set a width and the height follows the shape: rect is 3:2, square and circle are 1:1.

.country svg { width: 20px; }          /* in a list */
.hero svg    { width: 4rem; }          /* anywhere else */
dx-flag      { width: 1.25em; }        /* the element follows the text size */

Or pass width to flagSvg(code, { width: 24 }) for explicit width and height attributes, which helps emails and prevents layout shift.

Shape, corners and the edge#

flagSvg('ae', { shape: 'circle' });          // 'rect' | 'square' | 'circle'
flagSvg('ae', { radius: 2 });                // corner radius, in 30 × 20 art-board units
flagSvg('jp', { border: false });            // no hairline edge

The hairline edge keeps white flags (Japan, Cyprus) visible on white. Its colour is a CSS variable, so it can follow your theme:

:root       { --dx-flag-edge: rgb(0 0 0 / 0.12); }
.dark       { --dx-flag-edge: rgb(255 255 255 / 0.16); }

Variables apply to inline SVG (flagSvg, flagElement, <dx-flag>). A flagDataUri image can't read page CSS and always uses the defaults.

Classes and attributes#

Every SVG carries hooks for your CSS:

<svg class="dxf your-class" data-code="ae" data-shape="rect" …>…<rect class="dxf-edge" …/></svg>

.dxf { border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
.dxf[data-shape='circle'] { outline: 2px solid white; outline-offset: -1px; }
.dxf--unknown { opacity: 0.5; }
.dxf-edge { display: none; }

Add your own class with className, for example Tailwind utilities:

flagSvg('pk', { className: 'w-5 rounded-sm shadow-sm ring-1 ring-black/5' });

Accessibility#

Flags are decorative by default (aria-hidden). When the flag is the only thing naming a country, give it a name: flagSvg('ae', { title: 'United Arab Emirates' }), or <dx-flag code="ae" label="…">.