Use signal flags on a website

This example page shows how to use the Signal Flags JavaScript loader to include many flag images on a web page without downloading them individually. For more information and signal flag resources see the Signal Flags website.

Getting started

Include the Signal Flags Loader script anywhere on the page (in the <head> is best if you use async as in the example below). 

<script async src="https://cdn.jsdelivr.net/npm/signal-flags@2"></script>

There are no other dependencies and we have not found any conflicts but note that the code is unlikely to work in any version of Internet Explorer other than IE 11.

Inline images

Insert a small image like this Signal flag A in any text by writing <img alt="Signal flag [name]">, replacing [name] with the abbreviated name of the flag. Inline images are sized to fit their context so they are…

…bigger in a Signal flag H Signal flag n2 Numeral pennant 2 heading!

You can also set a width and/or height for the image e.g. <img alt="Signal flag AP" height="10"> Signal flag AP <img alt="Signal flag n1" width="120"> Signal flag n1.

The list below shows the abbreviated flag names we use:

  • letters A…Z a Signal flag A, b Signal flag B, c Signal flag C, … x Signal flag X, y Signal flag Y, and z Signal flag Z;
  • numerals 0…9 n0 Signal flag n0:Numeral pennant 0, n1 Signal flag n1:Numeral pennant 1, n2 Signal flag n2:Numeral pennant 2, … n7 Signal flag n7:Numeral pennant 7, n8 Signal flag n8:Numeral pennant 8, and n9 Signal flag n9:Numeral pennant 9;
  • answering pennant (AP) ap Signal flag ap:Answering pennant;
  • substitutes: 1st s1 Signal flag s1 1st Substitute flag, 2nd s2 Signal flag s2 2nd Substitute flag, and 3rd s3 Signal flag s3 3rd Substitute flag ;
  • and finally flags from the RRS and other racing flags: black Signal flag black, blue Signal flag blue, green Signal flag green, red Signal flag red, yellow Signal flag yellow, greenwhite Signal flag greenwhite, and blackwhite Signal flag blackwhite.

Block elements

For more control over the size and position of an image, wrap it in a containing <div> and set the style attribute like this: 

<img alt="Signal flag A" style="display: block;" />

By default a block element will take up the whole width of the page so for smaller sizes you can either use a CSS layout framework like Bootstrap or set the width in CSS yourself. Pennants (numerals and the Answering Pennant) and substitutes look good at 1.25× the width of rectangular flags.

Signal flag a Alpha a
Signal flag z Zulu z
Signal flag blackwhite Black and white (RRS D2.4.c.) blackwhite
Signal flag greenwhite Green and white (RRS D2.4.a.) greenwhite
Signal flag n1 Numeral 1 n1
Signal flag n2 Numeral 2 n1
Signal flag AP Answering Pennant ap
Signal flag s1 1st Substitute s1

Full control

If you want full control over the display of a flag you can get the svg markup by calling the get(flag, options) method on a SignalFlags object: see the documentation for more information.