Иконки интерфейса — скачать PNG и SVG бесплатно
Базовый словарь любого экрана: домик главной страницы, лупа поиска, шестерёнка настроек, гамбургер-меню, крестик закрытия, плюс, фильтры и значки состояний.
Об иконках интерфейса
Иконки интерфейса собраны в пяти стилях — линейном, залитом, двухцветном, 3D и пиксельном. Линейная, залитая и двухцветная версии построены на одной сетке 24×24, поэтому их легко сочетать в одном продукте — от админки до мобильного приложения.
Система, а не россыпь картинок
Иконки интерфейса выглядят аккуратно, когда говорят одним голосом: одинаковая толщина линии, одинаковые скругления, общий оптический размер. В наборе «Интерфейс UI» это заложено в сами исходники — обводка 1,5 px со скруглёнными концами, сетка 24×24 и поле 2 px по краям. Добавляете иконку со стороны — проверьте её рядом с соседями в 16 px: разница в весе линии сразу бросится в глаза.
Линия для покоя, заливка для выбора
Удобный приём для нижней навигации и вкладок: неактивный пункт — линейная иконка, активный — залитая. Силуэты в наборе «Интерфейс UI Solid» совпадают с линейными по внешнему краю, поэтому домик главной или закладка при переключении не «прыгают». Двухцветные иконки с полупрозрачной подложкой подойдут для пустых состояний и онбординга, где нужен мягкий акцент.
Размеры и зона нажатия
Иконки интерфейса обычно живут в трёх размерах:
- 16 px — рядом с текстом, в таблицах и полях ввода.
- 20–24 px — кнопки, пункты меню, панели инструментов.
- 32–48 px — пустые состояния, карточки настроек, подсказки.
Сама иконка может быть маленькой, но область нажатия на сенсорном экране лучше делать не меньше 44×44 px — особенно у крестика закрытия и кнопки «Ещё».
Кнопка без подписи тоже должна говорить
Такие иконки интерфейса, как лупа поиска, шестерёнка настроек и гамбургер-меню, узнают почти все, но скринридер картинку не «видит». Кнопкам без текста нужен aria-label, а иконки рядом с подписью лучше скрыть от вспомогательных технологий через aria-hidden. Для значимой графики WCAG 2.1 требует контраст с фоном не ниже 3:1.
Когда нужен объём
Для лендинга, приветственного экрана или презентации продукта плоской линии бывает мало. Набор «Интерфейс 3D» повторяет ключевые интерфейсные иконки в объёме — картинки 256, 512 и 1024 px с прозрачностью подходят и для экрана, и для слайда, а пиксельные версии уместны в игровых и ностальгических проектах.
Наборы по теме
Все наборы →
Частые вопросы
- Можно ли сочетать линейные и залитые иконки интерфейса на одном экране?
- Да, если они из одной системы. Залитые версии повторяют силуэты линейных на той же сетке 24×24, поэтому их удобно использовать для двух состояний: линия — неактивный пункт, заливка — выбранный.
- Какой размер иконок выбрать для кнопок и меню?
- Для кнопок и пунктов меню обычно берут 20–24 px, для строк таблиц и полей ввода — 16 px. Область нажатия на сенсорных экранах делайте не меньше 44×44 px, даже если сама иконка меньше.
- Как вставить иконку интерфейса в React-проект?
- На странице иконки можно скопировать готовый React-компонент или SVG-код. Монохромные иконки используют currentColor, поэтому цвет наследуется от текста кнопки или ссылки.