Анимированные иконки

В разделе Иконки собраны анимированные иконки для React. Каждая — отдельный компонент на motion/react: в покое это обычная SVG-иконка, при наведении она оживает. Половина каталога бесплатна, остальное открывается с подпиской Pro.

Как найти

• Поиск ищет по имени и ключевым словам: arrow, heart, bell.
• Категории — стрелки, интерфейс, общение, медиа, файлы и так далее.
• Free / Pro — переключатель над категориями.

Фильтры попадают в адрес страницы (?q=, ?cat=, ?tier=), так что ссылкой на подборку можно поделиться.

Как поставить бесплатную иконку

Наведите курсор на карточку — снизу появятся три кнопки:

• Скопировать код — исходник компонента целиком;
• Команда установки — команда shadcn;
• Открыть в v0.

Команда выглядит так:

npx shadcn@latest add https://astra-ui.com/r/icons/heart.json

Файл ляжет в components/icons/heart.tsx, а shadcn доставит зависимость motion. Компоненту нужен помощник cn из @/lib/utils — он есть в любом проекте, где уже запускали shadcn init.

import { HeartIcon } from "@/components/icons/heart";

export function Like() {
  return <HeartIcon size={24} />;
}

Иконка анимируется сама при наведении. Чтобы управлять анимацией из родителя, передайте ref и вызывайте startAnimation() и stopAnimation().

Список всех иконок в формате реестра shadcn лежит по адресу https://astra-ui.com/r/icons/index.json.

Pro-иконки

Pro-иконки помечены значком PRO. Их исходники не публикуются в открытом реестре — код и команда установки доступны после оформления подписки.

Лицензии

Иконки основаны на проектах lucide-animated (pqoqubbw) и icons-animated (LN), геометрия — Lucide, Hugeicons, Tabler, Phosphor и Heroicons. Все они под лицензией MIT (Lucide — ISC). Полный текст уведомлений: /r/icons/LICENSE.txt.