Timer 3 icon

Use the Timer 3 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 { Timer324Regular, Timer324Filled } from "@fluentui/react-icons";

export function Example() {
  return <Timer324Regular aria-label="Timer 3" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_timer_3_24_regular.svg" width="24" height="24" alt="Timer 3">

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.393 12.1476C19.7453 8.09595 16.2342 5 12 5C7.30558 5 3.5 8.80558 3.5 13.5C3.5 18.1944 7.30558 22 12 22C13.0599 22 14.0745 21.806 15.0103 21.4516C14.8188 20.8759 14.9324 20.2166 15.3656 19.7318C15.4568 19.6296 15.5573 19.5407 15.6647 19.4652C14.5988 20.1215 13.3436 20.5 12 20.5C8.13401 20.5 5 17.366 5 13.5C5 9.63401 8.13401 6.5 12 6.5C15.3574 6.5 18.1628 8.8637 18.8428 12.0178C18.9755 12.0062 19.1114 12 19.25 12C19.632 12 20.0178 12.0504 20.393 12.1476ZM12.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.25ZM18.25 18C18.25 17.5858 18.5858 17.25 19 17.25C19.5275 17.25 20.0578 17.0651 20.444 16.7767C20.8346 16.485 21 16.1541 21 15.875C21 15.2253 20.3354 14.5 19.25 14.5C18.7342 14.5 18.2373 14.6896 17.845 14.9064C17.6533 15.0123 17.4984 15.1183 17.393 15.1963C17.3406 15.2351 17.3013 15.2665 17.2767 15.2867C17.2645 15.2968 17.2559 15.304 17.2513 15.3079L17.2476 15.3112C16.9386 15.5851 16.4661 15.5579 16.1907 15.2497C15.9147 14.9408 15.9418 14.4664 16.2507 14.1904L16.2519 14.1893L16.2538 14.1876L16.2591 14.183L16.2745 14.1696C16.287 14.1589 16.3038 14.1447 16.3249 14.1274C16.3669 14.0929 16.4258 14.0461 16.4999 13.9912C16.6476 13.8817 16.8587 13.7377 17.1195 13.5936C17.632 13.3104 18.3851 13 19.25 13C20.926 13 22.5 14.1775 22.5 15.875C22.5 16.7695 21.9808 17.5011 21.3415 17.9785L21.3125 18L21.3415 18.0215C21.9808 18.4989 22.5 19.2305 22.5 20.125C22.5 21.8225 20.926 23 19.25 23C18.3851 23 17.632 22.6896 17.1195 22.4064C16.8587 22.2623 16.6476 22.1183 16.4999 22.0088C16.4258 21.9539 16.3669 21.9071 16.3249 21.8726C16.3038 21.8553 16.287 21.8411 16.2745 21.8304L16.2591 21.817L16.2538 21.8124L16.2519 21.8107L16.2503 21.8093C15.9414 21.5333 15.9147 21.0592 16.1907 20.7503C16.4661 20.4421 16.9389 20.4151 17.2478 20.689L17.2486 20.6897L17.2513 20.6921C17.2551 20.6953 17.2615 20.7008 17.2705 20.7082C17.2724 20.7098 17.2745 20.7115 17.2767 20.7133C17.3013 20.7335 17.3406 20.7649 17.393 20.8037C17.4984 20.8817 17.6533 20.9877 17.845 21.0936C18.2373 21.3104 18.7342 21.5 19.25 21.5C20.3354 21.5 21 20.7747 21 20.125C21 19.8459 20.8346 19.515 20.444 19.2233C20.0578 18.9349 19.5275 18.75 19 18.75C18.5858 18.75 18.25 18.4142 18.25 18Z" 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_3_24_regular.svg";

Details

Keywords

clocktimealarmalertstopwatchnumbertype