Скачать изображения флагов стран и спрайты иконок

Используйте генератор ниже, чтобы выбрать страны, отдельные флаги или объединённое изображение иконок, задать соотношение сторон и размер, затем сгенерировать и скачать изображения флагов стран. См. список возможностей ниже для каждого элемента управления и шаги использования ниже для рекомендуемого порядка.

Элементы управления на этой странице охватывают массовый выбор, стиль флага, тип вывода, размер, раскладку и экспорт. Это основные опции, доступные при создании изображений флагов.

• Выбор названий стран: Выбирайте из полного списка, фильтруйте по континенту (Африка, Антарктида, Азия, Европа, Австралия, Северная Америка, Южная Америка), ищите по названию или отмечайте и снимайте отметки со строк по необходимости.
• Вставка кодов стран: Откройте диалог вставки и массово выберите страны из JavaScript-массива (например ['US', 'GB', 'DE']), списка с одним ISO-кодом на строку или строки с разделителями, такой как CSV с запятой, двоеточием, точкой с запятой, табуляцией или пользовательским разделителем. В таблицу применяются только допустимые коды; недопустимые записи сообщаются до нажатия Применить.
• Стиль флага: Выберите волнистые флаги с эффектом ряби или плоские флаги со стандартным прямоугольным видом перед генерацией отдельных флагов или спрайта иконок.
• Перемешать порядок стран: Случайным образом измените порядок стран в сетке спрайта. Имена ISO-классов, такие как iso_US, остаются прежними; меняется только позиция каждого флага на canvas.
• Выбор типа изображения: Download single flag для отдельных изображений с изменённым размером или create icon flags, чтобы разместить все выбранные флаги на одном изображении.
• Сохранить пропорции: Зафиксируйте ширину и высоту в соотношении 4:3 или 16:9 или отключите фиксацию для пользовательских размеров.
• Задать размер изображения: Укажите ширину и высоту каждого флага. Ограничения различаются для режимов отдельного флага и иконок, чтобы спрайты оставались компактными, а отдельные загрузки могли быть больше.
• Сгенерировать изображение: Создайте флаги с изменённым размером или объединённый canvas иконок из вашего выбора.
• Автоподбор сетки: После генерации иконок позвольте инструменту рассчитать строки и столбцы по числу выбранных стран вместо ручной настройки.
• Иконка глобуса: Показывает значок глобуса для стран без изображения флага в предпросмотре спрайта.
• Экспорт PNG, zip и JSON: Скачайте только сгенерированный PNG, zip-архив с flag-icons.png и соответствующими файлами HTML и CSS или JSON-файл с позициями спрайта и метаданными стран для React, canvas и других сценариев приложений.
• Код флагов: После генерации иконок скопируйте HTML и CSS из раздела Код флагов. Вывод использует один файл спрайта (flag-icons.png) с классами вроде flags_img и iso_AF, каждый с правильным background-position для соответствующей страны.

Следуйте этим шагам, чтобы создать изображения флагов стран с помощью опций на этой странице.

1. Выберите нужные названия стран. Используйте фильтр по континенту или поле поиска, затем отметьте только нужные строки.
2. Выберите тип изображения: Download single flag для отдельных файлов или create icon flags для всех выбранных флагов на одном изображении.
3. При необходимости включите keep ratio и выберите соотношение сторон 4:3 или 16:9.
4. Задайте размер изображения, указав ширину и высоту в пределах, допустимых для выбранного типа изображения.
5. Сгенерируйте изображение. Используйте Download Image только для PNG, Download zip для изображения + HTML + CSS в одном файле или скопируйте HTML и CSS из раздела Код флагов без скачивания.

Тип изображения определяет, получите ли вы много отдельных файлов или один спрайт. Выберите режим, который соответствует тому, как вы будете использовать флаги в проекте.

Режим иконок работает с одной или несколькими выбранными странами, но сетка из четырёх флагов и более обычно даёт более удобную раскладку спрайта. Режим отдельного флага подходит, когда нужна только одна страна или небольшой набор отдельных файлов.

Сохранение пропорций и задание размера изображения работают вместе. Когда фиксация пропорций включена, изменение ширины или высоты обновляет другую сторону, чтобы флаги оставались пропорциональными.

• Соотношение сторон 4:3: Распространённая флагоподобная форма для компактных иконок и элементов списка.
• Соотношение сторон 16:9: Более широкая рамка, когда нужны миниатюры в альбомной ориентации.
• Отключите сохранение пропорций, когда нужны пользовательские ширина и высота, не соответствующие этим пресетам.

Ограничения размера зависят от типа изображения. В режиме иконок каждый флаг остаётся небольшим (примерно от 15px до 100px по ширине), чтобы объединённый спрайт оставался управляемым. В режиме отдельного флага допускаются большие ширины (примерно от 15px до 1000px) для отображения или загрузки. Высота следует тем же правилам режима.

