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 · WiHorizonAlt

Horizon Alt icon

A free horizon alt 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
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/weather-icons/horizon-alt.json
components/icons/weather-icons-horizon-alt.tsx
import * as React from "react";

/**
 * Horizon Alt from Weather Icons (https://erikflowers.github.io/weather-icons/), SIL OFL 1.1.
 * Via Cuelark UI: ui.cuelark.com/icons/weather-icons/horizon-alt. Sized in em, colored by currentColor.
 */
export function WiHorizonAltIcon(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="M4.11,15.9c0-0.26,0.09-0.47,0.27-0.62c0.14-0.15,0.35-0.23,0.62-0.23h2.08c0.24,0,0.45,0.08,0.6,0.24
	c0.16,0.16,0.24,0.36,0.24,0.6c0,0.24-0.08,0.44-0.24,0.61c-0.16,0.17-0.36,0.25-0.6,0.25H5c-0.24,0-0.45-0.08-0.63-0.25
	C4.19,16.34,4.11,16.14,4.11,15.9z M5.03,20.98c0-0.23,0.09-0.43,0.26-0.61c0.16-0.16,0.37-0.23,0.61-0.23h18.21
	c0.24,0,0.45,0.08,0.62,0.24c0.17,0.16,0.25,0.36,0.25,0.6c0,0.24-0.09,0.44-0.26,0.61s-0.38,0.26-0.61,0.26H5.91
	c-0.24,0-0.44-0.09-0.61-0.26S5.03,21.22,5.03,20.98z M7.08,8.81c0-0.26,0.08-0.45,0.23-0.59c0.17-0.18,0.38-0.27,0.62-0.27
	c0.24,0,0.44,0.09,0.61,0.27l1.44,1.46c0.18,0.16,0.26,0.36,0.26,0.6c0,0.25-0.08,0.45-0.24,0.61s-0.36,0.24-0.6,0.24
	c-0.22,0-0.42-0.08-0.6-0.24L7.31,9.42C7.16,9.28,7.08,9.08,7.08,8.81z M9.68,15.9c0,0.87,0.18,1.65,0.53,2.33
	c0.03,0.09,0.11,0.14,0.24,0.14h1.67c0.07,0,0.12-0.02,0.14-0.06c0.02-0.04-0.01-0.1-0.07-0.16c-0.53-0.65-0.8-1.4-0.8-2.25
	c0-0.99,0.36-1.84,1.07-2.54c0.71-0.7,1.56-1.05,2.55-1.05c0.99,0,1.84,0.35,2.55,1.05s1.05,1.55,1.05,2.54
	c0,0.86-0.27,1.61-0.8,2.25c-0.04,0.06-0.06,0.1-0.06,0.12c-0.01,0.03,0,0.06,0.03,0.07c0.02,0.02,0.06,0.03,0.1,0.03h1.7
	c0.09,0,0.16-0.05,0.21-0.14c0.38-0.71,0.56-1.48,0.56-2.33c0-0.96-0.24-1.85-0.72-2.67c-0.48-0.82-1.13-1.47-1.95-1.95
	s-1.71-0.72-2.67-0.72s-1.85,0.24-2.67,0.72c-0.82,0.48-1.47,1.13-1.95,1.95C9.91,14.05,9.68,14.94,9.68,15.9z M14.15,7.97V5.88
	c0-0.24,0.08-0.44,0.25-0.62C14.57,5.08,14.77,5,15.01,5c0.24,0,0.44,0.09,0.62,0.26c0.17,0.17,0.26,0.38,0.26,0.62v2.09
	c0,0.24-0.09,0.44-0.26,0.62c-0.18,0.18-0.38,0.26-0.62,0.26c-0.24,0-0.44-0.09-0.61-0.26C14.23,8.41,14.15,8.21,14.15,7.97z
	 M19.77,10.28c0-0.24,0.08-0.44,0.24-0.6l1.44-1.46c0.17-0.18,0.38-0.27,0.62-0.27c0.25,0,0.46,0.08,0.62,0.25
	c0.17,0.17,0.25,0.37,0.25,0.61c0,0.26-0.08,0.46-0.23,0.61l-1.51,1.47c-0.16,0.15-0.36,0.22-0.59,0.22
	c-0.25,0.01-0.45-0.07-0.61-0.22C19.85,10.74,19.77,10.53,19.77,10.28z M22.1,15.9c0-0.27,0.08-0.47,0.24-0.62
	c0.14-0.15,0.34-0.23,0.59-0.23h2.09c0.24,0,0.45,0.08,0.62,0.24c0.17,0.16,0.26,0.36,0.26,0.6c0,0.24-0.09,0.44-0.26,0.61
	c-0.18,0.17-0.38,0.25-0.62,0.25h-2.09c-0.23,0-0.43-0.08-0.59-0.25C22.18,16.34,22.1,16.14,22.1,15.9z"
      />
    </svg>
  );
}
With react-icons
import { WiHorizonAlt } from "react-icons/wi";

