hourglass icon

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

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

The same icon in other sets

hourglass-filledAnt Design IconshourglassBootstrap IconshourglassBoxIcons v2hourglassBoxIcons v2 SolidhourglassCarbonhourglassFramework7 IconshourglassFont Awesome 6 RegularhourglassFont Awesome 6 SolidhourglassFont 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 Regular

calendar-checkcalendar-minuscalendar-pluscalendar-timesclockhourglass-halfhourglass-2hourglass-empty

Use the hourglass icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M152 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5L286 320l-81.5 81.5C176 430 160 468.7 160 509v19h-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.5L354 320l81.5-81.5C464 210 480 171.3 480 131v-19h8c13.3 0 24-10.7 24-24s-10.7-24-24-24zm168 289.9l81.5 81.5C421 455 432 481.4 432 509v19H208v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C219 185 208 158.6 208 131v-19h224v19c0 27.6-11 54-30.5 73.5L320 286.1z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7RegularHourglass(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M152 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5L286 320l-81.5 81.5C176 430 160 468.7 160 509v19h-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.5L354 320l81.5-81.5C464 210 480 171.3 480 131v-19h8c13.3 0 24-10.7 24-24s-10.7-24-24-24zm168 289.9l81.5 81.5C421 455 432 481.4 432 509v19H208v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C219 185 208 158.6 208 131v-19h224v19c0 27.6-11 54-30.5 73.5L320 286.1z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M152 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5L286 320l-81.5 81.5C176 430 160 468.7 160 509v19h-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.5L354 320l81.5-81.5C464 210 480 171.3 480 131v-19h8c13.3 0 24-10.7 24-24s-10.7-24-24-24zm168 289.9l81.5 81.5C421 455 432 481.4 432 509v19H208v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C219 185 208 158.6 208 131v-19h224v19c0 27.6-11 54-30.5 73.5L320 286.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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M152%2064c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h8v19c0%2040.3%2016%2079%2044.5%20107.5L286%20320l-81.5%2081.5C176%20430%20160%20468.7%20160%20509v19h-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.5L354%20320l81.5-81.5C464%20210%20480%20171.3%20480%20131v-19h8c13.3%200%2024-10.7%2024-24s-10.7-24-24-24zm168%20289.9l81.5%2081.5C421%20455%20432%20481.4%20432%20509v19H208v-19c0-27.6%2011-54%2030.5-73.5zm0-67.9l-81.5-81.5C219%20185%20208%20158.6%20208%20131v-19h224v19c0%2027.6-11%2054-30.5%2073.5L320%20286.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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M152%2064c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h8v19c0%2040.3%2016%2079%2044.5%20107.5L286%20320l-81.5%2081.5C176%20430%20160%20468.7%20160%20509v19h-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.5L354%20320l81.5-81.5C464%20210%20480%20171.3%20480%20131v-19h8c13.3%200%2024-10.7%2024-24s-10.7-24-24-24zm168%20289.9l81.5%2081.5C421%20455%20432%20481.4%20432%20509v19H208v-19c0-27.6%2011-54%2030.5-73.5zm0-67.9l-81.5-81.5C219%20185%20208%20158.6%20208%20131v-19h224v19c0%2027.6-11%2054-30.5%2073.5L320%20286.1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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