Skip to content
TeaCSS documentation

Flagpack

Use multicolor country flags from Flagpack with the TeaCSS Icons preset.

Flagpack supplies country flags on a 32×24 grid. Names use lowercase country codes; the preset prefix is flagpack. The SVGs are multicolor, so Icons’ default auto mode emits a CSS background image rather than a single-color mask. A surrounding color property does not recolor a flag.

html
<span class="icon:flagpack-nl" role="img" aria-label="Netherlands"></span>

Use a visible country name when possible. If a flag is the only content that conveys meaning, give it an accessible name; if text already identifies the country, mark the icon aria-hidden="true". Flags alone can also be ambiguous for language selection, where the language name is clearer.

Browse the searchable Flagpack catalogue for the exact available codes. The upstream set is Flagpack. Read the Icons overview for CSS entry setup and rendering-mode overrides.