Timer 10 icon

Use the Timer 10 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 { Timer1024Regular, Timer1024Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 5C16.1986 5 19.6862 8.04419 20.3761 12.0458C20.1718 12.0156 19.9627 12 19.75 12C19.4443 12 19.1461 12.0323 18.8587 12.0936C18.2076 8.90166 15.3843 6.5 12 6.5C8.13401 6.5 5 9.63401 5 13.5C5 17.366 8.13401 20.5 12 20.5C12.1681 20.5 12.3348 20.4941 12.5 20.4824V21.9855C12.3346 21.9951 12.1678 22 12 22C7.30558 22 3.5 18.1944 3.5 13.5C3.5 8.80558 7.30558 5 12 5ZM12.75 12.4053V8.75L12.7432 8.64823C12.6935 8.28215 12.3797 8 12 8C11.5858 8 11.25 8.33579 11.25 8.75V13.25L11.256 13.3387C11.4636 12.9979 11.7883 12.7259 12.1966 12.5898L12.75 12.4053ZM19.1472 5.11371L19.2298 5.17355L20.3882 6.13773C20.7066 6.40272 20.7498 6.87562 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.2702C18.4165 4.97837 18.8341 4.91769 19.1472 5.11371ZM14.25 2.5C14.6642 2.5 15 2.83579 15 3.25C15 3.6297 14.7178 3.94349 14.3518 3.99315L14.25 4H9.75C9.33579 4 9 3.66421 9 3.25C9 2.8703 9.28215 2.55651 9.64823 2.50685L9.75 2.5H14.25ZM14.6885 13.1416C14.8841 13.2825 15 13.5089 15 13.75V22.25C15 22.6642 14.6642 23 14.25 23C13.8358 23 13.5 22.6642 13.5 22.25V14.7906L12.9872 14.9615C12.5942 15.0925 12.1695 14.8801 12.0385 14.4872C11.9075 14.0942 12.1199 13.6695 12.5128 13.5385L14.0128 13.0385C14.2415 12.9623 14.493 13.0006 14.6885 13.1416ZM16.5 16.25C16.5 14.4551 17.9551 13 19.75 13C21.5449 13 23 14.4551 23 16.25V19.75C23 21.5449 21.5449 23 19.75 23C17.9551 23 16.5 21.5449 16.5 19.75V16.25ZM19.75 14.5C18.7835 14.5 18 15.2835 18 16.25V19.75C18 20.7165 18.7835 21.5 19.75 21.5C20.7165 21.5 21.5 20.7165 21.5 19.75V16.25C21.5 15.2835 20.7165 14.5 19.75 14.5Z" 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_10_24_regular.svg";

Details

Keywords

clocktimealarmalertstopwatchnumbertype