Large flags

While you can easily override a lot of the plugin's styles in your own CSS, you cannot change the flag image dimensions, which are pre-built to a specific size. By default, this is 16x12px, or 32x24px for the retina images. In order to show larger flags, you will need to re-build the images yourself. This is very simple to do.

In order to rebuild larger flag images, first follow the Contributing guidelines to get the project building (npm run build) without any errors. Now, let's say you want to display the flag images at double size, 32x24px (retina image is 64x48px), as per the demo below. In grunt/generate-sprite.js, update the TARGET_HEIGHT value to 24 (this will automatically be doubled for the retina sprite). Then run npm run build:img to get the new flag images and updated CSS. At this point you should be able to open the provided demo.html to see the larger flag images. You may then want to override some of the CSS variables/styles in src/css/intlTelInput.scss in order to accommodate the larger flag images.

Markup

<input id="phone" type="tel">

Code

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "us",
  loadUtils: () => import("/intl-tel-input/js/utils.js?1756295054461") // for formatting/placeholders etc
});