Двухцветные иконки — скачать SVG и PNG бесплатно

Управляется всё одним цветом: выбрали оттенок из палитры или HEX — и контур, и заливка перекрасились вместе. Иконки подходят для дашбордов, лендингов, онбординга и пустых состояний; форматы — SVG, PNG, WebP и ICO.

Что такое двухцветные иконки

Duotone — линейная иконка с дополнительным слоем. Основной слой — обводка 1,5 px на сетке 24×24, как у контурного стиля. Под ней лежит заливка того же цвета с прозрачностью 35%: она закрашивает главное тело предмета — корпус дома, лист документа, облачко чата. Других цветов и уровней прозрачности нет, поэтому иконка остаётся монохромной и управляется одним значением currentColor.

Двухцветные иконки строятся из линейных исходников автоматически: второй слой достаётся замкнутым контурам основного тела, мелкие детали остаются линиями. Полный комплект для интерфейса — набор «Интерфейс UI Duotone», его контурный первоисточник — базовый «Интерфейс UI». Так же из линейных исходников построены тематические двухцветные наборы: транспорт, медицина, образование, дом и быт, путешествия, природа и животные, наука, праздники, спорт и соцсети.

Когда выбирать duotone

Второй тон делает иконку заметнее, но не утяжеляет её, как сплошная заливка. Это удобно там, где иконка — смысловой акцент, а не служебный значок:

• карточки разделов в дашборде и админке;
• списки функций и преимуществ на лендинге;
• онбординг и пустые состояния — «Нет сообщений», «Корзина пуста»;
• разделы настроек и справочного центра.

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

Двухцветный стиль рядом с линейным и цветным

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

Где использовать двухцветные иконки

Практические советы

• Размер. В 16 px полупрозрачный слой почти не виден, а с 24 px duotone раскрывается полностью. Для мелких мест берите линейную версию той же иконки.
• Цвет и фон. Лучше всего работают насыщенные цвета средней яркости — синий, фиолетовый, зелёный. Светло-жёлтый или светло-серый на белом превращает второй тон в едва заметное пятно.
• Тонкая настройка. Хотите второй тон плотнее или прозрачнее — откройте файл в редакторе SVG-кода и поменяйте opacity у группы с заливкой: превью обновится сразу.
• Доступность. Смысл передаёт контур, поэтому проверяйте контраст линии, а не заливки. Иконке без подписи нужен aria-label.
• Оптимизация. SVG из каталога уже очищен от лишнего кода. Если вы его правили, перед публикацией прогоните файл через оптимизатор SVG.