keyframes icon

Keyframes: keyframes, animation timeline. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated keyframes-duplicate · line-round

The back key slides left along the track and hides behind the front one, leaving one key on a long track. It is then dragged back out as a copy, overshoots and settles at its place.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.3 s to 1.75 s. Examples and helper.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.5 10.793C5.224 10.793 4.988 10.695 4.793 10.5L2.5 8.207C2.435 8.142 2.381 8.073 2.338 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.338 7C2.381 6.927 2.435 6.858 2.5 6.793L4.793 4.5C4.988 4.305 5.224 4.207 5.5 4.207C5.776 4.207 6.012 4.305 6.207 4.5L8.5 6.793C8.695 6.988 8.793 7.224 8.793 7.5C8.793 7.776 8.695 8.012 8.5 8.207L6.207 10.5C6.012 10.695 5.776 10.793 5.5 10.793ZM8.914 5.586C8.914 5.448 8.963 5.33 9.061 5.232L9.793 4.5C9.988 4.305 10.224 4.207 10.5 4.207C10.776 4.207 11.012 4.305 11.207 4.5L13.5 6.793C13.565 6.858 13.619 6.927 13.662 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L13.662 8C13.619 8.073 13.565 8.142 13.5 8.207L11.207 10.5C11.012 10.695 10.776 10.793 10.5 10.793C10.224 10.793 9.988 10.695 9.793 10.5L9.061 9.768C8.961 9.668 8.911 9.55 8.911 9.414C8.911 9.278 8.961 9.16 9.06 9.061L9.061 9.06C9.16 8.961 9.278 8.911 9.414 8.911C9.55 8.911 9.668 8.961 9.768 9.061L10.5 9.793L12.793 7.5L10.5 5.207L9.768 5.939C9.668 6.039 9.55 6.089 9.414 6.089C9.278 6.089 9.16 6.039 9.061 5.939L9.061 5.939L9.061 5.939C8.963 5.842 8.914 5.724 8.914 5.586ZM5.5 9.793L7.793 7.5L5.5 5.207L3.207 7.5L5.5 9.793Z"/></svg>

React

// Gentleface "keyframes" (line-round), MIT. https://gentleface.com/icons/keyframes
import type { SVGProps } from 'react';

export function KeyframesIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M5.5 10.793C5.224 10.793 4.988 10.695 4.793 10.5L2.5 8.207C2.435 8.142 2.381 8.073 2.338 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.338 7C2.381 6.927 2.435 6.858 2.5 6.793L4.793 4.5C4.988 4.305 5.224 4.207 5.5 4.207C5.776 4.207 6.012 4.305 6.207 4.5L8.5 6.793C8.695 6.988 8.793 7.224 8.793 7.5C8.793 7.776 8.695 8.012 8.5 8.207L6.207 10.5C6.012 10.695 5.776 10.793 5.5 10.793ZM8.914 5.586C8.914 5.448 8.963 5.33 9.061 5.232L9.793 4.5C9.988 4.305 10.224 4.207 10.5 4.207C10.776 4.207 11.012 4.305 11.207 4.5L13.5 6.793C13.565 6.858 13.619 6.927 13.662 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L13.662 8C13.619 8.073 13.565 8.142 13.5 8.207L11.207 10.5C11.012 10.695 10.776 10.793 10.5 10.793C10.224 10.793 9.988 10.695 9.793 10.5L9.061 9.768C8.961 9.668 8.911 9.55 8.911 9.414C8.911 9.278 8.961 9.16 9.06 9.061L9.061 9.06C9.16 8.961 9.278 8.911 9.414 8.911C9.55 8.911 9.668 8.961 9.768 9.061L10.5 9.793L12.793 7.5L10.5 5.207L9.768 5.939C9.668 6.039 9.55 6.089 9.414 6.089C9.278 6.089 9.16 6.039 9.061 5.939L9.061 5.939L9.061 5.939C8.963 5.842 8.914 5.724 8.914 5.586ZM5.5 9.793L7.793 7.5L5.5 5.207L3.207 7.5L5.5 9.793Z" />
    </svg>
  );
}

Vue

Vue: see /icons/keyframes.md

Svelte

Svelte: see /icons/keyframes.md

HTML img

HTML img: see /icons/keyframes.md

CSS

CSS: see /icons/keyframes.md

Data URL

Data URL: see /icons/keyframes.md

Sprite

Sprite: see /icons/keyframes.md

SwiftUI

SwiftUI: see /icons/keyframes.md

Compose

Compose: see /icons/keyframes.md

Android XML

Android XML: see /icons/keyframes.md

Flutter

Flutter: see /icons/keyframes.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { KeyframesIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

keyframes, animation timeline

Alternatives

animation: animation as a feature or an effect (animation)
timeline: a chronological timeline of events (timeline)

Also fits

animation: keyframes on a timeline in a motion editor
keyframe: an animation timeline with several keyframes (animation-timeline)

Tags

keyframes, keyframe, timeline, animation, diamond, track, dope-sheet, frames

Category

Audio & video

Component name

KeyframesIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

Family 3

keyframe keyframe-plus keyframe-x

More audio & video icons

album ambient-sound aspect-ratio audio-lines audio-lines-off cassette clapperboard disc drum earbuds eject explicit explicit-off fast-forward film film-info · all audio & video icons

For agents

Metadata: /icons/keyframes.json · Markdown: /icons/keyframes.md · SVG: https://gentleface.com/svg/{style}/16/keyframes.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/keyframes.png

keyframes icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp