keyframes icon

keyframes-filled from Tabler Icons by Paweł Kuna · Filled · MIT Free for personal and commercial use.

Name: keyframes-filled
Set: Tabler Icons
Style: Filled
Viewbox: 24×24
License: MIT

1 other variant in Tabler Icons

The same icon in other sets

Use the keyframes icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M8 4a2.6 2.6 0 0 0-2 .957l-4.355 5.24a2.85 2.85 0 0 0-.007 3.598l4.368 5.256C6.505 19.651 7.23 20 8 20a2.6 2.6 0 0 0 2-.957l4.355-5.24a2.85 2.85 0 0 0 .007-3.598L9.994 4.949A2.6 2.6 0 0 0 8 4m8.382.214a1 1 0 0 1 1.32.074l.084.094l4.576 5.823c.808.993.848 2.396.13 3.419l-.12.158l-4.586 5.836a1 1 0 0 1-1.644-1.132l.072-.104l4.596-5.85a.845.845 0 0 0 .06-.978l-.07-.1l-4.586-5.836a1 1 0 0 1 .168-1.404"/><path d="M12.382 4.214a1 1 0 0 1 1.32.074l.084.094l4.576 5.823c.808.993.848 2.396.13 3.419l-.12.158l-4.586 5.836a1 1 0 0 1-1.644-1.132l.072-.104l4.596-5.85a.845.845 0 0 0 .06-.978l-.07-.1l-4.586-5.836a1 1 0 0 1 .168-1.404"/></g></svg>

React

import type { SVGProps } from "react";

export function TablerKeyframesFilled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M8 4a2.6 2.6 0 0 0-2 .957l-4.355 5.24a2.85 2.85 0 0 0-.007 3.598l4.368 5.256C6.505 19.651 7.23 20 8 20a2.6 2.6 0 0 0 2-.957l4.355-5.24a2.85 2.85 0 0 0 .007-3.598L9.994 4.949A2.6 2.6 0 0 0 8 4m8.382.214a1 1 0 0 1 1.32.074l.084.094l4.576 5.823c.808.993.848 2.396.13 3.419l-.12.158l-4.586 5.836a1 1 0 0 1-1.644-1.132l.072-.104l4.596-5.85a.845.845 0 0 0 .06-.978l-.07-.1l-4.586-5.836a1 1 0 0 1 .168-1.404"/><path d="M12.382 4.214a1 1 0 0 1 1.32.074l.084.094l4.576 5.823c.808.993.848 2.396.13 3.419l-.12.158l-4.586 5.836a1 1 0 0 1-1.644-1.132l.072-.104l4.596-5.85a.845.845 0 0 0 .06-.978l-.07-.1l-4.586-5.836a1 1 0 0 1 .168-1.404"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path d="M8 4a2.6 2.6 0 0 0-2 .957l-4.355 5.24a2.85 2.85 0 0 0-.007 3.598l4.368 5.256C6.505 19.651 7.23 20 8 20a2.6 2.6 0 0 0 2-.957l4.355-5.24a2.85 2.85 0 0 0 .007-3.598L9.994 4.949A2.6 2.6 0 0 0 8 4m8.382.214a1 1 0 0 1 1.32.074l.084.094l4.576 5.823c.808.993.848 2.396.13 3.419l-.12.158l-4.586 5.836a1 1 0 0 1-1.644-1.132l.072-.104l4.596-5.85a.845.845 0 0 0 .06-.978l-.07-.1l-4.586-5.836a1 1 0 0 1 .168-1.404"/><path d="M12.382 4.214a1 1 0 0 1 1.32.074l.084.094l4.576 5.823c.808.993.848 2.396.13 3.419l-.12.158l-4.586 5.836a1 1 0 0 1-1.644-1.132l.072-.104l4.596-5.85a.845.845 0 0 0 .06-.978l-.07-.1l-4.586-5.836a1 1 0 0 1 .168-1.404"/></g></svg>
</template>

CSS

.icon-keyframes-filled {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M8%204a2.6%202.6%200%200%200-2%20.957l-4.355%205.24a2.85%202.85%200%200%200-.007%203.598l4.368%205.256C6.505%2019.651%207.23%2020%208%2020a2.6%202.6%200%200%200%202-.957l4.355-5.24a2.85%202.85%200%200%200%20.007-3.598L9.994%204.949A2.6%202.6%200%200%200%208%204m8.382.214a1%201%200%200%201%201.32.074l.084.094l4.576%205.823c.808.993.848%202.396.13%203.419l-.12.158l-4.586%205.836a1%201%200%200%201-1.644-1.132l.072-.104l4.596-5.85a.845.845%200%200%200%20.06-.978l-.07-.1l-4.586-5.836a1%201%200%200%201%20.168-1.404%22%2F%3E%3Cpath%20d%3D%22M12.382%204.214a1%201%200%200%201%201.32.074l.084.094l4.576%205.823c.808.993.848%202.396.13%203.419l-.12.158l-4.586%205.836a1%201%200%200%201-1.644-1.132l.072-.104l4.596-5.85a.845.845%200%200%200%20.06-.978l-.07-.1l-4.586-5.836a1%201%200%200%201%20.168-1.404%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M8%204a2.6%202.6%200%200%200-2%20.957l-4.355%205.24a2.85%202.85%200%200%200-.007%203.598l4.368%205.256C6.505%2019.651%207.23%2020%208%2020a2.6%202.6%200%200%200%202-.957l4.355-5.24a2.85%202.85%200%200%200%20.007-3.598L9.994%204.949A2.6%202.6%200%200%200%208%204m8.382.214a1%201%200%200%201%201.32.074l.084.094l4.576%205.823c.808.993.848%202.396.13%203.419l-.12.158l-4.586%205.836a1%201%200%200%201-1.644-1.132l.072-.104l4.596-5.85a.845.845%200%200%200%20.06-.978l-.07-.1l-4.586-5.836a1%201%200%200%201%20.168-1.404%22%2F%3E%3Cpath%20d%3D%22M12.382%204.214a1%201%200%200%201%201.32.074l.084.094l4.576%205.823c.808.993.848%202.396.13%203.419l-.12.158l-4.586%205.836a1%201%200%200%201-1.644-1.132l.072-.104l4.596-5.85a.845.845%200%200%200%20.06-.978l-.07-.1l-4.586-5.836a1%201%200%200%201%20.168-1.404%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/tabler/keyframes-filled.svg?color=%231a73e8&size=48