·Icon Animator

Icon Animator

A small workshop for moving icons.

Pick a preset, tune the timing, paste your own SVG. Copy the CSS or React snippet when it feels right.

Icon Animator

Pick an icon

Twenty Feather-style essentials, or bring your own SVG.

Refine

Tune the motion, the look, and the timing until it feels right.

Transform origin
Center
Animation
Duration1.20s
Delay0.00s
Repeat
Easing
Distance16px
Appearance
Stroke colour
Stroke width1.5
Icon size64px
Background

Copy the code

Grab the CSS or React snippet and drop it into your project.

@keyframes ia-bounce {
  0%,
  100% {
  transform:translateY(0)
}50% {
  transform:translateY(-16.0px)
}
}

.icon {
  color: #111111;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  animation: ia-bounce 1.2s ease-in-out infinite;
}
Plain CSS — drop into any stylesheet.