Стили иконок для сайта: как выбрать единый набор
Обновлено .
Для навигации начните с одного семейства простых иконок. Выбор между контуром, заливкой и объёмной иллюстрацией зависит от размера, фона и задачи элемента. Сам по себе модный стиль не делает символ понятным. Проверьте его рядом с подписью в реальном интерфейсе.
Как сравнивать стили
| Стиль | Где попробовать | Что проверить |
|---|---|---|
| Контурный | Панель инструментов, вторичная навигация | Не исчезают ли тонкие линии при размере 16–20 px |
| С заливкой | Небольшие символы, выбранный пункт | Не сливаются ли внутренние просветы |
| Двухцветный | Категории, поясняющие карточки | Понятен ли смысл без различения цветов |
| Объёмный, скевоморфный | Крупная иллюстрация раздела | Сохраняется ли узнаваемый силуэт при уменьшении |
Это рабочая схема выбора, а не рейтинг популярности. Для кнопки поиска полезнее сравнить две лупы в нужном размере, чем ориентироваться на год в подборке.
Соберите маленькую спецификацию набора
- Возьмите пять действий вашего сайта: поиск, назад, закрыть, скачать, настройки.
- Зафиксируйте одну исходную сетку, например 24 × 24, толщину линии 2 единицы и одинаковые окончания штрихов.
- Поставьте символы рядом при 16, 24 и 32 px. Оцените оптический вес: одинаковые размеры рамки ещё не означают одинаковую видимую площадь.
- Проверьте светлый и тёмный фон, подпись и состояние клавиатурного фокуса.
- Запишите исключения: логотипы и иллюстрации не обязаны копировать навигационный набор.
Один цвет через currentColor
Ниже лупа наследует цвет текста контейнера. Это собственный учебный рисунок, его можно изменять. Уберите цвет из отдельных путей, если хотите управлять всем символом через CSS.
<span style="color:#2457a7"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></svg> Поиск</span>Внешний вид примера: Поиск.
Когда нужен текст
Набор должен соответствовать роли элементов и общей типографике. Но узнаваемость нельзя гарантировать одним рисунком. Для редкого действия оставьте видимую подпись; для кнопки только с символом предусмотрите доступное имя. Не обозначайте ошибку исключительно красным цветом: добавьте текст причины.
Перед выпуском покажите макет человеку, который не знает интерфейс, и попросите назвать действие. Это предлагаемый способ проверки, а не проведённое нами пользовательское исследование.
Источники и проверка
По теме: Иконочный шрифт или SVG: выбор и пример внедрения · Доступные иконки: имя действия, декоративный SVG и проверка · Адаптивные SVG-иконки: viewBox, размеры и область нажатия.