Interactive Editor

Icon Playground

Customize any icon with live preview. Adjust size, stroke, animation type, and trigger mode. Copy the generated code or download the SVG file.

Preview
Heartsocial
64px / 2px stroke
Customization
64px
16px128px
2
0.54

Animate when mouse hovers over the icon

Generated Code
import { Heart } from 'lively-icons'

<Heart
  size={64}
  strokeWidth={2}
  lively="scale"
  trigger="hover"
/>

Tips for using icons

Performance

Use trigger="hover" for interactive icons. Avoid too many trigger="loop" animations on one page.

Accessibility

Add aria-label for meaningful icons. Decorative icons are automatically hidden from screen readers.

Styling

Icons inherit text color by default. Use className or style props to customize colors.

Motion Control

Use IconProvider to globally control animations. Individual icons can override with the animated prop.