Timer 2 icon
Used in general time tracking scenarios. The Timer 2 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 2 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 { Timer224Regular, Timer224Filled } from "@fluentui/react-icons";
export function Example() {
return <Timer224Regular aria-label="Timer 2" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_timer_2_24_regular.svg" width="24" height="24" alt="Timer 2"> 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="M20.3943 12.1558C19.75 8.10013 16.237 5 12 5C7.30558 5 3.5 8.80558 3.5 13.5C3.5 18.1944 7.30558 22 12 22C13.056 22 14.0671 21.8074 15 21.4554V21.25C15 20.6931 15.1071 20.1613 15.3018 19.6739C14.3182 20.201 13.194 20.5 12 20.5C8.13401 20.5 5 17.366 5 13.5C5 9.63401 8.13401 6.5 12 6.5C15.3579 6.5 18.1636 8.86442 18.8431 12.0192C18.977 12.0065 19.1127 12 19.25 12C19.6465 12 20.0302 12.0543 20.3943 12.1558ZM12.7432 8.64823C12.6935 8.28215 12.3797 8 12 8C11.5858 8 11.25 8.33579 11.25 8.75V13.25L11.2568 13.3518C11.3065 13.7178 11.6203 14 12 14C12.4142 14 12.75 13.6642 12.75 13.25V8.75L12.7432 8.64823ZM19.2298 5.17355L19.1472 5.11371C18.8341 4.91769 18.4165 4.97837 18.1735 5.2702C17.9086 5.58856 17.9518 6.06146 18.2702 6.32645L19.4286 7.29063L19.5112 7.35047C19.8243 7.54649 20.2419 7.48581 20.4849 7.19398C20.7498 6.87562 20.7066 6.40272 20.3882 6.13773L19.2298 5.17355ZM15 3.25C15 2.83579 14.6642 2.5 14.25 2.5H9.75L9.64823 2.50685C9.28215 2.55651 9 2.8703 9 3.25C9 3.66421 9.33579 4 9.75 4H14.25L14.3518 3.99315C14.7178 3.94349 15 3.6297 15 3.25ZM19.25 13C17.4551 13 16 14.4551 16 16.25C16 16.6642 16.3358 17 16.75 17C17.1642 17 17.5 16.6642 17.5 16.25C17.5 15.2835 18.2835 14.5 19.25 14.5C20.2165 14.5 21 15.2835 21 16.25C21 17.2165 20.2165 18 19.25 18C17.4551 18 16 19.4551 16 21.25V22.25C16 22.6642 16.3358 23 16.75 23H21.75C22.1642 23 22.5 22.6642 22.5 22.25C22.5 21.8358 22.1642 21.5 21.75 21.5H17.5V21.25C17.5 20.2835 18.2835 19.5 19.25 19.5C21.0449 19.5 22.5 18.0449 22.5 16.25C22.5 14.4551 21.0449 13 19.25 13Z" 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_2_24_regular.svg";Details
| Name | Timer 2 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_timer_2_24_regular.svg |
| Filled file | ic_fluent_timer_2_24_filled.svg |
| React components | Timer224Regular, Timer224Filled |
| License | MIT (© Microsoft Corporation) |