Large flags

While you can change the display size of the flags using the CSS variable --iti-flag-width (the height scales automatically), you cannot change the underlying flag image size without re-building the it yourself. The flag sprite is pre-built to a specific size (20x15px by default, or 40x30px for retina), so scaling it down via the CSS variable works fine, but scaling it up past the default would look soft because the sprite is rasterised at a fixed resolution. To show larger, crisp flags, you need to re-build the images yourself at a higher resolution. This is very simple to do.

In order to rebuild larger flag images, first follow the Contributing guidelines to download the project and get it building (npm run build) without any errors. Now, let's say you want to display the flag images at 24x18px (retina image is 48x36px), as per the demo below. In scripts/generate-sprite.js, update the TARGET_HEIGHT value to 18 (this will automatically be doubled for the retina sprite). Note that whatever height you choose, it must be a multiple of 3, so that the corresponding width (flags have a 4:3 aspect ratio) is a whole number. Then run npm run build:img to generate the new flag images and the updated CSS needed to use them. 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 from src/css/intlTelInput.scss in your own CSS in order to accommodate the larger flag images, e.g. see the overrides used in this demo. When you're happy, you can copy the built flag images and CSS file into your own project, and then just load the standard plugin script as usual.

Html

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

JavaScript

import intlTelInput from "intl-tel-input";

const input = document.querySelector("#phone");
intlTelInput(input, {
  initialCountry: "us",
  loadUtils: () => import("intl-tel-input/utils"),
});