Want to customize the language switcher of your WPML plugin to match your website’s design? One way is to use custom flags. Although WPML already provides flags for many languages, you can upload your own flag images as well.
WPML comes with built-in flags for all 65 pre-configured languages, plus additional flags for popular country-specific language variants (such as Canadian French, Brazilian Portuguese, or Swiss German). These flags are available as either SVG or PNG files at the following file path:
However, you may want to use a different style of flag that better matches your site. Or, you may want to add a flag for a language WPML doesn’t have pre-configured. In these cases, you can upload a custom flag.
You can upload a flag as a PNG, JPG, GIF, or SVG file.
Please note that WordPress does not natively support SVG uploads. This means you need a different plugin to be able to upload SVG files to your WordPress site.
You will also need to be sure that the SVG source file is 18 x 12 pixels if you want it to look right alongside WPML’s default flags. The viewBox can be any proportional value, for example:
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" fill="none" viewBox="0 0 36 24">...</svg>
WPML automatically resizes PNG and JPG flag files to 18 x 12 pixels for consistency.
Go to WPML → Languages and click Edit languages. This is also where you can add a custom language to your site.
For each language, choose to display a Custom flag, then click Choose File.
Upload your flag file and click Save to add the flag to your language switcher.
You can choose a custom size for all the flags in a language switcher when you add or edit the language switcher.
If you use the language switcher block, you can resize your flag from the block settings.
In such cases, you can turn off automatic resizing by adding the following to your wp-config.php file:
define( 'WPML_DO_NOT_RESIZE_UPLOADED_FLAGS', true );