LivelyIcons

https://livelyicons.com/docs

Admin

LivelyIcons is a React icon library offering over 1,300 animated icons with customizable motion...

Tokens:488

Snippets:10

Trust Score:2.3

Update:1 month ago

Show doc for...

Tokens:

Raw

### Use lively-icons with lively and trigger props

Source: https://livelyicons.com

Import icons from 'lively-icons' and apply animation types via the lively prop and trigger modes via the trigger prop. The default trigger is hover; other modes include loop, mount, and inView. Available lively types are scale, rotate, translate, shake, pulse, bounce, draw, spin, ring, wiggle, heartbeat, swing, float, and none.

```tsx
import { Heart, Bell, Star } from 'lively-icons'

// 14 lively types × 4 trigger modes
<Heart lively="heartbeat" />
<Bell lively="ring" trigger="hover" />
<Star lively="wiggle" trigger="hover" />

// Trigger modes:
// hover (default), loop, mount, inView

// Lively types:
// scale, rotate, translate, shake, pulse
// bounce, draw, spin, ring, wiggle
// heartbeat, swing, float, none
```

Tokens:

Raw