Signal Flags — single SVG sprite

Heads up: /sprite.svg is a sprite (symbols), so it renders blank when opened directly. You use it via <use href="…#id"> or the Web Components below.

Web Components included: <signal-bunting>, <signal-pattern>, and <signal-flag>.

1) Generated outputs

The sprite contains symbol ids like sf-a (outline) and sf-a-plain (plain).

2) Quick controls

Live bunting (Web Component)

Live pattern (Web Component)

This previews the repeating /pattern.svg tile as an SVG pattern fill.

How it looks as a real CSS background

Tile: — URL: —

Copy/paste CSS snippet (background)

This does not require Web Components — it just uses /pattern.svg.

Copy/paste snippet (bunting)

Use this on any page (assumes signal-flags.css + signal-flags.js are loaded).

Single flag (Web Component)

Use <signal-flag> when you want one flag instead of a string of flags. It renders a single symbol from /sprite.svg.

  • code = the character to render (A–Z or 0–9)
  • variant = outline / plain / vintage / vintage-plain
  • size = pixel size (or use the CSP-safe size classes like sf-size-24)

Example: 

<!-- load once on the page -->
<link rel="stylesheet" href="/signal-flags.css">
<script type="module" src="/signal-flags.js"></script>

<!-- use anywhere -->
<signal-flag code="A" size="40" variant="outline"></signal-flag>

<!-- CSP-safe sizing alternative (if you prefer classes) -->
<signal-flag code="A" class="sf-size-40" variant="outline"></signal-flag>

(If you don’t have sf-size-40, use the presets you do have, e.g. sf-size-24, sf-size-28, etc.)

Export

Exports the currently rendered bunting / pattern / single flag as standalone SVG files (Canva-friendly).

3) “Raw” sprite usage (no JS)

This is the core trick: reference a symbol inside the sprite via <use>. 

<svg width="64" height="64">
  <use href="signal-flags/sprite.svg#sf-a"></use>
</svg>

4) Full grid

How you use this in another container

  1. Mount the shared volume into your app at /public/signal-flags (read-only).
  2. Serve that folder as static files.
  3. In your HTML: load /signal-flags.css + /signal-flags.js and use the Web Components.
<!-- load once (in <head> / end of <body>) -->
<link rel="stylesheet" href="/signal-flags/signal-flags.css">
<script type="module" src="/signal-flags/signal-flags.js"></script>

<!-- bunting (multiple flags from text) -->
<signal-bunting text="9MEI2026" size="56" variant="outline"></signal-bunting>

<!-- single flag -->
<signal-flag code="A" size="40" variant="outline"></signal-flag>