Accessibility - Hugeicons Animated

Hugeicons Animated respects the device's reduced-motion setting. The shared animation helper does not start motion when prefers-reduced-motion is enabled.

Check

Reduced-motion support is automatic for every installed icon.

Give the icon a purpose#

Use an accessible label when an icon carries meaning by itself.

<Notification03Icon role="img" aria-label="Notifications" />

Hide the icon from assistive technology when visible text already gives the control its name.

<button type="button">  <Notification03Icon aria-hidden />  Notifications</button>

Do not use motion as the only signal#

Keep a text, color, or shape change when animation communicates a state. A success icon can animate, but the interface must also show a clear success label.

Support keyboard interaction#

Automatic icons respond to pointer hover. If you control an icon from a parent element, run the same animation on focus.

<button  type="button"  onPointerEnter={() => iconRef.current?.startAnimation()}  onFocus={() => iconRef.current?.startAnimation()}>  <Notification03Icon ref={iconRef} aria-hidden />  Notifications</button>

Should a decorative icon have a label?

No. Use aria-hidden when nearby text already explains the control or content.

Does reduced motion remove the icon?

No. The original static Hugeicon remains visible. Only the animation is skipped.