Country flag Icons for a pick list

Just sharing for interest.

A nice way to create a choice component containing countries with flags is to make use of the URL template:

  • The top 30 countries by GDP often include (alphabetically): Argentina, Australia, Austria, Belgium, Brazil, Canada, China, France, Germany, India, Indonesia, Ireland, Israel, Italy, Japan, Mexico, Netherlands, Poland, Russia, Saudi Arabia, Singapore, South Korea, Spain, Sweden, Switzerland, Taiwan, Turkey, United Arab Emirates, United Kingdom, and United States.

  • The ISO 3166-1 alpha-2 codes for these are: AR, AU, AT, BE, BR, CA, CN, FR, DE, IN, ID, IE, IL, IT, JP, MX, NL, PL, RU, SA, SG, KR, ES, SE, CH, TW, TR, AE, GB, US.

  • The hatscripts/circle-flags library uses lowercase ISO 3166-1 alpha-2 codes in its URL structure: https://hatscripts.github.io/circle-flags/flags/[code].svg.

  • So the URL list becomes:

Country Abbreviation URL Round Flag
Argentina AR https://hatscripts.github.io/circle-flags/flags/ar.svg
Australia AU https://hatscripts.github.io/circle-flags/flags/au.svg
Austria AT https://hatscripts.github.io/circle-flags/flags/at.svg
Belgium BE https://hatscripts.github.io/circle-flags/flags/be.svg
Brazil BR https://hatscripts.github.io/circle-flags/flags/br.svg
Canada CA https://hatscripts.github.io/circle-flags/flags/ca.svg
China CN https://hatscripts.github.io/circle-flags/flags/cn.svg
France FR https://hatscripts.github.io/circle-flags/flags/fr.svg
Germany DE https://hatscripts.github.io/circle-flags/flags/de.svg
India IN https://hatscripts.github.io/circle-flags/flags/in.svg
Indonesia ID https://hatscripts.github.io/circle-flags/flags/id.svg
Ireland IE https://hatscripts.github.io/circle-flags/flags/ie.svg
Israel IL https://hatscripts.github.io/circle-flags/flags/il.svg
Italy IT https://hatscripts.github.io/circle-flags/flags/it.svg
Japan JP https://hatscripts.github.io/circle-flags/flags/jp.svg
Mexico MX https://hatscripts.github.io/circle-flags/flags/mx.svg
Netherlands NL https://hatscripts.github.io/circle-flags/flags/nl.svg
Poland PL https://hatscripts.github.io/circle-flags/flags/pl.svg
Russia RU https://hatscripts.github.io/circle-flags/flags/ru.svg
Saudi Arabia SA https://hatscripts.github.io/circle-flags/flags/sa.svg
Singapore SG https://hatscripts.github.io/circle-flags/flags/sg.svg
South Korea KR https://hatscripts.github.io/circle-flags/flags/kr.svg
Spain ES https://hatscripts.github.io/circle-flags/flags/es.svg
Sweden SE https://hatscripts.github.io/circle-flags/flags/se.svg
Switzerland CH https://hatscripts.github.io/circle-flags/flags/ch.svg
Taiwan TW https://hatscripts.github.io/circle-flags/flags/tw.svg
Turkey TR https://hatscripts.github.io/circle-flags/flags/tr.svg
United Arab Emirates AE https://hatscripts.github.io/circle-flags/flags/ae.svg
United Kingdom GB https://hatscripts.github.io/circle-flags/flags/gb.svg
United States US https://hatscripts.github.io/circle-flags/flags/us.svg

Here I have used the choice component that displays the Abbreviation plus the image defined by the URL:

7 Likes

Beautiful!

2 Likes

That is a nice to have! Notionized!

1 Like

Nice! I’ve just been using emojis :face_with_peeking_eye:

3 Likes

Awesome!