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

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

Анимированные иконки для разработчиков

Скобки кода, терминал, ветки Git, коммиты, слияния и пул-реквесты, а также серверы и базы данных. Сделаны для инструментов разработчика, сайтов документации и статус-страниц, где термины Git и инфраструктуры — часть интерфейса.

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

Все иконки категории «Разработка»

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

  • Статус пул-реквестов, слияний и веток в инструментах разработчика
  • Кнопки сниппетов кода и встраивания в документации
  • Разделы про терминал и CLI на лендингах
  • Состояние серверов и баз данных на статус-страницах
  • Подсказки горячих клавиш с клавишей Command

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

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

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

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

    Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

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

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/git-branch.json
import { AnimatedGitBranch } from '@/components/animations/git-branch';

<AnimatedGitBranch size={24} />

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

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

Какие анимированные иконки для разработчиков есть в наборе?

9 иконок: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server и Terminal. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

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

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

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

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