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

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

Анимированные иконки элементов форм

Чекбокс, радиокнопка и переключатель, которые анимируют переход между отмеченным и неотмеченным состоянием. Используйте их там, где обычный input выглядит плоско, например в чек-листах онбординга и на экранах настроек: состояние при этом по-прежнему считывается с первого взгляда.

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

Все иконки категории «Формы»

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

  • Переключатели функций и параметров в настройках
  • Чек-листы онбординга и списки задач
  • Выбор одного варианта в опросах и при выборе тарифа
  • Чекбоксы согласия с условиями

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

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

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/check-box.json
import { AnimatedCheckBox } from '@/components/animations/check-box';

<AnimatedCheckBox size={24} />

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

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

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

3 иконки: Checkbox, Radio button и Toggle. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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