hourglass icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g><path fill="currentColor" d="M7 3H17V7.2L12 12L7 7.2V3Z"><animate id="SVGFjnOndxt" fill="freeze" attributeName="opacity" begin="0;SVGn6mLadge.end" dur="2s" from="1" to="0"/></path><path fill="currentColor" d="M17 21H7V16.8L12 12L17 16.8V21Z"><animate fill="freeze" attributeName="opacity" begin="0;SVGn6mLadge.end" dur="2s" from="0" to="1"/></path><path fill="currentColor" d="M6 2V8H6.01L6 8.01L10 12L6 16L6.01 16.01H6V22H18V16.01H17.99L18 16L14 12L18 8.01L17.99 8H18V2H6ZM16 16.5V20H8V16.5L12 12.5L16 16.5ZM12 11.5L8 7.5V4H16V7.5L12 11.5Z"/><animateTransform id="SVGn6mLadge" attributeName="transform" attributeType="XML" begin="SVGFjnOndxt.end" dur="0.5s" from="0 12 12" to="180 12 12" type="rotate"/></g></svg>

React

import type { SVGProps } from "react";

export function EosIconsHourglass(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g><path fill="currentColor" d="M7 3H17V7.2L12 12L7 7.2V3Z"><animate id="SVGFjnOndxt" fill="freeze" attributeName="opacity" begin="0;SVGn6mLadge.end" dur="2s" from="1" to="0"/></path><path fill="currentColor" d="M17 21H7V16.8L12 12L17 16.8V21Z"><animate fill="freeze" attributeName="opacity" begin="0;SVGn6mLadge.end" dur="2s" from="0" to="1"/></path><path fill="currentColor" d="M6 2V8H6.01L6 8.01L10 12L6 16L6.01 16.01H6V22H18V16.01H17.99L18 16L14 12L18 8.01L17.99 8H18V2H6ZM16 16.5V20H8V16.5L12 12.5L16 16.5ZM12 11.5L8 7.5V4H16V7.5L12 11.5Z"/><animateTransform id="SVGn6mLadge" attributeName="transform" attributeType="XML" begin="SVGFjnOndxt.end" dur="0.5s" from="0 12 12" to="180 12 12" type="rotate"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g><path fill="currentColor" d="M7 3H17V7.2L12 12L7 7.2V3Z"><animate id="SVGFjnOndxt" fill="freeze" attributeName="opacity" begin="0;SVGn6mLadge.end" dur="2s" from="1" to="0"/></path><path fill="currentColor" d="M17 21H7V16.8L12 12L17 16.8V21Z"><animate fill="freeze" attributeName="opacity" begin="0;SVGn6mLadge.end" dur="2s" from="0" to="1"/></path><path fill="currentColor" d="M6 2V8H6.01L6 8.01L10 12L6 16L6.01 16.01H6V22H18V16.01H17.99L18 16L14 12L18 8.01L17.99 8H18V2H6ZM16 16.5V20H8V16.5L12 12.5L16 16.5ZM12 11.5L8 7.5V4H16V7.5L12 11.5Z"/><animateTransform id="SVGn6mLadge" attributeName="transform" attributeType="XML" begin="SVGFjnOndxt.end" dur="0.5s" from="0 12 12" to="180 12 12" type="rotate"/></g></svg>
</template>

CSS

.icon-hourglass {
  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%20transform%3D%22rotate(180%2012%2012)%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7%203H17V7.2L12%2012L7%207.2V3Z%22%20opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17%2021H7V16.8L12%2012L17%2016.8V21Z%22%20opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%202V8H6.01L6%208.01L10%2012L6%2016L6.01%2016.01H6V22H18V16.01H17.99L18%2016L14%2012L18%208.01L17.99%208H18V2H6ZM16%2016.5V20H8V16.5L12%2012.5L16%2016.5ZM12%2011.5L8%207.5V4H16V7.5L12%2011.5Z%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%20transform%3D%22rotate(180%2012%2012)%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7%203H17V7.2L12%2012L7%207.2V3Z%22%20opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17%2021H7V16.8L12%2012L17%2016.8V21Z%22%20opacity%3D%221%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%202V8H6.01L6%208.01L10%2012L6%2016L6.01%2016.01H6V22H18V16.01H17.99L18%2016L14%2012L18%208.01L17.99%208H18V2H6ZM16%2016.5V20H8V16.5L12%2012.5L16%2016.5ZM12%2011.5L8%207.5V4H16V7.5L12%2011.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

This icon is animated. Browsers do not run SVG animation inside a CSS mask, so the rule above uses a still of the drawn icon. Inline the SVG (or use the React/Vue/Svelte snippet) to keep the animation.