300 иконок · 20 категорий

Категории анимированных иконок

Каждая иконка useAnimations относится к одной категории — от стрелок навигации и кнопок медиаплеера до лоадеров и логотипов соцсетей. Откройте категорию, чтобы увидеть все её иконки, где их использовать и код для подключения, или выберите иконки по взаимодействию.

Предупреждения5 иконокТреугольники с восклицательным знаком, круги с предупреждением и знаки «стоп», которые пульсируют ровно настолько, чтобы их заметили, но не мигают. Ставьте их рядом с полем формы, где произошла ошибка, в начале баннера об ошибке или в колонке статуса — там, где статичную иконку легко пропустить при прокрутке.
Уведомления4 иконкиКолокольчики, которые звенят при новой активности или переключаются между «колокольчиком» и «перечёркнутым колокольчиком». Короткое покачивание привлекает внимание к счётчику непрочитанного, а версии-переключатели заодно служат кнопкой, отключающей уведомления канала или ветки.
Навигация34 иконкиБургер-меню, которое превращается в кнопку закрытия, стрелки, шевроны и угловые стрелки, которые при наведении слегка сдвигаются в свою сторону. С ними сразу понятно, куда ведёт элемент управления: открыть боковую панель, вернуться назад, развернуть строку или уйти на другой сайт.
Действия64 иконкиГлаголы интерфейса: сохранить, удалить, скачать, обновить, лайкнуть, добавить в закладки, найти, открыть настройки. Каждая иконка подтверждает клик или наведение, к которому относится: сердечко заполняется, когда вы лайкаете пост, а крышка корзины приподнимается перед удалением.
Контент22 иконкиФайлы, папки, книги, почта, вложения и люди. Эти иконки обозначают то, с чем работает пользователь, а варианты с добавлением, удалением и галочкой делают управление списками и командой отзывчивее.
Формы3 иконкиЧекбокс, радиокнопка и переключатель, которые анимируют переход между отмеченным и неотмеченным состоянием. Используйте их там, где обычный input выглядит плоско, например в чек-листах онбординга и на экранах настроек: состояние при этом по-прежнему считывается с первого взгляда.
Медиа28 иконокВоспроизведение и пауза, громкость, микрофон, камера, перемотка и перемешивание для аудио- и видеоплееров. Иконки-переключатели меняют одно состояние на другое — play на паузу, микрофон на выключенный, — поэтому кнопка всегда показывает, что произойдёт по клику.
Редактирование текста10 иконокЖирный, курсив, подчёркивание, выравнивание и списки для панелей форматирования. Короткая анимация по клику подтверждает, что форматирование применилось, — это помогает в редакторах, где само изменение текста едва заметно.
Связь и общение13 иконокТелефоны, облачка чата, кнопки отправки, голосовая почта и RSS. Иконки звонков покрывают все состояния, которые нужны журналу вызовов: входящий, исходящий, пропущенный и переадресованный, а иконка отправки по клику красиво провожает сообщение.
Устройства12 иконокТелефоны, планшеты, мониторы, часы и принтеры, а также индикаторы подключения рядом с ними: Wi-Fi, Bluetooth и батарея. Подходят для выбора устройства, переключателей адаптивного превью и статуса подключения.
Погода16 иконокСолнце, луна, облака, дождь, снег, молния и ветер для прогнозов и всего, что зависит от времени суток. Солнце и луна к тому же естественно смотрятся в переключателе светлой и тёмной темы.
Карты и геолокация9 иконокМетки на карте, стрелки навигации, глобусы, мишени и якоря. Метка, которая опускается при наведении, выделяет поиск магазинов или адрес доставки, а глобус подходит для переключателя языка или региона.
Интернет-магазин11 иконокТележки, сумки, ценники, подарки, банковские карты и грузовики доставки для интернет-магазинов. Анимация добавления в корзину подтверждает клик без всплывающего уведомления, а грузовик и коробка немного оживляют статус заказа.
Графики5 иконокСтолбчатые диаграммы, круговая диаграмма и стрелки тренда для аналитики и отчётов. Иконки роста и падения сразу показывают, вырос показатель или упал, поэтому хорошо подходят для KPI-карточек и сводок изменений в цифрах.
Разработка9 иконокСкобки кода, терминал, ветки Git, коммиты, слияния и пул-реквесты, а также серверы и базы данных. Сделаны для инструментов разработчика, сайтов документации и статус-страниц, где термины Git и инфраструктуры — часть интерфейса.
Дизайн и макеты10 иконокСетки, колонки, слои, кадрирование, перо и курсор для редакторов и конструкторов. Подходят для панелей инструментов, где пользователь расставляет контент, переключается между сеткой и таблицей или выбирает инструмент рисования.
Фигуры и математика8 иконокКруги, квадраты, треугольники, шестиугольники, восьмиугольник и знаки деления. Используйте их как инструменты фигур в редакторах рисования, как операторы калькулятора или как нейтральные маркеры в схемах и шагах онбординга.
Загрузка5 иконокСпиннеры и лоадеры, которые крутятся, пока что-то выполняется. Поставьте такой в кнопку отправки на время запроса, на место ещё не загруженного контента или на полноэкранную заставку; если пользователь включил уменьшение движения, они остаются неподвижными.
Соцсети22 иконкиЛоготипы соцсетей и сервисов, где разработчики и дизайнеры делятся работами: X, Instagram, YouTube, Discord, Telegram, Figma и другие. Они анимируются при наведении, и ссылки в футере и профиле сразу выглядят кликабельными.
Другое10 иконокИконки, которые не входят в более крупные группы: смайлики для отзывов, чашка кофе, часы, линия пульса и подсказка «листайте вниз». Иконка прокрутки вниз — привычная подсказка в hero-блоке, что ниже есть ещё контент.