Sun

sun

Live preview

Tune size, color, and stroke width before copying the icon into your UI.

Size

96px

Stroke width

1.8

Color

#111827

Export

Copy the original SVG, copy a ready-to-use JSX component, or download the source file.

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="96" height="96" aria-hidden="true">
  <circle cx="12" cy="12" r="4" fill="#111827" fill-opacity="0.16" stroke="#111827" stroke-width="1.8" />
  <path d="M12 3V5.5" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M12 18.5V21" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M3 12H5.5" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M18.5 12H21" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M5.64 5.64L7.4 7.4" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M16.6 16.6L18.36 18.36" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M16.6 7.4L18.36 5.64" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
  <path d="M5.64 18.36L7.4 16.6" stroke="#111827" stroke-width="1.8" stroke-linecap="round" />
</svg>

import type { SVGProps } from "react";

export function SunIcon(props: SVGProps<SVGSVGElement>) {
  return (
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="96" height="96" aria-hidden="true" {...props}>
        <circle cx="12" cy="12" r="4" fill="#111827" fillOpacity="0.16" stroke="#111827" strokeWidth="1.8" />
        <path d="M12 3V5.5" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M12 18.5V21" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M3 12H5.5" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M18.5 12H21" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M5.64 5.64L7.4 7.4" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M16.6 16.6L18.36 18.36" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M16.6 7.4L18.36 5.64" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
        <path d="M5.64 18.36L7.4 16.6" stroke="#111827" strokeWidth="1.8" strokeLinecap="round" />
      </svg>
  );
}

Category

Weather

Style

Outline