Use an icon - Hugeicons Animated

Basic use#

Import the installed component and render it in your React code.

import { Notification03Icon } from '@/components/ui/notification-03';export function NotificationsButton() {  return (    <button type="button">      <Notification03Icon size={28} aria-hidden />      Notifications    </button>  );}

The icon starts its animation when the pointer enters its wrapper. Finite gestures finish their current animation when the pointer leaves. Looping gestures stop and return to rest.

Choose an interaction#

Render the icon without a ref. The component handles pointer entry and exit.

<Notification03Icon size={28} />

Pass a ref when another element must start or stop the animation.

'use client';import { useRef } from 'react';import {  Notification03Icon,  type Notification03IconHandle,} from '@/components/ui/notification-03';export function NotificationsButton() {  const iconRef = useRef<Notification03IconHandle>(null);  return (    <button      onPointerEnter={() => iconRef.current?.startAnimation()}      onFocus={() => iconRef.current?.startAnimation()}    >      <Notification03Icon ref={iconRef} aria-hidden />      Notifications    </button>  );}

Style the wrapper#

Each icon accepts standard div attributes. className, event handlers, and accessibility attributes apply to the wrapper.

<Notification03Icon  size={24}  className="text-slate-700 transition-colors hover:text-slate-950"  role="img"  aria-label="New notifications"/>

Tip

The SVG uses currentColor, so the icon follows the text color on its wrapper.