Hover the icon or press Play. Suggested motion: rock. Pick another to preview it and update the animated code:

Weather Icons · WiNightFog

Night Fog icon

A free night fog icon from Weather Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asmoon icon dark icon dark mode icon sleep icon

License: SIL OFL 1.1 license
Project: erikflowers.github.io

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/weather-icons/night-fog.json

components/icons/weather-icons-night-fog.tsx

import * as React from "react";

/**
 * Night Fog from Weather Icons (https://erikflowers.github.io/weather-icons/), SIL OFL 1.1.
 * Via Cuelark UI: ui.cuelark.com/icons/weather-icons/night-fog. Sized in em, colored by currentColor.
 */
export function WiNightFogIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      id="Layer_1"
      x="0px"
      y="0px"
      viewBox="0 0 30 30"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M2.66,20.92c0,0.23,0.08,0.42,0.25,0.57c0.17,0.16,0.38,0.23,0.62,0.23h18.61c0.24,0,0.44-0.08,0.6-0.23
	c0.17-0.16,0.25-0.35,0.25-0.57c0-0.24-0.08-0.45-0.24-0.61c-0.16-0.17-0.37-0.25-0.61-0.25H3.53c-0.24,0-0.44,0.08-0.61,0.25
	C2.75,20.48,2.66,20.69,2.66,20.92z M5.27,17.81c0,0.24,0.09,0.43,0.26,0.59c0.14,0.18,0.33,0.27,0.59,0.27h18.61
	c0.23,0,0.42-0.08,0.58-0.25s0.23-0.37,0.23-0.61c0-0.23-0.08-0.43-0.23-0.58C25.16,17.08,24.96,17,24.73,17H6.12
	c-0.24,0-0.44,0.08-0.6,0.23C5.35,17.39,5.27,17.58,5.27,17.81z M5.42,15.39v-0.05c-0.04,0.15,0,0.22,0.12,0.22h1.44
	c0.06,0,0.12-0.05,0.19-0.15c0.24-0.52,0.59-0.94,1.06-1.27c0.47-0.33,0.99-0.52,1.55-0.56l0.53-0.08c0.12,0,0.19-0.06,0.19-0.18
	l0.06-0.5c0.11-1.08,0.56-1.97,1.36-2.7c0.8-0.72,1.75-1.08,2.84-1.08c1.07,0,2.02,0.36,2.82,1.07s1.27,1.6,1.38,2.67l0.07,0.57
	c0,0.12,0.07,0.18,0.21,0.18h1.58c0.64,0,1.23,0.17,1.75,0.52c0.52,0.34,0.92,0.8,1.17,1.36c0.07,0.1,0.14,0.15,0.22,0.15h1.42
	c0.12,0,0.17-0.07,0.15-0.22c-0.22-0.56-0.37-0.91-0.46-1.06c0.72-0.65,1.23-1.51,1.5-2.57l0.17-0.66c0.03-0.06,0.02-0.12-0.01-0.16
	c-0.03-0.04-0.07-0.07-0.12-0.07l-0.62-0.22c-0.89-0.26-1.57-0.78-2.04-1.58c-0.47-0.8-0.59-1.65-0.37-2.56l0.13-0.58
	c0.05-0.09,0.01-0.17-0.13-0.23l-0.84-0.23c-1.09-0.27-2.17-0.18-3.22,0.26c-1.05,0.44-1.87,1.15-2.47,2.12
	c-0.79-0.31-1.56-0.46-2.29-0.46c-1.39,0-2.62,0.44-3.71,1.31s-1.78,1.99-2.1,3.35c-0.84,0.2-1.58,0.6-2.22,1.21
	S5.67,14.55,5.42,15.39z M7,23.97c0,0.24,0.09,0.43,0.26,0.59c0.17,0.18,0.37,0.27,0.59,0.27H26.5c0.23,0,0.43-0.08,0.59-0.25
	c0.16-0.17,0.24-0.37,0.24-0.61c0-0.23-0.08-0.42-0.24-0.58s-0.36-0.23-0.59-0.23H7.86c-0.24,0-0.44,0.08-0.6,0.23
	C7.09,23.55,7,23.74,7,23.97z M18.51,8.7c0.35-0.57,0.82-1.02,1.41-1.33c0.59-0.31,1.21-0.44,1.87-0.38
	c-0.07,1.04,0.17,2.02,0.7,2.93c0.54,0.91,1.28,1.58,2.22,2.02c-0.15,0.35-0.4,0.71-0.75,1.07c-0.92-0.76-1.97-1.13-3.14-1.13H20.5
	C20.18,10.57,19.52,9.51,18.51,8.7z"
      />
    </svg>
  );
}

