Installation - Hugeicons Animated

Each icon installs as source code. You can inspect it, edit it, and keep it with the rest of your components.

Choose an icon

Find an animation in the icon gallery. The gallery gives you the install command for each icon.

Run the install command

Run the command from the root of your React project.

npx shadcn@latest add @hugeicons-animated/notification-03

The CLI adds the icon, the shared animation helper, and Motion when your project does not have it.

Import the component

Import the generated file from your local component directory.

import { Notification03Icon } from '@/components/ui/notification-03';

Render the icon

Set its size and let it inherit the current text color.

<Notification03Icon size={28} className="text-emerald-700" />

Note

The exact import path follows your shadcn component aliases. The default path is @/components/ui.

What the command adds#

components/└── ui/    └── notification-03.tsxlib/└── use-icon-animation.ts

The icon component is yours after installation. There is no runtime dependency on the Hugeicons Animated site.