Clock Toolbox icon

Use the Clock Toolbox 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 { ClockToolbox24Regular, ClockToolbox24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M4.49976 11C4.49976 6.30558 8.30534 2.5 12.9998 2.5C17.6942 2.5 21.4998 6.30558 21.4998 11C21.4998 15.6944 17.6943 19.4999 13 19.5V21C18.5227 20.9999 22.9998 16.5228 22.9998 11C22.9998 5.47715 18.5226 1 12.9998 1C7.47691 1 2.99976 5.47715 2.99976 11C2.99976 11.206 3.00599 11.4106 3.01827 11.6136C3.43029 11.2792 3.94092 11.0616 4.49976 11.0112L4.49976 11ZM12.9929 5.64827C12.9432 5.28233 12.6293 5 12.2498 5C11.8358 5 11.4998 5.336 11.4998 5.75V11.75L11.5066 11.8517C11.5563 12.2177 11.8703 12.5 12.2498 12.5H16.2498L16.3515 12.4931C16.7174 12.4435 16.9998 12.1295 16.9998 11.75C16.9998 11.336 16.6638 11 16.2498 11H12.9998V5.75L12.9929 5.64827ZM8.25 13.5H4.75C4.61193 13.5 4.5 13.6119 4.5 13.75V15H8.5V13.75C8.5 13.6119 8.38807 13.5 8.25 13.5ZM3 15V13.75C3 12.7835 3.7835 12 4.75 12H8.25C9.2165 12 10 12.7835 10 13.75V15H10.5C11.3284 15 12 15.6716 12 16.5V18H10V17.5C10 17.2239 9.77614 17 9.5 17C9.22386 17 9 17.2239 9 17.5V18H4V17.5C4 17.2239 3.77614 17 3.5 17C3.22386 17 3 17.2239 3 17.5V18H1V16.5C1 15.6716 1.67157 15 2.5 15H3ZM9 19.5V19H4V19.5C4 19.7761 3.77614 20 3.5 20C3.22386 20 3 19.7761 3 19.5V19H1V21.5C1 22.3284 1.67157 23 2.5 23H10.5C11.3284 23 12 22.3284 12 21.5V19H10V19.5C10 19.7761 9.77614 20 9.5 20C9.22386 20 9 19.7761 9 19.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/clock_toolbox_24_regular.svg";

Details

Keywords

timewatchanalog