Creating flags with CSS and other open source tools

These open source solutions help you get your vexillology on.
310 readers like this.
eu flags

“The creation and development of a body of knowledge about flags of all types, their forms and functions, and of scientific theories and principles based on that knowledge.” —The definition of vexillology, according to the Fédération internationale des associations vexillologiques.

Some flags are symbols of countries, and some are easily recognizable, such as the flags of Canada and Japan. Others are more obscure, such as those of Sierra Leone and Andorra. But who owns the copyright to flags of the world? According to Wikipedia, “national, governmental, or historical flags are … in the public domain because they consist entirely of information that is common property and contain no original authorship.” Of course, there are flags for states, provinces, cities, and so forth. It is assumed that geographically representative flags are in the public domain and can be used freely.

Images of national flags can be found in many places. For example, Spain’s Enrico Maria Crisostomo and Norway’s Hampus Joakim Nilsson offer collections on GitHub. You can use these images on websites, in print, or wherever you choose.

While finding and using national flags is easy, making your own flag or researching obscure flags may take some work. Fortunately, open source solutions can help you get your vexillology on.

Creating flags with CSS

Finding images of flags and using them on a website as .jpg or .png files is one approach, but you can also create them using Cascading Style Sheets (CSS).

Czech Republic-based Spectraweb’s Flag Sprites offers an easy to way to generate flags using CSS. You can access the entire collection of flags available in various formats, or narrow it down to your own selection. In this example, I focused on the flag of Norway:

flag sprites screenshot

By generating the code, I was able to modify it so that I could use only the Norwegian flag.

Another set of CSS code on GitHub, Vexillum, developed by Kazakhstan’s Talgat Uspanov, offers similar features:

Vexillum Norway flag

You can download images of flags in different formats from many resources. Maps OpenSource includes not only flags but maps and coats of arms as well. All the content is licensed under a Creative Commons Attribution 3.0 Unported License. These can be handy to use as is or as a base for your own vexillological creations.

An easy-to-use open source flag creator is Andrew Arnold’s FlagMaker 2.0.1. I installed it from GitHub onto my Pop!_OS 17.10 laptop. Using the controls, I was able to change colors and placement and add symbols. Here is my flag for the Republic of Openso, available on Wikimedia Commons:

Flagmaker screenshot

The open source New Zealand flag debate

In 2015, New Zealand, whose flag is similar to that of neighboring Australia, decided to “open source” ideas for a new national flag. Many new designs were proposed. In The New York Times Magazine, Rob Walker wrote, “In doing so, the Kiwis were joining what has become a quiet redesign trend. Mozilla, the company behind the Firefox web browser, is expanding its open-source principles to its branding, completely redesigning its logo through a multipart process guided by public input.”

Open-sourcing might seem like a good idea; certainly, the citizens should have a say in their national identity. But, as Walker noted in his article, “One of New Zealand’s most prominent designers declared himself ‘outraged’ by the lack of ‘professional design input.’”

In the end, the Kiwis decided to stick with their version of the Southern Cross flag by a majority of 56%.

Open source Hoosiers

Why should New Zealand have all the fun? The city of South Bend, Indiana, also decided to “open source” its flag redesign, and it achieved better results than New Zealand. More than 1,000 citizens gave their input, and a new flag design was selected. In the South Bend Tribune, Erin Blasko wrote, “The flag is based on designs submitted by South Bend residents Garret Gingerich and Jeffrey Koenig and Indiana University South Bend student Jesse Villagrana.” Council president Tim Scott added, “The flag is an open-source design, meaning it can be reproduced free of charge. Images are available for download on the city’s website.

City of South Bend Flag


Following South Bend’s example, the city of Scottsdale, Arizona is also in the process of open-sourcing its flag redesign.

Flags, the universe, and everything

Slovenia’s ZEK Crew set its sights a bit higher, designing flags for the future of civilization itself. The creative agency started with this question: What would our planet's flag look like? The team notes, “This, of course, is an open-source project; that's why we put the PDF files online.”

Whether you need an existing flag for a print project or website or you have designs on creating your own micronation, such as the Principality of Sealand, open source solutions can help make you the ruler of your own domain.

User profile image.
Jeff Macharyas is the Director of Marketing at Corning Community College in New York. He is a writer, graphic designer and communications director who has worked in publishing, higher education and project management for many years.

1 Comment

who would have thought that one would learn about vexillology (o_O)

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.