The Tabler keyframe icon visually represents a single frame in an animation sequence, commonly used in media editing software to denote points for controlling motion or changes.
Common uses
- Timeline marker for animation editing
- Button to add a new animation state
- Indicator for video playback position
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconKeyframe } from '@tabler/icons-react';
<IconKeyframe size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconKeyframe size={24} stroke={2} />filled
<IconKeyframeFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Media
- Keywords
- animationshapedesignalignkeyframecontententertainmentmultimediabroadcastaudiomediaanimation frametimeline pointmotion graphicvideo marker
FAQ
- What does the keyframe icon represent?
- It represents a single frame in an animation or video, marking a specific point where a change occurs.
- How do I use the keyframe icon in React?
- You can import it directly from the '@tabler/icons-react' library using: import { IconKeyframe } from '@tabler/icons-react'
- What is the license for this icon?
- The Tabler icons, including the keyframe icon, are distributed under the MIT license.
Related icons
The same idea in other libraries, and near matches in Tabler.
Looking for something else? Search Tabler and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →