Белые иконки — скачать бесплатно PNG и SVG на прозрачном фоне
Белые иконки нужны для тёмных интерфейсов, слайдов на чёрном фоне, баннеров и видео.
В каталоге любая монохромная иконка — линейная, залитая или двухцветная — перекрашивается прямо на странице: выберите белый в палитре и скачайте PNG нужного размера или SVG. Ниже — иконки, которые чаще всего берут в белом цвете, и советы, как не потерять их на светлой подложке.
Как скачать белую иконку
- Откройте страницу любой монохромной иконки — линейной, залитой или двухцветной.
- В палитре над кнопкой скачивания выберите белый цвет или введите
#FFFFFF. Превью переключится на тёмную подложку, чтобы иконку было видно. - Выберите размер PNG (16–512 px) или формат SVG и нажмите «Скачать». Файл сохранится белым, с прозрачным фоном.
Для пачки иконок удобнее перекраска SVG: загрузите до 50 файлов, задайте один цвет для всех и скачайте ZIP. Тот же приём работает и для чёрных, серых и любых цветных вариантов — белый просто самый частый.
Где нужны белые иконки
- Тёмная тема сайта или приложения. В SVG цвет задаётся через CSS, поэтому одна и та же иконка будет чёрной в светлой теме и белой в тёмной — без второго файла. PNG-версия пригодится там, где CSS недоступен.
- Слайды на чёрном фоне и заставки к видео: белая иконка 256–512 px читается с расстояния и не спорит с фотографией.
- Баннеры и обложки в соцсетях: белые пиктограммы поверх цветной подложки выглядят аккуратнее чёрных.
- Дизайн-макеты в Figma: перетащите SVG — цвет можно поменять в самом редакторе.
Белый цвет через CSS
Если иконка вставлена в разметку кодом, файл менять не нужно — задайте цвет родителю:
.icon { color: #fff; width: 24px; height: 24px; }
.icon svg { fill: currentColor; }
Линейные иконки используют stroke: currentColor, залитые — fill: currentColor; в скачанных с сайта SVG это уже прописано. Для состояния при наведении или тёмной темы достаточно переопределить color — так работают все иконки из подборки для сайта.
Популярные белые иконки
Чаще всего в белом цвете скачивают иконки для навигации и контактов: телефон, почта, адрес, поиск, меню, пользователь, корзина, стрелка, галочка, кнопка Play и скачать. Соцсети и мессенджеры — в категории «Соцсети», иконки состояний и уведомлений — в разделе «Интерфейс».
Категории
- Интерфейс 84
- Стрелки 50
- Социальные сети 43
- Бизнес и финансы 41
- Еда и напитки 30
- Транспорт 48
- Погода 33
- Медицина 48
- Образование 50
- Спорт 48
- Музыка и медиа 46
- Устройства и техника 45
- Файлы и документы 44
- Безопасность 36
- Связь и почта 43
- Путешествия 48
- Дом и быт 48
- Природа и животные 48
- Покупки 31
- Люди и аватары 28
- Время и календарь 22
- Карты и локации 27
- Наука 40
- Праздники 43
Популярные наборы
Все наборы →
Частые вопросы
- Почему белая иконка не видна после скачивания?
- Она на месте: фон файла прозрачный, а просмотрщик показывает его на белом. Положите картинку на тёмную подложку — в редакторе, на слайде или в интерфейсе — и иконка появится. На странице иконки есть переключатель тёмного превью, чтобы проверить результат заранее.
- Можно ли сделать белыми цветные и 3D-иконки?
- Плоские цветные SVG перекрашиваются в инструменте «Перекраска SVG»: каждому цвету назначается свой, в том числе белый. 3D-иконки — растровые рендеры с тенями и бликами, их в один цвет не перевести; для тёмного фона возьмите линейную или залитую версию того же предмета.
- Как вставить белую иконку в презентацию с тёмным фоном?
- Скачайте PNG 256 или 512 px в белом цвете и вставьте через «Вставка → Рисунки» — прозрачность сохранится. Если иконка уже на слайде чёрная, в PowerPoint откройте «Формат рисунка → Цвет → Перекрасить» и выберите светлый вариант.
- Есть ли белые иконки в формате SVG?
- Да. У каждой монохромной иконки SVG задан через currentColor: на сайте цвет наследуется от CSS, а при скачивании со страницы с выбранным белым цветом файл сохраняется уже с белой заливкой или обводкой. Такой SVG можно вставлять в баннеры, письма и видеоредакторы.