hourglass icon

hourglass from Font Awesome 6 Regular by Dave Gandy · Regular · Date & Time · CC-BY-4.0 Attribution required.

Name
hourglass
Set
Font Awesome 6 Regular
Style
Regular
Category
Date & Time
Viewbox
384×512
License
CC BY 4.0

The same icon in other sets

hourglass-filledAnt Design IconshourglassBootstrap IconshourglassBoxIcons v2hourglassBoxIcons v2 SolidhourglassCarbonhourglassFramework7 IconshourglassFont Awesome 6 SolidhourglassFont Awesome RegularhourglassFont Awesome Solidhourglass-outlineFlowbite Iconshourglass-12-filledFluent UI System IconshourglassFirefox OS EmojihourglassHuge IconshourglassIconParkhourglassIconPark OutlinehourglassIconoirhourglassIonIconshourglassJam IconshourglassLine AwesomehourglassLucidehourglassMaterial SymbolshourglassMaterial Symbols Lighthourglass-16OcticonshourglassPhosphor

More date & time icons from Font Awesome 6 Regular

calendar-checkcalendar-minuscalendar-plusclockhourglass-half

Use the hourglass icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5l81.6 81.5l-81.6 81.5C48 366 32 404.7 32 445v19h-8c-13.3 0-24 10.7-24 24s10.7 24 24 24h336c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8v-19c0-40.3-16-79-44.5-107.5L225.9 256l81.5-81.5C336 146 352 107.3 352 67V48h8c13.3 0 24-10.7 24-24S373.3 0 360 0zm168 289.9l81.5 81.5C293 391 304 417.4 304 445v19H80v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C91 121 80 94.6 80 67V48h224v19c0 27.6-11 54-30.5 73.5L192 222.1z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6RegularHourglass(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5l81.6 81.5l-81.6 81.5C48 366 32 404.7 32 445v19h-8c-13.3 0-24 10.7-24 24s10.7 24 24 24h336c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8v-19c0-40.3-16-79-44.5-107.5L225.9 256l81.5-81.5C336 146 352 107.3 352 67V48h8c13.3 0 24-10.7 24-24S373.3 0 360 0zm168 289.9l81.5 81.5C293 391 304 417.4 304 445v19H80v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C91 121 80 94.6 80 67V48h224v19c0 27.6-11 54-30.5 73.5L192 222.1z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><path fill="currentColor" d="M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5l81.6 81.5l-81.6 81.5C48 366 32 404.7 32 445v19h-8c-13.3 0-24 10.7-24 24s10.7 24 24 24h336c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8v-19c0-40.3-16-79-44.5-107.5L225.9 256l81.5-81.5C336 146 352 107.3 352 67V48h8c13.3 0 24-10.7 24-24S373.3 0 360 0zm168 289.9l81.5 81.5C293 391 304 417.4 304 445v19H80v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C91 121 80 94.6 80 67V48h224v19c0 27.6-11 54-30.5 73.5L192 222.1z"/></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%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%200C10.7%200%200%2010.7%200%2024s10.7%2024%2024%2024h8v19c0%2040.3%2016%2079%2044.5%20107.5l81.6%2081.5l-81.6%2081.5C48%20366%2032%20404.7%2032%20445v19h-8c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h336c13.3%200%2024-10.7%2024-24s-10.7-24-24-24h-8v-19c0-40.3-16-79-44.5-107.5L225.9%20256l81.5-81.5C336%20146%20352%20107.3%20352%2067V48h8c13.3%200%2024-10.7%2024-24S373.3%200%20360%200zm168%20289.9l81.5%2081.5C293%20391%20304%20417.4%20304%20445v19H80v-19c0-27.6%2011-54%2030.5-73.5zm0-67.9l-81.5-81.5C91%20121%2080%2094.6%2080%2067V48h224v19c0%2027.6-11%2054-30.5%2073.5L192%20222.1z%22%2F%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%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%200C10.7%200%200%2010.7%200%2024s10.7%2024%2024%2024h8v19c0%2040.3%2016%2079%2044.5%20107.5l81.6%2081.5l-81.6%2081.5C48%20366%2032%20404.7%2032%20445v19h-8c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h336c13.3%200%2024-10.7%2024-24s-10.7-24-24-24h-8v-19c0-40.3-16-79-44.5-107.5L225.9%20256l81.5-81.5C336%20146%20352%20107.3%20352%2067V48h8c13.3%200%2024-10.7%2024-24S373.3%200%20360%200zm168%20289.9l81.5%2081.5C293%20391%20304%20417.4%20304%20445v19H80v-19c0-27.6%2011-54%2030.5-73.5zm0-67.9l-81.5-81.5C91%20121%2080%2094.6%2080%2067V48h224v19c0%2027.6-11%2054-30.5%2073.5L192%20222.1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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