Полезные пиктограммы для кнопок и действий на сайте
Многие современные шрифты уже содержат десятки полезных пиктограмм, которые можно использовать в кнопках, меню, таблицах и административных панелях без подключения дополнительных библиотек. Такие символы легко копируются, корректно отображаются на большинстве устройств и помогают сделать интерфейс более понятным.
Ниже приведён справочник наиболее популярных пиктограмм для веб-интерфейсов. Чтобы использовать значок, достаточно скопировать его из таблицы и вставить в HTML-код страницы или в текст кнопки.
Навигация
| Пиктограмма | Назначение |
|---|---|
| ← | Назад |
| → | Вперёд |
| ↑ | Наверх |
| ↓ | Вниз |
| ↩ | Вернуться |
| ⌂ | Главная страница |
| ☰ | Меню |
| 🔍 | Поиск |
Создание и редактирование
| Пиктограмма | Назначение |
|---|---|
| ＋ | Добавить |
| ✎ | Редактировать |
| 📄 | Документ |
| 📋 | Копировать |
| ✂ | Вырезать |
| 📌 | Закрепить |
| 📎 | Прикрепить файл |
| 🖉 | Изменить |
Сохранение и обмен данными
| Пиктограмма | Назначение |
|---|---|
| 💾 | Сохранить |
| 📥 | Импорт |
| 📤 | Экспорт |
| ⬇ | Скачать |
| ⬆ | Загрузить |
| 🔄 | Обновить |
| 🔃 | Синхронизировать |
| 🔗 | Ссылка |
Просмотр и отображение
| Пиктограмма | Назначение |
|---|---|
| 👁 | Просмотр |
| 👁🗨 | Предпросмотр |
| 🔎 | Увеличить |
| 🔍 | Поиск |
| ☷ | Список |
| ⊞ | Плитка |
| ⛶ | На весь экран |
| 🖼 | Галерея |
Подтверждение и статус
| Пиктограмма | Назначение |
|---|---|
| ✓ | ОК, подтверждение |
| ✔ | Выполнено |
| ☑ | Отмечено |
| ✕ | Отмена |
| ✖ | Ошибка |
| ⚠ | Предупреждение |
| ⛔ | Запрещено |
| ℹ | Информация |
Работа со временем
| Пиктограмма | Назначение |
|---|---|
| 🕒 | Отложить |
| ⏰ | Напоминание |
| 📅 | Календарь |
| ⌛ | Ожидание |
| ⏳ | Выполняется |
| 🗓 | Планирование |
Медиа и запуск процессов
| Пиктограмма | Назначение |
|---|---|
| ▶ | Запустить |
| ⏸ | Пауза |
| ⏹ | Остановить |
| ⏭ | Следующий |
| ⏮ | Предыдущий |
| 🔊 | Звук |
Управление объектами
| Пиктограмма | Назначение |
|---|---|
| 🗑 | Удалить |
| 📦 | Архивировать |
| 📂 | Открыть папку |
| 📁 | Категория |
| ⭐ | Избранное |
| 🏷 | Метка |
| 🔒 | Заблокировать |
| 🔓 | Разблокировать |
Статистика и аналитика
| Пиктограмма | Назначение |
|---|---|
| 📊 | Статистика |
| 📈 | Рост показателей |
| 📉 | Снижение показателей |
| 🧮 | Расчёты |
| 💹 | Финансовая аналитика |
Рекомендуемые пиктограммы для популярных кнопок
| Действие | Основная пиктограмма | Альтернативы |
|---|---|---|
| Архивировать | 📦 | 🗄 📁 |
| Отложить | 🕒 | ⏰ 📅 ⌛ |
| Удалить | 🗑 | ✖ ❌ |
| ОК | ✓ | ✔ ☑ |
| Отмена | ✕ | ✖ ↩ |
| Запустить | ▶ | ► ▷ |
| Просмотр статистики | 📊 | 📈 📉 💹 |
Для административных панелей и корпоративных систем рекомендуется использовать простые монохромные символы (✓ ✕ ▶ ⏸ ⚠), а для пользовательских интерфейсов допускается применение цветных эмодзи-пиктограмм (📊 📦 🗑 ⭐), которые легче воспринимаются визуально.
Дополнительные Unicode-пиктограммы для сайтов и веб-приложений
Помимо популярных эмодзи и стандартных значков существует множество символов Unicode, которые хорошо подходят для интерфейсов сайтов. Многие из них отображаются даже без подключения специальных шрифтовых библиотек и могут использоваться в кнопках, таблицах, меню и административных панелях.
Стрелки и навигация
| Символ | Назначение |
|---|---|
| ← | Назад |
| → | Далее |
| ↑ | Вверх |
| ↓ | Вниз |
| ↔ | Обмен, переключение |
| ↕ | Изменение порядка |
| ↩ | Отмена, возврат |
| ↪ | Переход, продолжение |
| ⇦ | Предыдущая страница |
| ⇨ | Следующая страница |
| ⇧ | Поднять вверх |
| ⇩ | Опустить вниз |
| ➜ | Переход по ссылке |
| ➤ | Открыть раздел |
| ➔ | Продолжить |
Галочки и подтверждение
| Символ | Назначение |
|---|---|
| ✓ | Подтверждено |
| ✔ | Выполнено |
| ☑ | Отмечено |
| ☒ | Снято или запрещено |
| ⊕ | Добавлено |
| ⊙ | Активный элемент |
Крестики и закрытие
| Символ | Назначение |
|---|---|
| ✕ | Закрыть |
| ✖ | Удалить |
| ✗ | Ошибка |
| ✘ | Критическая ошибка |
| ⊗ | Отмена действия |
Папки и документы
| Символ | Назначение |
|---|---|
| 🗂 | Коллекция документов |
| 📰 | Статья |
| 📑 | Закладки |
| 📒 | Записи |
| 📓 | Журнал |
| 📔 | Справочник |
| 📕 | Документация |
| 📖 | Чтение |
| 📝 | Заметка |
| 📜 | История изменений |
Списки и структура
| Символ | Назначение |
|---|---|
| ☰ | Меню |
| ≡ | Навигация |
| ⋮ | Дополнительные действия |
| ⋯ | Продолжение списка |
| ▤ | Таблица |
| ▦ | Сетка |
| ▣ | Плитки |
| ☷ | Каталог |
Выбор и отметки
| Символ | Назначение |
|---|---|
| ○ | Не выбрано |
| ● | Выбрано |
| ◉ | Активный пункт |
| ◌ | Пустое состояние |
| □ | Чекбокс |
| ■ | Отмеченный чекбокс |
| ◇ | Неактивный элемент |
| ◆ | Активный элемент |
Сортировка и древовидные структуры
| Символ | Назначение |
|---|---|
| ▸ | Свернутый узел |
| ▾ | Развернутый узел |
| ► | Открыть подраздел |
| ▼ | Закрыть подраздел |
| △ | Сортировка вверх |
| ▽ | Сортировка вниз |
| ⇅ | Сортировка |
Математические и служебные символы
| Символ | Назначение |
|---|---|
| ∞ | Без ограничений |
| ± | Допустимое отклонение |
| ≈ | Примерное значение |
| ≠ | Различие |
| ∑ | Сводные данные |
| ∫ | Расчёты |
| ∎ | Завершение |
| § | Правила и условия |
Редкие, но полезные символы для интерфейсов
| Символ | Назначение |
|---|---|
| ⚑ | Пометить |
| ⚐ | Снять отметку |
| ⌂ | Домашняя страница |
| ⌕ | Поиск |
| ⌘ | Горячие клавиши |
| ⌛ | Ожидание |
| ⌚ | Время |
| ☍ | Сравнение объектов |
| ☞ | Обратить внимание |
| ☛ | Переход к действию |
Многие из этих символов появились ещё до эпохи эмодзи и поэтому часто выглядят одинаково на разных операционных системах. Это делает их хорошим выбором для административных интерфейсов, таблиц, списков и профессиональных веб-приложений.