Справочник иконок интерфейса

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику

В интерфейсах одни и те же действия часто обозначают похожими картинками: шестерёнка — настройки, конверт — почта, булавка — геолокация. Универсального стандарта «одна иконка на всё» нет: Windows, macOS, Android и веб-приложения расходятся в деталях, но общие метафоры повторяются.

См. также: Визуальные элементы (роль иконок в дизайне), Функциональные элементы, Навигационные элементы.

Галерея

163 иконок

Масштаб и поиск

Увеличение (зум)
zoom-in · ZoomInAreaIcon, SearchAddIcon
Уменьшение (зум)
zoom-out · ZoomOutAreaIcon, SearchMinusIcon
Поиск
search

Код и разработка

Git-ветвление
git-branch
Исходный код
source-code
Фигурные скобки
brackets
Баг
bug

Платформы и сервисы

Википедия
wikipedia
Windows
windows
Java
java
Spotify
spotify
Администрирование Windows
microsoft-admin

Работа и карьера

Карьера и работа
work

Сеть и связь

Wi‑Fi
wifi
Уровень сигнала
signal
SIM-карта
sim

Сообщения и мессенджеры

WhatsApp
whatsapp
Telegram
telegram
WeChat
wechat
Сообщение
message · Message01Icon, Message02Icon
Чат и переписка
chat · MessageMultiple01Icon, MessageMultiple02Icon

Финансы

Кошелёк
wallet
Биткоин
bitcoin
Донаты и пожертвования
donate

Медиа и устройства

VR-очки
vr
Видео и веб-камера
video
Музыка
music

Звук

Громкость: увеличение
volume-high
Громкость: уменьшение
volume-low
Без звука (mute)
volume-mute · VolumeMute02Icon, VolumeOffIcon
Микрофон и запись
mic
Микрофон выключен
mic-off

Пользователи и статусы

Статус пользователя (онлайн/оффлайн)
user-status
Пользователь
user
Группа пользователей
user-group
Несколько пользователей
user-multi
Редактирование пользователей
user-edit
Паспорт и профиль
passport
Просмотр и чтение
view

Файлы и передача данных

Загрузка на сервер
upload
Скачивание с сервера
download · Download01Icon, Download02Icon
Распаковка архива
unarchive
Обмен данными
data-transfer
Пакет
package · PackageIcon, PackagingIcon

Ввод и редактирование

Ввод и переименование
type-cursor · TypeCursorIcon, InputLongTextIcon
Перевод
translate

Экраны и гаджеты

Телевизор
tv
Планшет
tablet
Смартфон
smartphone
Зарядка батареи
battery-charging
Пустая батарея
battery-empty

Доставка и транспорт

Доставка
delivery-truck · TruckDeliveryIcon, DeliveryTruck01Icon

Курсы и тренды

Рост
trade-up
Падение
trade-down

Касания и указатель

Мышь
mouse · Mouse01Icon, Mouse02Icon, Mouse08Icon
Тачпад
touchpad
Касание и нажатие
touch · Touch01Icon, TouchInteraction01Icon, Tap08Icon

Инструменты и настройки

Инструменты
tools
Настройки
settings
Сортировка
sort

ИИ и токены

Токены
token · TokenSquareIcon, SparklesIcon
Робот и бот
robot

Игры

Геймпад и консоль
gamepad
Крестики-нолики
tic-tac-toe

Реакции и статусы сообщений

Сообщение доставлено
tick-sent
Сообщение прочитано
tick-read
Лайк
thumbs-up
Дизлайк
thumbs-down
Избранное
star · StarIcon, FavouriteIcon
Достижение и награда
award · StarAward01Icon, Award01Icon

Задачи и цели

Прицел в играх
target-aim
Задачи
task
Цель и мишень
target

Заметки и метки

Тег и метка
tag
Заметка
sticky-note
Закрепление
pin
Закладка
bookmark

Система и погода

Недоступность
unavailable
Системное обновление
system-update
Погода
weather
Выключение
shutdown
Новые релизы
new-release

Обучение

Студент
student
Книга
book

Структура и магазин

Структура
structure
Магазин
store
Корзина покупок
shopping-cart
Шоппинг
shopping-bag

Воспроизведение

Стоп
stop
Воспроизведение
play · PlayIcon, PlayCircle02Icon
Пауза
pause · PauseIcon, PauseCircleIcon
Повтор
replay · ReplayIcon, RepeatIcon
Перемешивание
shuffle

Безопасность

