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 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 grunt/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. 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 in src/css/intlTelInput.scss 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

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "us",
  loadUtils: () => import("/intl-tel-input/js/utils.js?v=99bd3fdd9170"),
  searchInputClass: "form-control",
});