With react-icons

import { WiNightFog } from "react-icons/wi";

export function Example() {
  return <WiNightFog className="size-5" />;
}

night-fog.svg

<svg
  version="1.1"
  id="Layer_1"
  x="0px"
  y="0px"
  viewBox="0 0 30 30"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M2.66,20.92c0,0.23,0.08,0.42,0.25,0.57c0.17,0.16,0.38,0.23,0.62,0.23h18.61c0.24,0,0.44-0.08,0.6-0.23
	c0.17-0.16,0.25-0.35,0.25-0.57c0-0.24-0.08-0.45-0.24-0.61c-0.16-0.17-0.37-0.25-0.61-0.25H3.53c-0.24,0-0.44,0.08-0.61,0.25
	C2.75,20.48,2.66,20.69,2.66,20.92z M5.27,17.81c0,0.24,0.09,0.43,0.26,0.59c0.14,0.18,0.33,0.27,0.59,0.27h18.61
	c0.23,0,0.42-0.08,0.58-0.25s0.23-0.37,0.23-0.61c0-0.23-0.08-0.43-0.23-0.58C25.16,17.08,24.96,17,24.73,17H6.12
	c-0.24,0-0.44,0.08-0.6,0.23C5.35,17.39,5.27,17.58,5.27,17.81z M5.42,15.39v-0.05c-0.04,0.15,0,0.22,0.12,0.22h1.44
	c0.06,0,0.12-0.05,0.19-0.15c0.24-0.52,0.59-0.94,1.06-1.27c0.47-0.33,0.99-0.52,1.55-0.56l0.53-0.08c0.12,0,0.19-0.06,0.19-0.18
	l0.06-0.5c0.11-1.08,0.56-1.97,1.36-2.7c0.8-0.72,1.75-1.08,2.84-1.08c1.07,0,2.02,0.36,2.82,1.07s1.27,1.6,1.38,2.67l0.07,0.57
	c0,0.12,0.07,0.18,0.21,0.18h1.58c0.64,0,1.23,0.17,1.75,0.52c0.52,0.34,0.92,0.8,1.17,1.36c0.07,0.1,0.14,0.15,0.22,0.15h1.42
	c0.12,0,0.17-0.07,0.15-0.22c-0.22-0.56-0.37-0.91-0.46-1.06c0.72-0.65,1.23-1.51,1.5-2.57l0.17-0.66c0.03-0.06,0.02-0.12-0.01-0.16
	c-0.03-0.04-0.07-0.07-0.12-0.07l-0.62-0.22c-0.89-0.26-1.57-0.78-2.04-1.58c-0.47-0.8-0.59-1.65-0.37-2.56l0.13-0.58
	c0.05-0.09,0.01-0.17-0.13-0.23l-0.84-0.23c-1.09-0.27-2.17-0.18-3.22,0.26c-1.05,0.44-1.87,1.15-2.47,2.12
	c-0.79-0.31-1.56-0.46-2.29-0.46c-1.39,0-2.62,0.44-3.71,1.31s-1.78,1.99-2.1,3.35c-0.84,0.2-1.58,0.6-2.22,1.21
	S5.67,14.55,5.42,15.39z M7,23.97c0,0.24,0.09,0.43,0.26,0.59c0.17,0.18,0.37,0.27,0.59,0.27H26.5c0.23,0,0.43-0.08,0.59-0.25
	c0.16-0.17,0.24-0.37,0.24-0.61c0-0.23-0.08-0.42-0.24-0.58s-0.36-0.23-0.59-0.23H7.86c-0.24,0-0.44,0.08-0.6,0.23
	C7.09,23.55,7,23.74,7,23.97z M18.51,8.7c0.35-0.57,0.82-1.02,1.41-1.33c0.59-0.31,1.21-0.44,1.87-0.38
	c-0.07,1.04,0.17,2.02,0.7,2.93c0.54,0.91,1.28,1.58,2.22,2.02c-0.15,0.35-0.4,0.71-0.75,1.07c-0.92-0.76-1.97-1.13-3.14-1.13H20.5
	C20.18,10.57,19.52,9.51,18.51,8.7z"
  />
</svg>

Attribution

"Night Fog" icon from Weather Icons (https://erikflowers.github.io/weather-icons/), licensed under SIL OFL 1.1 license.

Related icons: moon, dark, dark mode, sleep

Similar Weather Icons icons