Разблокировка
unlock
Блокировка
lock
Безопасность
shield · SecurityIcon, ShieldKeyIcon, ShieldUserIcon

Обмен

Поделиться
share · Share01Icon, Share04Icon

Сервер и проверка

Успешная проверка
validation
Сервер
server

Вырезание

Вырезать
scissors · ScissorIcon, ScissorRectangleIcon

Спутник и карты

RSS
rss
Спутник
satellite
Карты
maps · MapsIcon, MapsSquare01Icon

Поворот и обновление

Отмена действия
undo · UndoIcon, Undo03Icon
Поворот и ориентация
rotate · Rotate01Icon, RotateCropIcon
Обновление
refresh · RefreshIcon, Refresh01Icon

Ремонт и циклы

Починка и ремонт
repair
Переработка и цикл
recycle · Recycle02Icon, Recycle03Icon

Запись и опросы

Запись
record
Опрос и обратная связь
quiz

Производительность

Производительность
pulse

Печать и масштаб ±

Печать
printer
Масштаб ±
plus-minus · PlusMinus02Icon, PlusMinusSquare02Icon

Картинка в картинке

Увеличение экрана
expand-screen
Уменьшение экрана
shrink-screen
Картинка в картинке (вкл.)
pip-on
Картинка в картинке (выкл.)
pip-off

Рисование и заливка

Редактирование
pen · Pen01Icon, PencilEdit02Icon, Edit02Icon
Рисование
pencil-draw · PencilIcon, PenTool01Icon
Заливка
paint · PaintBoardIcon, PaintBucketIcon

Уведомления

Уведомления
notification
Уведомления выключены
notification-off · NotificationOff01Icon, NotificationBlock01Icon

Игровые консоли

Nintendo Switch
nintendo-switch

Почта

Почта
mail · Mail01Icon, MailAtSign01Icon
Почтовый ящик
mailbox
Символ @
at

Вход и выход

Выход
logout · Logout01Icon, LogoutSquare01Icon, LogoutSquare02Icon
Вход
login · Login01Icon, LoginSquare01Icon

Геолокация

Геолокация
location · Location01Icon, Location04Icon

Слои

Слои
layer · LayerIcon, LayerAddIcon

Справка и информация

Информация
info
Справка
help
Бесконечность
infinity

Изображения и идеи

Идея
idea
Изображение
image · Image01Icon, Image03Icon

Накопители

USB и флеш-накопитель
usb
Жёсткий диск
hard-drive

Интернет и подарки

Интернет и глобальность
global · GlobalIcon, Globe02Icon
Подарок
gift

Папки и файлы

Папка
folder · Folder01Icon, Folder02Icon
Файл
file · File02Icon, FileEmpty01Icon

Кино

Фильм и кино
film

Флаги и фильтры

Флаг
flag · Flag01Icon, Flag02Icon
Фильтр
filter

Биометрия

Отпечаток пальца
fingerprint · FingerPrintIcon, FingerAccessIcon

Обмен и скидки

Скидка
discount · DiscountIcon, Discount01Icon
Обмен
exchange

Курсор и комментарии

Комментарий
comment · Comment01Icon, Comment03Icon
Курсор
cursor · Cursor01Icon, Cursor02Icon

Облако и время

Облако
cloud
Время
clock

Галочки и проверки

Галочка и чекбокс
check · CheckmarkCircle01Icon, CheckmarkSquare01Icon

Звонки, камера, календарь

Камера и фото
camera
Календарь
calendar · Calendar02Icon, Calendar03Icon
Звонок
call

Прочее

Фотоальбом
album
Физика
physics
Калькулятор
calculator · CalculatorIcon, CalculateIcon
Режим полёта
airplane-mode

Ограничения и доступность

Контекст решает: одна иконка может значить разное (например, «звезда» — избранное или рейтинг).
Не полагайтесь только на картинку: для a11y нужны подпись, aria-label или видимый текст — см. Особенности и принципы UX и UI.
Бренды ≠ универсальные метафоры: и — узнаваемые логотипы, а — обобщённая метафора.

Технически SVG хранятся в it-encyclopedia-media (public/encyclopedia/_shared/img/ui-icons/, на проде — assets.spirzen.ru). Пересборка из Hugeicons: npm run docs:ui-icons в it-knowledge-base. В статьях MDX: import UiIcon from '@site/src/components/UiIcon' и <UiIcon id="location" />.

Дальше

Визуальные элементы — стиль, размер и цвет иконок.
Элементы обратной связи — уведомления, тултипы, ошибки.
Софт рядового пользователя — иконки в повседневных программах.

Галерея​