Translation Editor
Save time on handling localization files and translation strings.
Try SimpleLocalize
Share article

Hosted country flags

Hosted country flags

Country flags often work as intuitive language indicators within language selectors, improving the overall user experience and interface functionality. At SimpleLocalize, we understand the importance of seamless integration and visual consistency. That's why we offer hosted country flag icons for effortless integration into your projects, ensuring a cohesive workflow and UI design.

Managing country flags in your software project

Including country flags in software projects can significantly improve the user interface's visual appeal and functionality. At SimpleLocalize, we streamline this process by using the Flag Icons project, which contains a comprehensive collection of flags in SVG format. We use it to display country flags within the SimpleLocalize user interface.

Starting today, you can seamlessly integrate these flags into your project using the following URL:

https://cdn.simplelocalize.io/public/v1/flags/{icon}.svg

Here, {icon} corresponds to the value from your hosted languages resource, which you can access via:

https://cdn.simplelocalize.io/{projectToken}/{environment}/_languages

Learn more about getting a language list for your project from Translation Hosting.

Configuring flags

To begin, head to the Languages tab in your project to configure flags.

It's important to note that flags auto-detected by SimpleLocalize won't automatically appear in the _languages section. Therefore, explicit configuration is required. Be sure to manually select the language flag in each language configuration.

Watch the video tutorial below to learn how to set up flags for your languages:

Setting up flags in the Languages tab

Publishing changes

Once flags are configured, make sure to publish the changes to make them readily available in your project environment.

The publish option updates the hosted translations with newly set-up language flags.

Publishing changes after setting up flags

Integrating flags into your project

With flags configured and changes published, you can now seamlessly integrate them into your project using the icon field's values.

Use flags in your project

Check out sample hosted icons below.

<!-- Usage -->
<img src="https://cdn.simplelocalize.io/public/v1/flags/{icon}.svg"/>

<!-- Examples -->
<img src="https://cdn.simplelocalize.io/public/v1/flags/gb.svg">
<img src="https://cdn.simplelocalize.io/public/v1/flags/es.svg">
<img src="https://cdn.simplelocalize.io/public/v1/flags/it.svg">
<img src="https://cdn.simplelocalize.io/public/v1/flags/pl.svg">

How to make flags look good on every background?

While colorful flags look good by adding vibrancy to your UI, always make sure they remain visually appealing across various backgrounds. For example, flags with light colors may appear washed out on white backgrounds, while darker flags may blend into darker backgrounds.

To address this, consider using the box-shadow property with the inset option, to make the flag look good on every background:

.my-flag-icon {
  border-radius: 100%;
  border: none;
  margin: 2px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08);
}

This adjustment won't make the flag colors look different on the edges, but it will enhance its visibility on diverse backgrounds.

How to show flags on white background

For further exploration, have a look at our blog post on alternative flag projects, and you should definitely check out our World Data Resources for comprehensive flag, country, and language-related data to best suit your project requirements.

Hosted flags and icons

If you are building your custom language selector, then you can check out our blog post about language selectors inspirations, where we gathered the best examples of language selectors from the web.

Relevant posts

Check out our latest blog posts and stay up to date with SimpleLocalize

UI Design: Language selectors

Kinga Wojciechowskaby5 min read

A great language selector can highly improve user experience, and it's an essential setting in a multilingual website. Check our selection of the most beautiful language selectors.

Continue reading