COMPONENT

Flag

A small emblem that keeps its own colours. It is the counterpart to the icon, and the difference is the whole point: an icon follows your theme, a flag is not yours to recolour.

Beside a language name, and one that is not 3:2

Two at the default ratio and one square. Nothing changed but --flag-ratio.

Polski Español Schweiz

HTML

<div style="display:flex; align-items:center; gap:22px; flex-wrap:wrap">
  <span style="display:inline-flex; align-items:center; gap:10px">
    <svg class="flag" viewBox="0 0 3 2" aria-hidden="true">
      <rect width="3" height="1" fill="#fff"/><rect y="1" width="3" height="1" fill="#dc143c"/>
    </svg>
    <span lang="pl">Polski</span>
  </span>
  <span style="display:inline-flex; align-items:center; gap:10px">
    <svg class="flag" viewBox="0 0 3 2" aria-hidden="true">
      <rect width="3" height="2" fill="#c60b1e"/><rect y="0.5" width="3" height="1" fill="#ffc400"/>
    </svg>
    <span lang="es">Español</span>
  </span>
  <span style="display:inline-flex; align-items:center; gap:10px">
    <svg class="flag" viewBox="0 0 2 2" style="--flag-ratio:1/1" aria-hidden="true">
      <rect width="2" height="2" fill="#d52b1e"/>
      <path d="M0.85 0.4h0.3v0.45h0.45v0.3h-0.45v0.45h-0.3v-0.45h-0.45v-0.3h0.45z" fill="#fff"/>
    </svg>
    <span lang="de-CH">Schweiz</span>
  </span>
</div>

Reference

Read from components/flag.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.flag

READS--ds-flag-size--ds-hairline--ds-rule

Notes

THE LIBRARY SHIPS NO FLAGS

For the same reason it ships no icons and no fonts: which countries a site names is the site's decision, and a set bundled here would make every consumer carry a world map to use two. What ships is the contract one obeys once it arrives — a box, a ratio, a hairline, and no colour at all.

IT IS DECORATION, AND THE WORD IS THE ANSWER

A flag is a country and a language is not. Spanish is not Spain, English is not England, and a reader in Argentina or Ireland is entitled not to feel addressed by somebody else's flag. Use one only beside a written language name, mark it aria-hidden, and let the word carry the meaning. A flag used as the only label is a defect this class cannot prevent.

WHY THERE IS NO CORNER RADIUS

Flags have square corners. The nearest existing token is named for form fields, so rounding one would have meant either lying with that name or minting a corner holding a value another one already holds — a second spelling, and those drift. If a flag ever wants one it takes --ds-radius-frame, which is the corner for a rectangle of picture and is square for the same reason this is. The hairline, by contrast, is load-bearing: a flag with white at its edge — Poland, Japan, Finland — dissolves into a light surface without one.