hourglass icon

hourglass-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name
hourglass-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

hourglasshourglass-duotonehourglass-sharphourglass-sharp-duotonehourglass-sharp-fillhourglass-sharp-two-tonehourglass-two-tone

The same icon in other sets

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

Use the hourglass icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3L4 3C3.4477 3 3 2.5523 3 2C3 1.4477 3.4477 1 4 1L20 1C20.5523 1 21 1.4477 21 2C21 2.5523 20.5523 3 20 3L19 3L19 6.0633C19 6.9536 18.6045 7.7979 17.9206 8.3679L13.562 12L17.9206 15.6321C18.6045 16.2021 19 17.0464 19 17.9367L19 21L20 21C20.5523 21 21 21.4477 21 22C21 22.5523 20.5523 23 20 23L4 23C3.4477 23 3 22.5523 3 22C3 21.4477 3.4477 21 4 21L5 21L5 17.9367C5 17.0464 5.3955 16.2021 6.0794 15.6321L10.438 12L6.0794 8.3679C5.3955 7.7979 5 6.9536 5 6.0633ZM7 3L7 6.0633C7 6.36 7.1318 6.6415 7.3598 6.8315L12 10.6983L16.6402 6.8315C16.8682 6.6415 17 6.36 17 6.0633L17 3L7 3Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsHourglassFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3L4 3C3.4477 3 3 2.5523 3 2C3 1.4477 3.4477 1 4 1L20 1C20.5523 1 21 1.4477 21 2C21 2.5523 20.5523 3 20 3L19 3L19 6.0633C19 6.9536 18.6045 7.7979 17.9206 8.3679L13.562 12L17.9206 15.6321C18.6045 16.2021 19 17.0464 19 17.9367L19 21L20 21C20.5523 21 21 21.4477 21 22C21 22.5523 20.5523 23 20 23L4 23C3.4477 23 3 22.5523 3 22C3 21.4477 3.4477 21 4 21L5 21L5 17.9367C5 17.0464 5.3955 16.2021 6.0794 15.6321L10.438 12L6.0794 8.3679C5.3955 7.7979 5 6.9536 5 6.0633ZM7 3L7 6.0633C7 6.36 7.1318 6.6415 7.3598 6.8315L12 10.6983L16.6402 6.8315C16.8682 6.6415 17 6.36 17 6.0633L17 3L7 3Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3L4 3C3.4477 3 3 2.5523 3 2C3 1.4477 3.4477 1 4 1L20 1C20.5523 1 21 1.4477 21 2C21 2.5523 20.5523 3 20 3L19 3L19 6.0633C19 6.9536 18.6045 7.7979 17.9206 8.3679L13.562 12L17.9206 15.6321C18.6045 16.2021 19 17.0464 19 17.9367L19 21L20 21C20.5523 21 21 21.4477 21 22C21 22.5523 20.5523 23 20 23L4 23C3.4477 23 3 22.5523 3 22C3 21.4477 3.4477 21 4 21L5 21L5 17.9367C5 17.0464 5.3955 16.2021 6.0794 15.6321L10.438 12L6.0794 8.3679C5.3955 7.7979 5 6.9536 5 6.0633ZM7 3L7 6.0633C7 6.36 7.1318 6.6415 7.3598 6.8315L12 10.6983L16.6402 6.8315C16.8682 6.6415 17 6.36 17 6.0633L17 3L7 3Z"/></svg>
</template>

CSS

.icon-hourglass-fill {
  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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5%203L4%203C3.4477%203%203%202.5523%203%202C3%201.4477%203.4477%201%204%201L20%201C20.5523%201%2021%201.4477%2021%202C21%202.5523%2020.5523%203%2020%203L19%203L19%206.0633C19%206.9536%2018.6045%207.7979%2017.9206%208.3679L13.562%2012L17.9206%2015.6321C18.6045%2016.2021%2019%2017.0464%2019%2017.9367L19%2021L20%2021C20.5523%2021%2021%2021.4477%2021%2022C21%2022.5523%2020.5523%2023%2020%2023L4%2023C3.4477%2023%203%2022.5523%203%2022C3%2021.4477%203.4477%2021%204%2021L5%2021L5%2017.9367C5%2017.0464%205.3955%2016.2021%206.0794%2015.6321L10.438%2012L6.0794%208.3679C5.3955%207.7979%205%206.9536%205%206.0633ZM7%203L7%206.0633C7%206.36%207.1318%206.6415%207.3598%206.8315L12%2010.6983L16.6402%206.8315C16.8682%206.6415%2017%206.36%2017%206.0633L17%203L7%203Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5%203L4%203C3.4477%203%203%202.5523%203%202C3%201.4477%203.4477%201%204%201L20%201C20.5523%201%2021%201.4477%2021%202C21%202.5523%2020.5523%203%2020%203L19%203L19%206.0633C19%206.9536%2018.6045%207.7979%2017.9206%208.3679L13.562%2012L17.9206%2015.6321C18.6045%2016.2021%2019%2017.0464%2019%2017.9367L19%2021L20%2021C20.5523%2021%2021%2021.4477%2021%2022C21%2022.5523%2020.5523%2023%2020%2023L4%2023C3.4477%2023%203%2022.5523%203%2022C3%2021.4477%203.4477%2021%204%2021L5%2021L5%2017.9367C5%2017.0464%205.3955%2016.2021%206.0794%2015.6321L10.438%2012L6.0794%208.3679C5.3955%207.7979%205%206.9536%205%206.0633ZM7%203L7%206.0633C7%206.36%207.1318%206.6415%207.3598%206.8315L12%2010.6983L16.6402%206.8315C16.8682%206.6415%2017%206.36%2017%206.0633L17%203L7%203Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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