Skip to content
tablericons

objects

Keyframe Align Center icon

Download the Keyframe Align Center icon as free SVG or PNG. Compare outline and filled styles. Copy React, Vue or Svelte code.

  • keyframe
  • animation
  • timeline
  • motion
  • diamond
  • video-editing
  • frame
  • align
  • center
  • middle
Style
Size
Stroke
Color
Download SVG

Press C to copy SVG, J for JSX, D to download.

Category
objects
Styles
Outline, filled
Component
IconKeyframeAlignCenter
License
MIT · Paweł Kuna

Code

Copy it the way you use it

keyframe-align-center.svg
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
 
>
  <path d="M12 20v2" />
  <path d="M12.816 16.58c-.207 .267 -.504 .42 -.816 .42c-.312 0 -.61 -.153 -.816 -.42l-2.908 -3.748a1.39 1.39 0 0 1 0 -1.664l2.908 -3.748c.207 -.267 .504 -.42 .816 -.42c.312 0 .61 .153 .816 .42l2.908 3.748a1.39 1.39 0 0 1 0 1.664l-2.908 3.748" />
  <path d="M12 2v2" />
  <path d="M3 12h2" />
  <path d="M19 12h2" />
</svg>

Use the Keyframe Align Center icon

For a decorative icon beside text, add aria-hidden="true" to the SVG. For an icon-only control, put its accessible name on the button or link.

React example
import { IconKeyframeAlignCenter } from '@tabler/icons-react';

<IconKeyframeAlignCenter size={24} stroke={2} />
Read the React guide
Vue example
import { IconKeyframeAlignCenter } from '@tabler/icons-vue';

<IconKeyframeAlignCenter :size="24" :stroke="2" />
Read the Vue guide
Svelte 5 example
import { IconKeyframeAlignCenter } from '@tabler/icons-svelte-runes';

<IconKeyframeAlignCenter size={24} stroke={2} />
Read the Svelte guide

Related

Related icons

See all 809 objects icons