Clock Alarm icon

Use the Clock Alarm 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 { ClockAlarm24Regular, ClockAlarm24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M12 7.75C12 7.33579 11.6642 7 11.25 7C10.8358 7 10.5 7.33579 10.5 7.75V12.75C10.5 13.1642 10.8358 13.5 11.25 13.5H14.75C15.1642 13.5 15.5 13.1642 15.5 12.75C15.5 12.3358 15.1642 12 14.75 12H12V7.75ZM3.47628 9.10342C2.57641 8.37072 2 7.25296 2 6C2 3.79086 3.79086 2 6 2C7.25298 2 8.37063 2.57632 9.1034 3.47628C10.0124 3.16748 10.9866 3 12 3C13.0134 3 13.9877 3.16749 14.8967 3.4763C15.6294 2.57634 16.7471 2 18.0001 2C20.2092 2 22.0001 3.79086 22.0001 6C22.0001 7.253 21.4237 8.37072 20.5237 9.10346C20.8325 10.0124 21 10.9866 21 12C21 14.2153 20.1996 16.2436 18.8723 17.8116L20.7803 19.7197C21.0732 20.0126 21.0732 20.4874 20.7803 20.7803C20.4874 21.0732 20.0126 21.0732 19.7197 20.7803L17.8116 18.8723C16.2436 20.1996 14.2153 21 12 21C9.78472 21 7.75638 20.1996 6.18837 18.8723L4.28033 20.7803C3.98744 21.0732 3.51256 21.0732 3.21967 20.7803C2.92678 20.4874 2.92678 20.0126 3.21967 19.7197L5.12771 17.8116C3.80037 16.2436 3 14.2153 3 12C3 10.9866 3.16748 10.0124 3.47628 9.10342ZM3.5 6C3.5 6.63099 3.73356 7.20781 4.12013 7.64828C4.94029 6.16634 6.16635 4.94029 7.64828 4.12013C7.20784 3.73361 6.63096 3.5 6 3.5C4.61929 3.5 3.5 4.61929 3.5 6ZM19.8799 7.64833C20.2665 7.20787 20.5001 6.631 20.5001 6C20.5001 4.61929 19.3808 3.5 18.0001 3.5C17.3691 3.5 16.7922 3.73361 16.3518 4.12016C17.8337 4.94033 19.0598 6.16639 19.8799 7.64833ZM4.5 12C4.5 16.1421 7.85786 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C7.85786 4.5 4.5 7.85786 4.5 12Z" 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_alarm_24_regular.svg";

Details

Keywords

timewatchanalog