Getting started

Devix Flag Icons gives you every country flag as a tiny SVG, drawn for interfaces rather than for printing. There are three ways to use it — pick the one that matches your stack.

Install#

npm install @devix-labs/flag-icons

JavaScript#

flagSvg() returns an SVG string. It never throws: an unknown code returns a neutral placeholder, so bad data can't break a page.

import { flagSvg } from '@devix-labs/flag-icons';

el.innerHTML = flagSvg('sa');                                  // decorative
el.innerHTML = flagSvg('sa', { title: 'Saudi Arabia' });       // announced by screen readers
el.innerHTML = flagSvg('sa', { shape: 'circle', width: 24 });  // round avatar-style

Web component#

Works in plain HTML, WordPress, Blade, Vue, Svelte — anywhere.

<script type="module" src="https://devix.pk/cdn/oss/flag-icons@1.1.0/element.js"></script>

<dx-flag code="ae"></dx-flag>
<dx-flag code="gb" shape="square" label="United Kingdom"></dx-flag>

The element sizes to its font-size: a rectangle is 1.5em wide, square and circle are 1em.

CSS classes#

<link rel="stylesheet" href="https://devix.pk/cdn/oss/flag-icons@1.1.0/flag-icons.css">

<span class="dxf dxf-pk"></span>
<span class="dxf dxf-circle dxf-tr"></span>

Each class loads one small SVG file, so a page with three flags downloads three files — not a sprite of 246.