Weather Snowflake icon

Use the Weather Snowflake 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 { WeatherSnowflake24Regular, WeatherSnowflake24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WeatherSnowflake24Regular aria-label="Weather Snowflake" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_snowflake_24_regular.svg" width="24" height="24" alt="Weather Snowflake">

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.75 2C12.1642 2 12.5 2.33579 12.5 2.75V5.90486L14.6335 3.77139C14.9264 3.4785 15.4012 3.4785 15.6941 3.77139C15.987 4.06429 15.987 4.53916 15.6941 4.83205L12.5 8.02618V11H15.4738L18.6679 7.80588C18.9608 7.51298 19.4357 7.51298 19.7286 7.80588C20.0215 8.09877 20.0215 8.57364 19.7286 8.86654L17.5951 11H20.75C21.1642 11 21.5 11.3358 21.5 11.75C21.5 12.1642 21.1642 12.5 20.75 12.5H17.5951L19.7286 14.6335C20.0215 14.9264 20.0215 15.4012 19.7286 15.6941C19.4357 15.987 18.9608 15.987 18.6679 15.6941L15.4738 12.5H12.5V15.4738L15.6941 18.6679C15.987 18.9608 15.987 19.4357 15.6941 19.7286C15.4012 20.0215 14.9264 20.0215 14.6335 19.7286L12.5 17.5951V20.75C12.5 21.1642 12.1642 21.5 11.75 21.5C11.3358 21.5 11 21.1642 11 20.75V17.5951L8.86654 19.7286C8.57364 20.0215 8.09877 20.0215 7.80588 19.7286C7.51298 19.4357 7.51298 18.9608 7.80588 18.6679L11 15.4738V12.5H8.02618L4.83205 15.6941C4.53916 15.987 4.06429 15.987 3.77139 15.6941C3.4785 15.4012 3.4785 14.9264 3.77139 14.6335L5.90486 12.5H2.75C2.33579 12.5 2 12.1642 2 11.75C2 11.3358 2.33579 11 2.75 11H5.90486L3.77139 8.86654C3.4785 8.57364 3.4785 8.09877 3.77139 7.80588C4.06429 7.51298 4.53916 7.51298 4.83205 7.80588L8.02618 11H11V8.02618L7.80588 4.83205C7.51298 4.53916 7.51298 4.06429 7.80588 3.77139C8.09877 3.4785 8.57364 3.4785 8.86654 3.77139L11 5.90486V2.75C11 2.33579 11.3358 2 11.75 2Z" 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/weather_snowflake_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze