Time And Weather icon

Use the Time And Weather 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 { TimeAndWeather24Regular, TimeAndWeather24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TimeAndWeather24Regular aria-label="Time And Weather" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_time_and_weather_24_regular.svg" width="24" height="24" alt="Time And Weather">

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="M11.9959 19.0103C12.3756 19.0103 12.6894 19.2924 12.7391 19.6585L12.7459 19.7603V21.2603C12.7459 21.6745 12.4102 22.0103 11.9959 22.0103C11.6162 22.0103 11.3024 21.7281 11.2528 21.362L11.2459 21.2603V19.7603C11.2459 19.3461 11.5817 19.0103 11.9959 19.0103ZM18.0176 16.9375L19.0783 17.9981C19.3712 18.291 19.3712 18.7659 19.0783 19.0588C18.7854 19.3517 18.3105 19.3517 18.0176 19.0588L16.957 17.9981C16.6641 17.7052 16.6641 17.2304 16.957 16.9375C17.2499 16.6446 17.7247 16.6446 18.0176 16.9375ZM7.03441 16.9375C7.3273 17.2304 7.3273 17.7052 7.03441 17.9981L5.97375 19.0588C5.68086 19.3517 5.20598 19.3517 4.91309 19.0588C4.6202 18.7659 4.6202 18.291 4.91309 17.9981L5.97375 16.9375C6.26664 16.6446 6.74152 16.6446 7.03441 16.9375ZM11.9998 6.47477C15.0511 6.47477 17.5248 8.94839 17.5248 11.9998C17.5248 15.0511 15.0511 17.5248 11.9998 17.5248C8.94838 17.5248 6.47475 15.0511 6.47475 11.9998C6.47475 8.94839 8.94838 6.47477 11.9998 6.47477ZM11.9998 7.97477C9.77681 7.97477 7.97475 9.77682 7.97475 11.9998C7.97475 14.2227 9.77681 16.0248 11.9998 16.0248C14.2227 16.0248 16.0248 14.2227 16.0248 11.9998C16.0248 9.77682 14.2227 7.97477 11.9998 7.97477ZM11.2498 8.99977C11.6294 8.99977 11.9432 9.28192 11.9929 9.648L11.9998 9.74977V12.0028L13.2494 12.0035C13.6291 12.0035 13.9429 12.2856 13.9926 12.6517L13.9994 12.7535C13.9994 13.1332 13.7173 13.447 13.3512 13.4966L13.2494 13.5035H11.2498C10.8701 13.5035 10.5563 13.2213 10.5066 12.8553L10.4998 12.7535V9.74977C10.4998 9.33555 10.8355 8.99977 11.2498 8.99977ZM21.2495 11.2681C21.6637 11.2681 21.9995 11.6039 21.9995 12.0181C21.9995 12.3978 21.7174 12.7116 21.3513 12.7612L21.2495 12.7681H19.7495C19.3353 12.7681 18.9995 12.4323 18.9995 12.0181C18.9995 11.6384 19.2817 11.3246 19.6477 11.2749L19.7495 11.2681H21.2495ZM4.25 11.2393C4.66421 11.2393 5 11.575 5 11.9893C5 12.369 4.71785 12.6827 4.35177 12.7324L4.25 12.7393H2.75C2.33579 12.7393 2 12.4035 2 11.9893C2 11.6096 2.28215 11.2958 2.64823 11.2461L2.75 11.2393H4.25ZM5.88963 4.86814L5.97375 4.94075L7.03441 6.00141C7.3273 6.29431 7.3273 6.76918 7.03441 7.06207C6.76814 7.32834 6.35148 7.35255 6.05787 7.13469L5.97375 7.06207L4.91309 6.00141C4.6202 5.70852 4.6202 5.23365 4.91309 4.94075C5.17936 4.67449 5.59602 4.65028 5.88963 4.86814ZM19.0783 4.94075C19.3446 5.20702 19.3688 5.62368 19.1509 5.9173L19.0783 6.00141L18.0176 7.06207C17.7247 7.35497 17.2499 7.35497 16.957 7.06207C16.6907 6.79581 16.6665 6.37914 16.8844 6.08553L16.957 6.00141L18.0176 4.94075C18.3105 4.64786 18.7854 4.64786 19.0783 4.94075ZM12 1.98926C12.3797 1.98926 12.6935 2.27141 12.7432 2.63749L12.75 2.73926V4.23926C12.75 4.65347 12.4142 4.98926 12 4.98926C11.6203 4.98926 11.3065 4.7071 11.2568 4.34103L11.25 4.23926V2.73926C11.25 2.32504 11.5858 1.98926 12 1.98926Z" 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_and_weather_24_regular.svg";

Details

Keywords

clocksunweatherpicker