Иконки с заливкой — скачать SVG и PNG бесплатно
Иконки с заливкой — цельные силуэты без обводок: предмет залит одним цветом, а детали показаны прорезями, сквозь которые виден фон.
Залитый стиль (solid, glyph) читается даже в 16 px, поэтому его выбирают для нижней навигации приложений, кнопок, активных состояний и значков на цветных плашках. Иконки монохромные: оттенок меняется прямо на странице, форматы — SVG, PNG от 16 до 512 px, WebP и ICO.
Что такое иконки с заливкой
Залитая иконка — сплошной силуэт предмета одним цветом, без единой обводки. Внутренние детали — проём двери у домика, стрелки часов, замочная скважина — сделаны вырезами шириной 1,5–2 px, поэтому сквозь них просвечивает фон, а не белая заплатка. Сетка та же, что у линейного стиля, — 24×24, а внешний край силуэта совпадает с внешним краем контурной версии: два варианта одного предмета меняются местами без сдвига.
Цвет задан через currentColor: SVG подхватывает цвет текста, а на странице иконки его можно сменить в палитре.
Когда выбирать залитый стиль
Solid-иконки заметнее контурных: при том же размере в них больше «краски», и глаз находит их быстрее. Они хороши там, где иконка должна читаться в мелком размере или на сложном фоне:
- нижняя панель навигации мобильного приложения;
- кнопки с короткими действиями — «Поделиться», «Скачать», «Удалить»;
- значки на цветных плашках, баннерах и фотографиях;
- активные состояния: выбранный пункт меню, отмеченное «избранное».
Под такие задачи обычно подбирают кнопки и значки интерфейса, управление плеером, иконки звонков и сообщений и обобщённые пиктограммы соцсетей — лайк, репост, подписчики.
Залитые или линейные: как выбрать
Главное отличие — визуальный вес. Контурная иконка лёгкая и нейтральная, залитая — плотная и акцентная. Удачный приём — совмещать: в обычном состоянии показывать линейную версию, в активном — залитую. Пользователь сразу видит, где находится. А вот в одном ряду равноправных кнопок два стиля смешивать не стоит — ряд начинает рябить.
Залитые иконки для интерфейса собраны в наборе «Интерфейс UI Solid», те же предметы в контуре — в линейном «Интерфейсе UI». Промежуточный вариант — «Интерфейс UI Duotone» с полупрозрачной заливкой под контуром.
Где использовать иконки с заливкой
| Сценарий | Размер | Чем хорош залитый стиль |
|---|---|---|
| Нижняя навигация приложения | 24 px | Силуэт узнаётся с одного взгляда |
| Активные вкладки и кнопки | 20–24 px | Контраст с контурной версией показывает выбор |
| Значки на цветном фоне и фото | 24–48 px | Плотная форма не теряется на пёстрой подложке |
| Favicon, статусы, метки на карте | 16–32 px | Детали не сливаются даже в самом маленьком размере |
Практические советы
- Мелкие размеры. Перемычки не тоньше 1,5 px на сетке 24, так что в 16 px силуэт не рассыпается. Для favicon скачайте ICO со страницы иконки или соберите комплект в генераторе favicon.
- Один цвет. Для акцента меняйте цвет всей иконки или подложки, а не отдельных деталей: вырезы уже задают ритм рисунка.
- Доступность. Значимой иконке нужен контраст с фоном от 3:1. Выбранное состояние передавайте не только заливкой, но и атрибутом
aria-pressedилиaria-current— скринридер разницы стилей не увидит. - Нестандартные размеры. Если платформе нужен PNG в 20 или 40 px, подгоните файл в инструменте изменения размера.
Категории
Популярные наборы
Все наборы →
Частые вопросы
- Solid, glyph и залитые иконки — в чём разница?
- Разницы нет: это названия одного стиля, где предмет изображён сплошным силуэтом. В каталоге такие иконки отмечены стилем «С заливкой».
- Когда лучше залитая иконка, а когда линейная?
- Залитая заметнее и лучше читается в мелком размере — она подходит для активных состояний, кнопок и тёмных или цветных фонов. Линейная легче и уместнее в спокойных интерфейсах с большим количеством текста.
- Почему детали залитой иконки прозрачные, а не белые?
- Детали сделаны вырезами в силуэте, а не белыми фигурами поверх. Поэтому иконка правильно выглядит на любом фоне: на тёмной подложке прорези остаются тёмными и не превращаются в белые пятна.
- Подойдёт ли залитая иконка для favicon?
- Да, это один из лучших вариантов: плотный силуэт различим во вкладке браузера размером 16 px, тогда как тонкие линии в таком размере бледнеют.