Sora UI

Get Started

Get started with Sora UI Icons.

Our animated icons come from Reicon — Lucide Icons animated with Motion.

Note: The animated icons are in beta. You may encounter bugs. Recurring changes will take place, and some props may be added or removed. We recommend that you update the wrapper regularly.

Installation

Icon Wrapper

You need to install the icon wrapper component to use the animated icons.

File Structure

icon.tsx
slot.tsx
use-is-in-view.tsx

Icons

Basic Usage

Icon

<Chevrons animateOnHover />

Icon with AnimateIcon wrapper

<AnimateIcon animateOnHover>
  <Chevrons />
</AnimateIcon>

API Reference

Icon

PropTypeDefault
size?
number | string
24
color?
string
currentColor
className?
string
-
...props?
SVGMotionProps<SVGSVGElement>
-

AnimateIcon

PropTypeDefault
children
React.ReactNode
-
asChild?
boolean
false
...props?
HTMLMotionProps<"span">
-

Common Props

PropTypeDefault
animate?
boolean | string
false
animateOnHover?
boolean | string
false
animateOnTap?
boolean | string
false
animateOnView?
boolean | string
false
animateOnViewMargin?
string
0px
animateOnViewOnce?
boolean
true
initialOnAnimateEnd?
boolean
false
persistOnAnimateEnd?
boolean
false
completeOnStop?
boolean
false
delay?
number
0
animation?
StaticAnimations | string
default
loop?
boolean
false
loopDelay?
number
0

Credits

Our animated icons are sourced from Reicon, built with the Lucide Icons library and animated with Motion.

We took our inspiration from:

See also

  • Animating Icons — bonus agent skill for authoring custom icon gestures (outside this catalog)

Built by Axyl. A motion-first component registry for React.

Last updated: 8/1/2026