Helveticon

Icon font containing flags of all Swiss cantons and the 10 largest cities.

Quickstart

Demo

This webfont can be used to replace cantonal two-letter codes with their flag representation, or more generally to easily insert cantonal and some municipal flags into Web pages:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lehmannro/helveticon@master/css/helveticon.css" />
<link rel="preload" href="https://cdn.jsdelivr.net/gh/lehmannro/helveticon@master/fonts/Helveticon.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

<span class="helveticon">ZH</span>

Icons

Each Swiss canton is included with a codepoint in the Unicode Private Use Area and a ligature per their two-letter code.

Canton	Ligature	Codepoint
Aargau	AG	U+F001
Appenzell-Ausserrhoden	AR	U+F002
Appenzell-Innerrhoden	AI	U+F003
Basel-Landschaft	BL	U+F004
Basel-Stadt	BS	U+F005
Bern	BE	U+F006
Fribourg	FR	U+F007
Geneva	GE	U+F008
Glarus	GL	U+F009
Graubünden	GR	U+F00A
Jura	JU	U+F00B
Lucerne	LU	U+F00C
Neuchâtel	NE	U+F00D
Nidwalden	NW	U+F00E
Obwalden	OW	U+F00F
St. Gallen	SG	U+F010
Schaffhausen	SH	U+F011
Schwyz	SZ	U+F012
Solothurn	SO	U+F013
Thurgau	TG	U+F014
Ticino	TI	U+F015
Uri	UR	U+F016
Valais	VS	U+F017
Vaud	VD	U+F018
Zug	ZG	U+F019
Zurich	ZH	U+F01A

The ten largest cities¹ (or, rather, municipalities) are also included, with their ligature chosen as per the closest airport:

City	Ligature	Codepoint
Stadt Zürich	ZRH	U+F020
Ville de Geneve	GVA	U+F021
Basel	BSL	U+F022
Lausanne	QLS	U+F023
Stadt Bern	BRN	U+F024
Winterthur	LSPH	U+F025
Stadt Luzern	LSZO	U+F026
Stadt St. Gallen	ACH	U+F027
Lugano	LUG	U+F028
Biel/Bienne	LSZP	U+F029

For completeness, the Swiss flag is also included:

Country	Ligature	Codepoint
Switzerland	CH	U+F000

Usage

Note

The css/ directory provides helveticon.css for basic setup and helveticons.css for per-glyph CSS classes.

Add the webfont:

@font-face {
  font-family: "Helveticon";
  src: url("https://cdn.jsdelivr.net/gh/lehmannro/helveticon@master/fonts/Helveticon.woff2") format("woff2");
}
.helveticon {
  font-family: "Helveticon";
}

You can then reference glyphs either by codepoint or ligature, for example to render the Canton of Zurich's flag:

<span class="helveticon">&#xF01A;</span>
<span class="helveticon">ZH</span>

Alternatively, you could use CSS classes to inject the glyph:

<style>
.helveticon-zh:before {
  font-family: "Helveticon";
  content: "\F01A"
}
</style>
<span class="helveticon-zh"></span>

Tip

Speed up loading of the fonts with an instruction like the following:

<link rel="preload" href="https://cdn.jsdelivr.net/gh/lehmannro/helveticon@master/fonts/Helveticon.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

Related projects

• Stefan Zweifel's swiss-canton-iconfont does the same with geographical shapes.

Legal

These fonts are licensed under the SIL Open Font License.

The underlying flags are public domain, however please see the Coat of Arms Protection Act (CAPA) for usage restrictions. Any public or commercial display may require further authorization.

Credits

Fonts generated by IcoMoon. Flag SVGs from Wikimedia Commons: cantonal, municipal.

Footnotes

1. As per Wikipedia's List of cities in Switzerland (May 2026 revision with 2020 population data). ↩