После генерации спрайта иконок панель предпросмотра позволяет уточнить расположение флагов на canvas перед скачиванием или копированием кода.

• Строки и столбцы: Управляйте количеством флагов по горизонтали и вертикали в сетке спрайта.
• Отступ между строками и столбцами: Добавляйте горизонтальные или вертикальные промежутки между ячейками флагов.
• Padding: Добавьте пространство вокруг внешнего края объединённого изображения.
• Радиус: Смягчите углы флагов скруглённой обрезкой, когда нужны более мягкие иконки.
• Подогнать предпросмотр по размеру: Вместите широкий canvas на страницу, чтобы просмотреть весь спрайт.
• Обновить: Перестройте canvas после изменений раскладки, чтобы позиции оставались синхронизированы с сгенерированным CSS.
• Код флагов: Скопируйте сгенерированные HTML и CSS из раздела Код флагов. Для каждой выбранной страны создаётся класс iso_XX с соответствующим background-position на общем спрайте.
• Download Image: Экспортируйте только сгенерированный PNG-спрайт, если у вас уже есть собственные HTML и CSS или нужен только файл изображения.
• Download zip: Экспортируйте flag-icons.png вместе с сгенерированными HTML и CSS в одном zip, чтобы полный пакет спрайта оставался согласованным.

Держите общий canvas ниже максимальных ограничений ширины и высоты, показанных инструментом. Очень большие сетки могут превысить допустимый размер изображения; уменьшите строки, столбцы или размер иконки, если появится предупреждение о размере. После изменения отступов или размера снова обновите предпросмотр перед копированием CSS или скачиванием zip, чтобы позиции оставались точными.

В режиме create icon flags раздел Код флагов создаёт готовый к вставке код, указывающий на одно изображение спрайта. Для каждой страны используется общий класс flags_img и ISO-класс вроде iso_AF, который задаёт точное смещение background для соответствующей ячейки флага.

Образец HTML сочетает блок флага с подписью страны. Образец CSS определяет flex-строку, общий размер спрайта и одно правило на ISO-код. Живой вывод обновляется в соответствии с выбранными странами и раскладкой.

<div class="flex-box">
    <div class="flags_img iso_AF"></div>
    <div>Afghanistan</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AX"></div>
    <div>Aland Islands</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AL"></div>
    <div>Albania</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_DZ"></div>
    <div>Algeria</div>
</div>

.flex-box {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flags_img {
    background-image: url('flag-icons.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 28px;
    background-color: transparent;
    vertical-align: middle;
    background-position: 51px 29px;
    margin: 8px;
}

.iso_AF {background-position: 0 0}
.iso_AL {background-position: -102px 0}
.iso_AX {background-position: -51px 0}
.iso_DZ {background-position: -153px 0}

Разместите flag-icons.png рядом с CSS (или обновите путь url()), затем вставьте HTML и CSS на страницу. Предпочитайте Download zip, когда нужны изображение, HTML и CSS в одном согласованном пакете. Изменение строк, отступов или размера иконки меняет пиксельные смещения, поэтому нажмите Обновить и скопируйте обновлённый Код флагов или скачайте zip после изменения раскладки.

Иконки флагов стран встречаются во многих частях продукта. Вот типичные места, где можно использовать изображения из этого инструмента.

• Переключатели языка и региона в заголовках сайтов
• Поля выбора страны рядом с формами телефона или адреса
• Поиск магазинов, варианты доставки и списки стран при оформлении заказа
• Панели, группирующие аналитику или пользователей по странам
• Экраны настроек мобильных приложений с доступными локалями
• Маркетинговые страницы, показывающие поддерживаемые рынки
• CSS-спрайт-списки, показывающие флаг рядом с названием каждой страны из одного PNG-запроса

Сочетайте иконки флагов с выпадающим списком названий стран или JSON-списком стран, когда также нужны ISO-коды и подписи в разметке или данных приложения. Связанные ссылки перечислены в разделе связанных инструментов.

Ответы на частые вопросы о загрузке отдельного флага, спрайтах иконок, позициях CSS background, соотношении сторон, ограничениях размера, параметрах раскладки и связанных SVG-флагах.

Нужны SVG-флаги, разметка выпадающего списка стран или данные о странах в другом формате? Эти страницы охватывают близкие сценарии.

• Скачать SVG-флаги стран для масштабируемых векторных флагов и SVG-кода.
• HTML-выпадающий список названий стран для select-списков с ISO-кодами и подписями.
• JavaScript-массив названий стран для JSON и объектных списков стран.
• PHP-массив названий стран для серверных данных о странах.
• Центр инструментов для изображений для других страниц загрузки и конвертации изображений.
• Конвертер изображений в WebP когда нужно оптимизировать экспортированные PNG-флаги.