export function Example() {
  return <WiHorizonAlt className="size-5" />;
}
horizon-alt.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="M4.11,15.9c0-0.26,0.09-0.47,0.27-0.62c0.14-0.15,0.35-0.23,0.62-0.23h2.08c0.24,0,0.45,0.08,0.6,0.24
	c0.16,0.16,0.24,0.36,0.24,0.6c0,0.24-0.08,0.44-0.24,0.61c-0.16,0.17-0.36,0.25-0.6,0.25H5c-0.24,0-0.45-0.08-0.63-0.25
	C4.19,16.34,4.11,16.14,4.11,15.9z M5.03,20.98c0-0.23,0.09-0.43,0.26-0.61c0.16-0.16,0.37-0.23,0.61-0.23h18.21
	c0.24,0,0.45,0.08,0.62,0.24c0.17,0.16,0.25,0.36,0.25,0.6c0,0.24-0.09,0.44-0.26,0.61s-0.38,0.26-0.61,0.26H5.91
	c-0.24,0-0.44-0.09-0.61-0.26S5.03,21.22,5.03,20.98z M7.08,8.81c0-0.26,0.08-0.45,0.23-0.59c0.17-0.18,0.38-0.27,0.62-0.27
	c0.24,0,0.44,0.09,0.61,0.27l1.44,1.46c0.18,0.16,0.26,0.36,0.26,0.6c0,0.25-0.08,0.45-0.24,0.61s-0.36,0.24-0.6,0.24
	c-0.22,0-0.42-0.08-0.6-0.24L7.31,9.42C7.16,9.28,7.08,9.08,7.08,8.81z M9.68,15.9c0,0.87,0.18,1.65,0.53,2.33
	c0.03,0.09,0.11,0.14,0.24,0.14h1.67c0.07,0,0.12-0.02,0.14-0.06c0.02-0.04-0.01-0.1-0.07-0.16c-0.53-0.65-0.8-1.4-0.8-2.25
	c0-0.99,0.36-1.84,1.07-2.54c0.71-0.7,1.56-1.05,2.55-1.05c0.99,0,1.84,0.35,2.55,1.05s1.05,1.55,1.05,2.54
	c0,0.86-0.27,1.61-0.8,2.25c-0.04,0.06-0.06,0.1-0.06,0.12c-0.01,0.03,0,0.06,0.03,0.07c0.02,0.02,0.06,0.03,0.1,0.03h1.7
	c0.09,0,0.16-0.05,0.21-0.14c0.38-0.71,0.56-1.48,0.56-2.33c0-0.96-0.24-1.85-0.72-2.67c-0.48-0.82-1.13-1.47-1.95-1.95
	s-1.71-0.72-2.67-0.72s-1.85,0.24-2.67,0.72c-0.82,0.48-1.47,1.13-1.95,1.95C9.91,14.05,9.68,14.94,9.68,15.9z M14.15,7.97V5.88
	c0-0.24,0.08-0.44,0.25-0.62C14.57,5.08,14.77,5,15.01,5c0.24,0,0.44,0.09,0.62,0.26c0.17,0.17,0.26,0.38,0.26,0.62v2.09
	c0,0.24-0.09,0.44-0.26,0.62c-0.18,0.18-0.38,0.26-0.62,0.26c-0.24,0-0.44-0.09-0.61-0.26C14.23,8.41,14.15,8.21,14.15,7.97z
	 M19.77,10.28c0-0.24,0.08-0.44,0.24-0.6l1.44-1.46c0.17-0.18,0.38-0.27,0.62-0.27c0.25,0,0.46,0.08,0.62,0.25
	c0.17,0.17,0.25,0.37,0.25,0.61c0,0.26-0.08,0.46-0.23,0.61l-1.51,1.47c-0.16,0.15-0.36,0.22-0.59,0.22
	c-0.25,0.01-0.45-0.07-0.61-0.22C19.85,10.74,19.77,10.53,19.77,10.28z M22.1,15.9c0-0.27,0.08-0.47,0.24-0.62
	c0.14-0.15,0.34-0.23,0.59-0.23h2.09c0.24,0,0.45,0.08,0.62,0.24c0.17,0.16,0.26,0.36,0.26,0.6c0,0.24-0.09,0.44-0.26,0.61
	c-0.18,0.17-0.38,0.25-0.62,0.25h-2.09c-0.23,0-0.43-0.08-0.59-0.25C22.18,16.34,22.1,16.14,22.1,15.9z"
  />
</svg>
Attribution
"Horizon Alt" icon from Weather Icons (https://erikflowers.github.io/weather-icons/), licensed under SIL OFL 1.1 license.

Related icons: