Hourglass icon
Used for time keeping scenarios. Filled states are made to lay on top of Hourglass Regular icon. The Hourglass 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 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 { Hourglass24Regular, Hourglass24Filled } from "@fluentui/react-icons";
export function Example() {
return <Hourglass24Regular aria-label="Hourglass" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_hourglass_24_regular.svg" width="24" height="24" alt="Hourglass"> 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="M4 4.75C4 3.23122 5.23122 2 6.75 2H17.25C18.7688 2 20 3.23122 20 4.75V5.16905C20 7.18881 18.9403 9.06047 17.2084 10.0996L15.3979 11.1859C14.9283 11.4676 14.9092 12.1413 15.362 12.4492L17.4833 13.8917C19.0576 14.9622 20 16.7426 20 18.6465V19.25C20 20.7688 18.7688 22 17.25 22H6.75C5.23122 22 4 20.7688 4 19.25V18.6465C4 16.7426 4.94237 14.9622 6.51672 13.8917L8.63796 12.4492C9.09078 12.1413 9.07166 11.4676 8.6021 11.1859L6.79165 10.0996C5.05972 9.06047 4 7.18881 4 5.16905V4.75ZM6.75 3.5C6.05964 3.5 5.5 4.05964 5.5 4.75V5.16905C5.5 6.66192 6.28327 8.04532 7.56339 8.81339L9.37384 9.89966C10.7825 10.7449 10.8399 12.7658 9.48142 13.6896L7.36018 15.132C6.19654 15.9233 5.5 17.2393 5.5 18.6465V19.25C5.5 19.9404 6.05964 20.5 6.75 20.5H17.25C17.9404 20.5 18.5 19.9404 18.5 19.25V18.6465C18.5 17.2393 17.8035 15.9233 16.6398 15.132L14.5186 13.6896C13.1601 12.7658 13.2175 10.7449 14.6262 9.89966L16.4366 8.81339C17.7167 8.04532 18.5 6.66192 18.5 5.16905V4.75C18.5 4.05964 17.9404 3.5 17.25 3.5H6.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_24_regular.svg";Details
| Name | Hourglass |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_hourglass_24_regular.svg |
| Filled file | ic_fluent_hourglass_24_filled.svg |
| React components | Hourglass24Regular, Hourglass24Filled |
| License | MIT (© Microsoft Corporation) |