Timer Off icon
Used in general time tracking scenarios. The Timer Off 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 Timer Off 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 { TimerOff24Regular, TimerOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <TimerOff24Regular aria-label="Timer Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_timer_off_24_regular.svg" width="24" height="24" alt="Timer Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L6.21321 7.27395C4.54413 8.82598 3.5 11.041 3.5 13.5C3.5 18.1944 7.30558 22 12 22C14.4589 22 16.6739 20.9559 18.2259 19.2869L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM17.1644 18.2254C15.8846 19.6233 14.0447 20.5 12 20.5C8.13401 20.5 5 17.366 5 13.5C5 11.4553 5.8767 9.61529 7.27471 8.33547L11.25 12.3108V13.25L11.2568 13.3518C11.3065 13.7178 11.6203 14 12 14C12.2554 14 12.481 13.8723 12.6164 13.6773L17.1644 18.2254ZM11.4367 8.25482L12.75 9.56816V8.74999L12.7432 8.64822C12.6935 8.28215 12.3797 7.99999 12 7.99999C11.7756 7.99999 11.5741 8.09858 11.4367 8.25482ZM19 13.5C19 14.203 18.8964 14.8817 18.7036 15.5219L19.8784 16.6967C20.2792 15.7099 20.5 14.6307 20.5 13.5C20.5 8.80557 16.6944 4.99999 12 4.99999C10.8693 4.99999 9.79024 5.22076 8.80345 5.62153L9.97828 6.79638C10.6184 6.6036 11.2971 6.49999 12 6.49999C15.866 6.49999 19 9.634 19 13.5ZM19.1472 5.1137L19.2298 5.17355L20.3882 6.13772C20.7066 6.40271 20.7498 6.87561 20.4849 7.19398C20.2419 7.48581 19.8243 7.54649 19.5112 7.35047L19.4286 7.29063L18.2702 6.32645C17.9518 6.06146 17.9086 5.58856 18.1735 5.27019C18.4165 4.97836 18.8341 4.91768 19.1472 5.1137ZM14.25 2.49999C14.6642 2.49999 15 2.83578 15 3.24999C15 3.62969 14.7178 3.94348 14.3518 3.99315L14.25 3.99999H9.75C9.33579 3.99999 9 3.66421 9 3.24999C9 2.8703 9.28215 2.5565 9.64823 2.50684L9.75 2.49999H14.25Z" 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/timer_off_24_regular.svg";Details
| Name | Timer Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_timer_off_24_regular.svg |
| Filled file | ic_fluent_timer_off_24_filled.svg |
| React components | TimerOff24Regular, TimerOff24Filled |
| License | MIT (© Microsoft Corporation) |