Clock Warning icon

Use the Clock Warning 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 { ClockWarning24Regular, ClockWarning24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClockWarning24Regular aria-label="Clock Warning" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clock_warning_24_regular.svg" width="24" height="24" alt="Clock Warning">

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="M5.16112 12.8301C5.71417 11.7234 7.29357 11.7234 7.84666 12.8301L11.8437 20.8281C12.3424 21.826 11.6166 22.9999 10.501 23H2.50682C1.3912 22.9998 0.665408 21.826 1.16404 20.8281L5.16112 12.8301ZM12 2C17.5228 2 22 6.47715 22 12C22 17.1986 18.0329 21.4685 12.9609 21.9521C13.051 21.4717 13.0002 20.9565 12.7744 20.4629C17.1058 20.0716 20.5 16.4333 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30559 3.50003 3.49998 7.3056 3.49998 12C3.49998 12.55 3.55353 13.0875 3.6533 13.6084L2.66502 15.5869C2.23684 14.4733 1.99998 13.2645 1.99998 12C1.99998 6.47717 6.47716 2.00003 12 2ZM6.50389 19.998C6.22771 19.9981 6.00413 20.222 6.00389 20.498C6.00389 20.7743 6.22756 20.999 6.50389 20.999C6.78025 20.999 7.00389 20.7743 7.00389 20.498C7.00365 20.222 6.7801 19.998 6.50389 19.998ZM6.50389 14.9951C6.22756 14.9951 6.00389 15.2198 6.00389 15.4961V18.4971C6.00389 18.7733 6.22756 18.998 6.50389 18.998C6.78025 18.998 7.00389 18.7734 7.00389 18.4971V15.4961C7.00389 15.2198 6.78025 14.9951 6.50389 14.9951ZM11.25 6C11.6295 6 11.9435 6.2825 11.9931 6.64844L12 6.75V12H15.25C15.664 12 16 12.336 16 12.75C16 13.1295 15.7175 13.4435 15.3515 13.4932L15.25 13.5H11.25C10.8705 13.5 10.5565 13.2175 10.5068 12.8516L10.5 12.75V6.75C10.5 6.33602 10.836 6.00003 11.25 6Z" 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/clock_warning_24_regular.svg";

Details