Skip to content
Cuelark UI

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

Weather Icons · WiSmog

Smog icon

A free smog 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.

License
SIL OFL 1.1 license
Project
erikflowers.github.io
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/weather-icons/smog.json
components/icons/weather-icons-smog.tsx
import * as React from "react";

/**
 * Smog from Weather Icons (https://erikflowers.github.io/weather-icons/), SIL OFL 1.1.
 * Via Cuelark UI: ui.cuelark.com/icons/weather-icons/smog. Sized in em, colored by currentColor.
 */
export function WiSmogIcon(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="M6.35,12.46c0-0.94,0.3-1.77,0.9-2.5s1.37-1.21,2.31-1.43c0.23-1.11,0.79-2.03,1.7-2.75c0.91-0.72,1.95-1.08,3.12-1.08
	c1.12,0,2.13,0.35,3,1.04c0.88,0.69,1.45,1.59,1.72,2.7h0.28c0.76,0,1.46,0.16,2.12,0.49s1.18,0.77,1.57,1.34
	c0.39,0.57,0.59,1.18,0.59,1.84c0,1.12-0.43,2.08-1.29,2.86c0,0.35-0.11,0.75-0.32,1.2c-0.22,0.45-0.5,0.86-0.87,1.23
	c-0.36,0.37-0.73,0.59-1.1,0.68c-0.12,0.62-0.41,1.14-0.86,1.57s-0.99,0.71-1.63,0.85c0.3,0.3,0.45,0.65,0.45,1.06
	c0,0.49-0.17,0.91-0.52,1.26c-0.35,0.35-0.77,0.52-1.27,0.52c-0.49,0-0.91-0.17-1.26-0.52c-0.35-0.35-0.53-0.77-0.53-1.26
	c0-0.06,0.01-0.14,0.04-0.26s0.04-0.21,0.04-0.27h-0.08c-0.59,0-1.09-0.21-1.51-0.63c-0.42-0.42-0.63-0.93-0.63-1.51
	c0-0.23,0.12-0.58,0.37-1.06c-0.49-0.26-0.88-0.67-1.17-1.26h-1.25c-1.09-0.09-2.02-0.53-2.78-1.3C6.73,14.49,6.35,13.55,6.35,12.46
	z"
      />
    </svg>
  );
}
With react-icons
import { WiSmog } from "react-icons/wi";

export function Example() {
  return <WiSmog className="size-5" />;
}
smog.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="M6.35,12.46c0-0.94,0.3-1.77,0.9-2.5s1.37-1.21,2.31-1.43c0.23-1.11,0.79-2.03,1.7-2.75c0.91-0.72,1.95-1.08,3.12-1.08
	c1.12,0,2.13,0.35,3,1.04c0.88,0.69,1.45,1.59,1.72,2.7h0.28c0.76,0,1.46,0.16,2.12,0.49s1.18,0.77,1.57,1.34
	c0.39,0.57,0.59,1.18,0.59,1.84c0,1.12-0.43,2.08-1.29,2.86c0,0.35-0.11,0.75-0.32,1.2c-0.22,0.45-0.5,0.86-0.87,1.23
	c-0.36,0.37-0.73,0.59-1.1,0.68c-0.12,0.62-0.41,1.14-0.86,1.57s-0.99,0.71-1.63,0.85c0.3,0.3,0.45,0.65,0.45,1.06
	c0,0.49-0.17,0.91-0.52,1.26c-0.35,0.35-0.77,0.52-1.27,0.52c-0.49,0-0.91-0.17-1.26-0.52c-0.35-0.35-0.53-0.77-0.53-1.26
	c0-0.06,0.01-0.14,0.04-0.26s0.04-0.21,0.04-0.27h-0.08c-0.59,0-1.09-0.21-1.51-0.63c-0.42-0.42-0.63-0.93-0.63-1.51
	c0-0.23,0.12-0.58,0.37-1.06c-0.49-0.26-0.88-0.67-1.17-1.26h-1.25c-1.09-0.09-2.02-0.53-2.78-1.3C6.73,14.49,6.35,13.55,6.35,12.46
	z"
  />
</svg>
Attribution
"Smog" icon from Weather Icons (https://erikflowers.github.io/weather-icons/), licensed under SIL OFL 1.1 license.

Smog icon in other sets