Flags
Country flags at 4:3 from flag-icons, one class per flag.
Flags come from flag-icons
flag-icons 7.6.0 (github.com/lipis/flag-icons, MIT license). One SVG file per country in
flags/. The browser loads only the flags you use.
Flags with an accessible name
<div class="stack" data-direction="row" data-gap="sm">
<span class="flag flag-th" role="img" aria-label="Thailand"></span>
<span class="flag flag-jp" role="img" aria-label="Japan"></span>
<span class="flag flag-us" role="img" aria-label="United States of America"></span>
<span class="flag flag-gb" role="img" aria-label="United Kingdom"></span>
<span class="flag flag-de" role="img" aria-label="Germany"></span>
<span class="flag flag-fr" role="img" aria-label="France"></span>
</div>Beside the country name
- Thailand
- Singapore
- Vietnam
<ul class="stack" data-gap="sm">
<li><span class="flag flag-th" aria-hidden="true"></span> Thailand</li>
<li><span class="flag flag-sg" aria-hidden="true"></span> Singapore</li>
<li><span class="flag flag-vn" aria-hidden="true"></span> Vietnam</li>
</ul>Sizes: sm, default, lg and xl
<div class="stack" data-direction="row">
<span class="flag flag-se" data-size="sm" aria-hidden="true"></span>
<span class="flag flag-se" aria-hidden="true"></span>
<span class="flag flag-se" data-size="lg" aria-hidden="true"></span>
<span class="flag flag-se" data-size="xl" aria-hidden="true"></span>
</div>Attributes
| Attribute / element | Values | Description |
|---|---|---|
.flag |
A 4:3 box, 16px tall, with a hairline edge so white flags show on a white background. | |
.flag-{code} |
ISO 3166 code, e.g. th, gb-eng
|
Picks the flag; see the list below. |
data-size |
sm, default, lg, xl
|
Height 12, 16, 24 or 32px. |
role="img" + aria-label |
text | For a flag on its own, so it has a name. |
aria-hidden="true" |
When the country name is next to it. |
Every flag
Search by code or name; click a flag to copy its HTML.