Time Picker icon

Use the Time Picker 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 { TimePicker24Regular, TimePicker24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TimePicker24Regular aria-label="Time Picker" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_time_picker_24_regular.svg" width="24" height="24" alt="Time Picker">

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.4729 2.16791C12.1974 1.94403 11.8026 1.94403 11.5271 2.16791L7.52706 5.41791C7.20558 5.67911 7.15671 6.15147 7.41791 6.47294C7.67911 6.79442 8.15147 6.84329 8.47294 6.58209L12 3.71635L15.5271 6.58209C15.8485 6.84329 16.3209 6.79442 16.5821 6.47294C16.8433 6.15147 16.7944 5.67911 16.4729 5.41791L12.4729 2.16791ZM2.75 9C1.50736 9 0.5 10.0074 0.5 11.25V12.75C0.5 13.9926 1.50736 15 2.75 15C3.99264 15 5 13.9926 5 12.75V11.25C5 10.0074 3.99264 9 2.75 9ZM2 11.25C2 10.8358 2.33579 10.5 2.75 10.5C3.16421 10.5 3.5 10.8358 3.5 11.25V12.75C3.5 13.1642 3.16421 13.5 2.75 13.5C2.33579 13.5 2 13.1642 2 12.75V11.25ZM8.25 9C7.00736 9 6 10.0074 6 11.25V12.75C6 13.9926 7.00736 15 8.25 15C9.49264 15 10.5 13.9926 10.5 12.75V11.25C10.5 10.0074 9.49264 9 8.25 9ZM7.5 11.25C7.5 10.8358 7.83579 10.5 8.25 10.5C8.66421 10.5 9 10.8358 9 11.25V12.75C9 13.1642 8.66421 13.5 8.25 13.5C7.83579 13.5 7.5 13.1642 7.5 12.75V11.25ZM14 11.25C14 10.0074 15.0074 9 16.25 9C17.4926 9 18.5 10.0074 18.5 11.25V12.75C18.5 13.9926 17.4926 15 16.25 15C15.0074 15 14 13.9926 14 12.75V11.25ZM16.25 10.5C15.8358 10.5 15.5 10.8358 15.5 11.25V12.75C15.5 13.1642 15.8358 13.5 16.25 13.5C16.6642 13.5 17 13.1642 17 12.75V11.25C17 10.8358 16.6642 10.5 16.25 10.5ZM21.75 9C20.5074 9 19.5 10.0074 19.5 11.25V12.75C19.5 13.9926 20.5074 15 21.75 15C22.9926 15 24 13.9926 24 12.75V11.25C24 10.0074 22.9926 9 21.75 9ZM21 11.25C21 10.8358 21.3358 10.5 21.75 10.5C22.1642 10.5 22.5 10.8358 22.5 11.25V12.75C22.5 13.1642 22.1642 13.5 21.75 13.5C21.3358 13.5 21 13.1642 21 12.75V11.25ZM13 10.75C13 11.1642 12.6642 11.5 12.25 11.5C11.8358 11.5 11.5 11.1642 11.5 10.75C11.5 10.3358 11.8358 10 12.25 10C12.6642 10 13 10.3358 13 10.75ZM12.25 14.5C12.6642 14.5 13 14.1642 13 13.75C13 13.3358 12.6642 13 12.25 13C11.8358 13 11.5 13.3358 11.5 13.75C11.5 14.1642 11.8358 14.5 12.25 14.5ZM12.4729 21.8321L16.4729 18.5821C16.7944 18.3209 16.8433 17.8485 16.5821 17.5271C16.3209 17.2056 15.8485 17.1567 15.5271 17.4179L12 20.2836L8.47294 17.4179C8.15147 17.1567 7.67911 17.2056 7.41791 17.5271C7.15671 17.8485 7.20558 18.3209 7.52706 18.5821L11.5271 21.8321C11.8026 22.056 12.1974 22.056 12.4729 21.8321Z" 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/time_picker_24_regular.svg";

Details

Keywords

numbertimedateselector