pennantsTodas las banderas, todas las formas, una sola API

271 banderas de países como banderines (el estilo propio), rectángulos, cuadrados y círculos. SVG, PNG, CSS, sprite, JS con tree-shaking, React y Web Component; solo envías las banderas que muestras.

Empezar

Ver la galería

Formas

¿Qué formato uso?

Cuatro formas

Banderín por defecto, más rectángulo 4:3, cuadrado y círculo. Los mismos códigos y la misma API; eliges la forma con una opción.

Todos los formatos

SVG y PNG estáticos, clases CSS, un sprite SVG, un módulo ES por bandera, un componente de React y un custom element sin framework.

Pagas solo lo que muestras

Cada bandera es su propio módulo y su propio chunk diferido, así que solo envías las banderas que muestras. Los nombres salen de Intl.DisplayNames, sin datos extra.

Tipado y traducido

Un tipo PennantCode con los 271 códigos y nombres en cualquier idioma gracias a Intl.DisplayNames, sin incluir datos de nombres.

Accesible por defecto

Los componentes reciben un nombre accesible traducido automáticamente; pasa un title o label vacío si la bandera es decorativa.

Personalizable

Cambia el color de la barra del banderín con dos custom properties de CSS. Compatible con CSP estricta.

Los mismos códigos que flag-icons

Generado a partir de las banderas de flag-icons. Mantén los rectángulos con la forma rect o pásate a los banderines.

Inicio rápido

npm install pennants

import 'pennants/css';

html

<span class="pn pn-ar" role="img" aria-label="Argentina"></span>

Elige un formato

CSS

import 'pennants/css';

<span class="pn pn-ar" role="img" aria-label="Argentina"></span>

Una hoja de estilos por forma, combinables en una misma página, sin JavaScript; cada imagen se descarga solo cuando se usa su clase. Con Vite, usa la variante cdn o configura assetsInlineLimit (ver FAQ).

¿Dudas? Lee ¿Qué formato uso? o mira todas las banderas en la galería.