PNG-иконки без фона — скачать бесплатно, 16–512 px
PNG — самый совместимый формат иконок: картинка без фона (с альфа-каналом) открывается в любом редакторе, документе Word, презентации PowerPoint, почтовом клиенте и мессенджере.
Каждую 2D-иконку каталога можно скачать в PNG (пнг) восьми размеров — от маленьких 16 и 32 px для интерфейса и таблиц до 512 px для слайдов и печати, а 3D-иконки — в 256, 512 и 1024 px. Фон у всех файлов прозрачный: иконка ложится на подложку любого цвета, а монохромные рисунки можно перекрасить прямо на странице перед скачиванием.
Что такое PNG-иконка
PNG — растровый формат со сжатием без потерь: картинка хранится как сетка пикселей, и сжатие не портит края и цвета. Для иконок главное в нём — альфа-канал, то есть степень прозрачности каждого пикселя. Поэтому у скачанной иконки нет белого прямоугольника вокруг, а сглаженные края одинаково аккуратно ложатся на белый, тёмный и цветной фон.
Каждый из восьми размеров у 2D-иконок отрисован из векторного исходника отдельно: файл 16 px — не уменьшенная копия 512 px, а чёткий рендер ровно под 16 пикселей. 3D-иконки выдаются в PNG 256, 512 и 1024 px.
Когда выбирать PNG
PNG нужен там, где вектор не поддерживается или неудобен:
- презентации и текстовые документы, особенно в старых версиях офисных программ;
- email-рассылки — большинство почтовых клиентов не показывают SVG;
- карточки товаров, конструкторы сайтов и CMS, которые принимают только растр;
- мессенджеры, чаты и публикации в соцсетях;
- макеты для печати, если типография просит растровый файл.
Для отчётов и слайдов удобно брать иконки бизнеса и финансов, для уроков — учебные пиктограммы, для страниц о команде — изображения людей и аватаров, для открыток — праздничные символы. Много файлов сразу проще скачать архивом набора: в ZIP лежат SVG и PNG 128 px, например у набора «Образование» или «Люди и аватары».
PNG, SVG, ICO или WebP
У каждого формата своя задача. SVG-иконки — вектор: один файл на все размеры и цвет через CSS, но почта и многие сервисы его не принимают. ICO — контейнер из нескольких размеров для favicon и ярлыков, в документах он не нужен. WebP сжимает ту же картинку компактнее и хорош для сайтов, но открывается не во всех старых редакторах. PNG проигрывает им в гибкости, зато работает практически везде, и каждый размер — готовый файл без конвертации.
Какой размер PNG где использовать
| Размер файла | Где использовать |
|---|---|
| 16 и 24 px | Таблицы, списки, пункты меню, мелкие кнопки |
| 32 и 48 px | Интерфейс на экранах высокой плотности, документы, письма |
| 64 и 128 px | Карточки на сайте, блоки преимуществ, посты |
| 256 и 512 px | Слайды, баннеры, обложки, небольшая печать |
| 3D: 256, 512 и 1024 px | Первый экран лендинга, промо, карточки товаров |
Практические советы
- Правило двойного размера. Экраны смартфонов и многих ноутбуков выводят две-три физические точки на пиксель макета. Для места 32 px скачивайте PNG 64 px и задавайте в вёрстке width и height — иконка останется резкой, а вёрстка не будет прыгать при загрузке.
- Не растягивайте маленькие файлы. Увеличенная картинка становится мыльной. Возьмите крупный размер сразу или переконвертируйте SVG в PNG нужной величины — хоть 1024 px для печати.
- Стиль. Для слайдов хорошо подходят плоские цветные иконки, для документов и инструкций — линейные.
- Вес страницы. Перед публикацией прогоните файлы через сжатие PNG: прозрачность сохранится, а файл станет легче.
Категории
- Интерфейс 97
- Стрелки 50
- Социальные сети 43
- Бизнес и финансы 71
- Еда и напитки 54
- Транспорт 48
- Погода 53
- Медицина 48
- Образование 52
- Спорт 50
- Музыка и медиа 47
- Устройства и техника 46
- Файлы и документы 47
- Безопасность 39
- Связь и почта 49
- Путешествия 48
- Дом и быт 48
- Природа и животные 48
- Покупки 33
- Люди и аватары 30
- Время и календарь 26
- Карты и локации 30
- Наука 42
- Праздники 45
Популярные наборы
Все наборы →Частые вопросы
- Какой размер PNG-иконки выбрать?
- Возьмите размер, в котором иконка будет показана, и умножьте на два для экранов высокой плотности: для места 24 px подойдёт PNG 48 px, для слайда — 256 или 512 px. Уменьшать крупный PNG можно, а растянутый маленький станет размытым.
- У PNG-иконок прозрачный фон?
- Да, все PNG сохранены с альфа-каналом: вокруг рисунка нет белой рамки, и иконка ложится на подложку любого цвета. Превью на сайте показано на клетчатом фоне, чтобы прозрачность было видно.
- Почему скачанная PNG-иконка чёрная?
- Монохромные иконки по умолчанию сохраняются чёрными — так их удобнее ставить на светлый фон. Для тёмного фона перекрасьте иконку на её странице, например в белый цвет из палитры, или поменяйте цвет SVG и переведите его в PNG в конвертере.
- Чем PNG лучше SVG?
- PNG открывается везде, даже там, где вектор не принимают: в почтовых рассылках, старых офисных программах, карточках маркетплейсов и многих конструкторах сайтов. Зато SVG легче и не зависит от размера, поэтому для вёрстки сайта он удобнее.
- Как скачать иконку PNG без фона?
- На странице любой иконки выберите размер в блоке «Скачать» — все PNG уже сохранены с прозрачным фоном, отдельно включать ничего не нужно. Если нужен белый или цветной вариант, сначала задайте цвет на странице, затем скачайте файл.