SVG to Font

Icon Font Generator

v1.0.0 • Made with ❤️ by Miftakhul Rizky

Icon Animations

Comprehensive animation library for icon fonts

Animation Playground

Test and preview icon animations with different configurations

Import icons to preview animations

Using Lucide icon as demo

Generated CSS Classes:

icon-home icon-animated icon-spin

React Usage:

<AnimatedIcon
  name="home"
  animation="spin"
  animationSpeed="normal"
  animationTrigger="immediate"
  size={48}
  className="text-blue-500"
/>

CSS Usage:

<i class="icon-home icon-spin"></i>

Animation Showcase

Preview all available animations

Animation Documentation

CSS Classes

  • .icon-animated - Base animation class
  • .icon-[animation] - Specific animation
  • .icon-slow/.icon-fast - Speed modifiers
  • .icon-delay-[1-5] - Delay modifiers
  • .icon-infinite - Infinite repeat
  • .icon-paused - Pause animation

React Props

  • animation - Animation type
  • animationSpeed - slow | normal | fast
  • animationTrigger - immediate | hover | click
  • animationDelay - 1-5
  • animationRepeat - infinite | 2 | 3
  • animationPaused - boolean