Large flags

Overview

You can resize the flags with the --iti-flag-width CSS variable (height scales automatically), but the sprite is rasterised at a fixed size (20x15px, or 40x30px retina), so scaling up past the default looks soft. For crisp larger flags you need to rebuild the sprite yourself:

1. Follow the Contributing guidelines to download the project and get it building (npm run build) without errors.
2. In scripts/generate-sprite.js, update the TARGET_HEIGHT value — for the demo below we use 18 (so the retina sprite is 36). Whatever height you choose, it must be a multiple of 3 so that the corresponding width is a whole number (flags have a 4:3 aspect ratio).
3. Run npm run build:img to generate the new flag images and the updated CSS needed to use them.
4. Open demo.html to check the larger flags render correctly.

You may then want to override some of the CSS variables/styles from src/css/intlTelInput.css in your own CSS to accommodate the larger flag images — see the overrides used in this demo.

When you're happy, copy the built flag images and CSS file into your own project, and load the standard library script as usual.

Note: the toast shown when input is rejected isn't part of the library — see the strict:reject event docs for an example of how to wire one up yourself.

Html

<label for="phone">Phone number</label>
<input id="phone" type="tel">

JavaScript

import intlTelInput from "intl-tel-input";

const input = document.querySelector("#phone");

const initialCountryLookup = async () => {
  const res = await fetch("https://ipapi.co/json");
  const data = await res.json();
  return data.country_code;
};

intlTelInput(input, {
  initialCountryLookup,
  loadUtils: () => import("intl-tel-input/utils"),
});