General icon

Sun JSX Icon

Q: Is the Sun JSX icon free?

Yes. You can copy the Sun JSX component and use it in React and Next.js projects.

Q: Can I customize the Sun icon?

Yes. Edit SVG attributes or pass className, width, height and color props depending on the component.

Copy the Sun icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.

Browse all icons

ComponentSunIcon

FilesunIcon.jsx

CategoryGeneral

Copy-ready code

Sun React JSX component

export const SunIcon = ({ width = "40px", height = "40px", color = "#000", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <title>Sun Icon</title>
    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="Combined-Shape" fill={color} transform="translate(21.333333, 21.333333)">
        <path d="M256,384 L256,469.333333 L213.333333,469.333333 L213.333333,384 L256,384 Z M355.346224,325.176335 L415.686003,385.516113 L385.516113,415.686003 L325.176335,355.346224 L355.346224,325.176335 Z M113.987109,325.176335 L144.156999,355.346224 L83.81722,415.686003 L53.6473307,385.516113 L113.987109,325.176335 Z M234.666667,118.01971 C299.089002,118.01971 351.313623,170.244331 351.313623,234.666667 C351.313623,299.089002 299.089002,351.314049 234.666667,351.314049 C203.711846,351.372867 174.007802,339.102338 152.119399,317.213934 C130.230995,295.325531 117.960466,265.621487 118.019285,234.666667 C118.019285,170.244331 170.244331,118.01971 234.666667,118.01971 Z M234.666667,160.686377 C193.808416,160.686377 160.685951,193.808546 160.685951,234.748031 C160.648688,254.358867 168.422443,273.1772 182.289288,287.044045 C196.156133,300.91089 214.974466,308.684645 234.666667,308.647305 C275.524788,308.647305 308.646957,275.524917 308.646957,234.666667 C308.646957,193.808481 275.524853,160.686377 234.666667,160.686377 Z M469.333333,213.333333 L469.333333,256 L384,256 L384,213.333333 L469.333333,213.333333 Z M85.3333333,213.333333 L85.3333333,256 L3.55271368e-15,256 L3.55271368e-15,213.333333 L85.3333333,213.333333 Z M83.81722,53.6473307 L144.156999,113.987109 L113.987109,144.156999 L53.6473307,83.81722 L83.81722,53.6473307 Z M385.516113,53.6473307 L415.686003,83.81722 L355.346224,144.156999 L325.176335,113.987109 L385.516113,53.6473307 Z M256,9.68506364e-12 L256,85.3333333 L213.333333,85.3333333 L213.333333,9.6772259e-12 L256,9.68506364e-12 Z"></path>
      </g>
    </g>
  </svg>
);

How to use the Sun icon

import { SunIcon } from "@/assets/icons/sunIcon"

export default function Example() {
  return <SunIcon width="32px" height="32px" />
}

Built for the web

Use it in your stack

This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.

ReactNext.jsJSXSVGGeneral icons

Looking for a similar mark? Browse the related icons below or explore the full general collection.

Related JSX icons

Add

Bell

Calendar

Camera

Check

Copy

FAQ

Is the Sun JSX icon free?

Yes. You can copy the JSX component and use it in React and Next.js projects.

Can I customize it?

Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.