<flag-icon>

A collection of SVG flags, conveniently usable as a Polymer Web Component.

If you don't care about extra features, a simple CSS implementation of country flags can be found at https://github.com/lipis/flag-icon-css

Typical file sizes:

SVG files: 2kb to 75kb

PNG files: 16x11 < 1kb, 36x27 < 2kb, 75x56 < 5kb, 225x168 < 20kb

Countries

Tiny 16 x 11 PNG icons

4:3 ratio SVG

Square ratio SVG

States and Provinces

United States

Australia

Brazil

Canada

Germany

Spain

Russia

NASCAR, IndyCar

Maritime and International Code of Signals

Images come from famfamfam icon library, or generated from SVG.
SVGs come from Wikimedia Commons.
PNGs are compacted using pngcrush.
ISO 3166-1 Country Code list is available on Wikipedia.

Demos

Live Demo - General Use

Live Demo - Themes and Popover

Usage

Add the library using the Javascript package manager Bower:

bower install --save flag-icon

Import Web Components' polyfill:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

Import Custom Element:

<link rel="import" href="bower_components/flag-icon/flag-icon.html">

Start using it!

<flag-icon key="ca"></flag-icon>
<flag-icon key="canada"></flag-icon>
<flag-icon key="124"></flag-icon>
<!-- specify to use PNGs -->
<flag-icon key="ca" img></flag-icon>
<!-- specify a specific size -->
<flag-icon key="ca" width="100"></flag-icon>

<!-- Specify alt & title text,
     otherwise it defaults to the official country name -->
<flag-icon key="can">Flag of Canada</flag-icon>

Or use it unrendered in scripts:

var f = new FlagIcon();

//get country info
f.findCountry('canada')
//> { name: 'Canada', alpha2: 'CA', alpha3: 'CAN', numeric: 124 }

//convert between 2 -> 3 letter character codes
f.findCountry('ca').alpha3
//> 'CAN'

//get full names of states or provinces
f.findUSState('ca')
//> { name: 'California', iso: 'US-CA', alpha2: 'CA', numeric: 6, gpo: 'Calif.' }

f.findCanadianProvince('ON')
//> { name: 'Ontario', alpha2: 'ON' }

Options

Attribute	Type	Default	Description
`key`	string	`null`	Proper, common, ISO 3166-1 alpha-2, alpha-3, or country code
`img`	attribute	`false`	Use PNGs instead of larger filesize SVG
`width`	integer	`16`	Width of icon (aspect ratio maintained if `height` omitted).
`height`	integer	auto	Height of icon (aspect ratio maintained if `width` omitted).
`au`	boolean	`false`	Australian State flags
`br`	boolean	`false`	Brazilian State flags
`ca`	boolean	`false`	Canadian Province and Territory flags
`de`	boolean	`false`	German State flags
`es`	boolean	`false`	Spain Autonomous Community flags
`ru`	boolean	`false`	Russian Republics, Krais, and Oblast flags
`us`	boolean	`false`	US State flags
`maritime`	boolean	`false`	Maritime and ICS flags
`racing`	boolean	`false`	NASCAR and IndyCar racing flags
`square`	boolean	`false`	Use square version instead of 4:3 aspect (only valid for country flags)
`aspect`	float		Override aspect ratio used to render the flag

Aspect Ratios for Flags

Flags come in all different shapes and sizes, attempts were made to standardize to the following aspect ratios (width:height)

Attribute	Aspect
Country	4:3
Austrialia	2:1
Brazil	3:2
Canada	2:1
Germany	5:3
Spain	3:2
US	3:2
Russia	3:2
NASCAR, IndyCar	4:3
Maritime	1:1

firmapi/flag-icon