Hourglass Half icon
Used for time keeping scenarios. Filled states are made to lay on top of Hourglass Regular icon. The Hourglass Half icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Hourglass Half icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { HourglassHalf24Regular, HourglassHalf24Filled } from "@fluentui/react-icons";
export function Example() {
return <HourglassHalf24Regular aria-label="Hourglass Half" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_hourglass_half_24_regular.svg" width="24" height="24" alt="Hourglass Half"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.25 19.5H6.75C6.6837 19.5 6.62011 19.4737 6.57322 19.4268C6.52634 19.3799 6.5 19.3163 6.5 19.25V18.65C6.50495 18.1264 6.63672 17.6118 6.88402 17.1503C7.13132 16.6888 7.4868 16.2941 7.92 16L10 14.52C10.4205 14.242 10.7699 13.8691 11.02 13.4314C11.2701 12.9938 11.414 12.5034 11.44 12H12.56C12.586 12.5034 12.7299 12.9938 12.98 13.4314C13.2301 13.8691 13.5795 14.242 14 14.52L16.08 16C16.5132 16.2941 16.8687 16.6888 17.116 17.1503C17.3633 17.6118 17.4951 18.1264 17.5 18.65V19.25C17.5 19.3163 17.4737 19.3799 17.4268 19.4268C17.3799 19.4737 17.3163 19.5 17.25 19.5ZM6.75 2C5.23122 2 4 3.23122 4 4.75V5.16905C4 7.18881 5.05972 9.06047 6.79165 10.0996L8.6021 11.1859C9.07166 11.4676 9.09078 12.1413 8.63796 12.4492L6.51672 13.8917C4.94237 14.9622 4 16.7426 4 18.6465V19.25C4 20.7688 5.23122 22 6.75 22H17.25C18.7688 22 20 20.7688 20 19.25V18.6465C20 16.7426 19.0576 14.9622 17.4833 13.8917L15.362 12.4492C14.9092 12.1413 14.9283 11.4676 15.3979 11.1859L17.2084 10.0996C18.9403 9.06047 20 7.18881 20 5.16905V4.75C20 3.23122 18.7688 2 17.25 2H6.75ZM5.5 4.75C5.5 4.05964 6.05964 3.5 6.75 3.5H17.25C17.9404 3.5 18.5 4.05964 18.5 4.75V5.16905C18.5 6.66192 17.7167 8.04532 16.4366 8.81339L14.6262 9.89966C13.2175 10.7449 13.1601 12.7658 14.5186 13.6896L16.6398 15.132C17.8035 15.9233 18.5 17.2393 18.5 18.6465V19.25C18.5 19.9404 17.9404 20.5 17.25 20.5H6.75C6.05964 20.5 5.5 19.9404 5.5 19.25V18.6465C5.5 17.2393 6.19654 15.9233 7.36018 15.132L9.48142 13.6896C10.8399 12.7658 10.7825 10.7449 9.37384 9.89966L7.56339 8.81339C6.28327 8.04532 5.5 6.66192 5.5 5.16905V4.75Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/hourglass_half_24_regular.svg";Details
| Name | Hourglass Half |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_hourglass_half_24_regular.svg |
| Filled file | ic_fluent_hourglass_half_24_filled.svg |
| React components | HourglassHalf24Regular, HourglassHalf24Filled |
| License | MIT (© Microsoft Corporation) |