Перейти к содержимому
RU

34 иконки · лицензия MIT

Анимированные иконки навигации и стрелок

Бургер-меню, которое превращается в кнопку закрытия, стрелки, шевроны и угловые стрелки, которые при наведении слегка сдвигаются в свою сторону. С ними сразу понятно, куда ведёт элемент управления: открыть боковую панель, вернуться назад, развернуть строку или уйти на другой сайт.

Из 34 иконок 2 непрерывно проигрываются в цикле, 4 переключаются между двумя состояниями по клику, 6 проигрываются заново при каждом клике и 22 проигрываются один раз при наведении. Каждая доступна в виде React-компонента, компонента shadcn/ui, анимации Lottie JSON и статичных SVG. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.

Все иконки категории «Навигация»

Где их использовать

  • Бургер-меню, которое на мобильных превращается в кнопку закрытия
  • Кнопки «назад» и «вперёд» в каруселях и пагинации
  • Шевроны аккордеонов и выпадающих списков
  • Кнопки «наверх» и подсказки «листайте вниз»
  • Ссылки входа и выхода
  • Метки внешних ссылок и переключатели боковой панели

По взаимодействию

  • Иконки с циклической анимацией · 2

    Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. More Horizontal, More Vertical.

  • Иконки-переключатели с анимацией по клику · 4

    Переключается между двумя состояниями по клику, а при включённом уменьшении движения — сразу, без анимации. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Иконки с анимацией по клику · 6

    Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

  • Иконки с разовой анимацией при наведении · 22

    Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

Добавьте иконку в приложение

В React установите react-useanimations и импортируйте иконку: она сама проигрывает своё взаимодействие («Переключение по клику»). Все иконки этой категории подключаются так же — замените menu на имя со страницы нужной иконки.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

<UseAnimations animation={menu} size={32} />

С shadcn/ui готовый компонент добавляется через CLI:

npx shadcn@latest add https://useanimations.com/r/menu.json
import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu size={24} />

Не используете React? Каждая иконка — это файл Lottie JSON по адресу /icons/<id>.json; плееры для веба, iOS, Android и Flutter описаны на странице Lottie-иконки.

Частые вопросы

Какие анимированные иконки навигации и стрелок есть в наборе?

34 иконки: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down и ещё 22. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

Как использовать эти анимированные иконки навигации и стрелок в React?

Установите react-useanimations, добавьте import menu from 'react-useanimations/lib/menu' и отрендерите <UseAnimations animation={menu} size={32} />. Иконка проигрывает своё взаимодействие («Переключение по клику») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните npx shadcn@latest add https://useanimations.com/r/menu.json.

Можно ли использовать эти анимированные иконки навигации и стрелок без React?

Да. Каждая иконка — это файл Lottie JSON по адресу https://useanimations.com/icons/<id>.json (например, https://useanimations.com/icons/menu.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском). Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.