Moon icon

A free moon icon in 5 styles, drawn by hand on a 24px grid. Copy it as SVG or JSX, for personal or commercial use.

Style Stroke

Category: Weather & Climate
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: night, lunar, crescent, twilight, celestial, orbit, phases

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(3 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M18 8.97C16.85 10.79 14.82 12 12.5 12C8.91 12 6 9.09 6 5.5C6 3.18 7.21 1.15 9.03 0C9.02 0 9.01 0 9 0C4.03 0 0 4.03 0 9C0 13.97 4.03 18 9 18C13.97 18 18 13.97 18 9C18 8.99 18 8.98 18 8.97Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(2 2)" fill="currentColor" d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10L20 9.96C20 9.52 19.7 9.13 19.28 9C18.85 8.88 18.39 9.06 18.15 9.43C17.18 10.98 15.46 12 13.5 12C10.46 12 8 9.54 8 6.5C8 4.54 9.02 2.82 10.57 1.85C10.94 1.61 11.12 1.15 11 0.72C10.87 0.3 10.48 0 10.04 0L10 0Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(3 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M13 11C15.07 11 16.9 9.95 17.98 8.35C17.99 8.57 18 8.78 18 9C18 13.97 13.97 18 9 18C4.03 18 0 13.97 0 9C0 4.03 4.03 0 9 0C9.22 0 9.43 0.01 9.65 0.02C8.05 1.1 7 2.93 7 5C7 8.31 9.69 11 13 11Z"/>
  <path transform="translate(10 3.02)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M10.98 8.33C9.9 9.93 8.07 10.98 6 10.98C2.69 10.98 0 8.29 0 4.98C0 2.9 1.05 1.08 2.65 0"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(2 2)" fill="currentColor" d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10L20 9.96C20 9.52 19.7 9.13 19.28 9C18.85 8.88 18.39 9.06 18.15 9.43C17.18 10.98 15.46 12 13.5 12C10.46 12 8 9.54 8 6.5C8 4.54 9.02 2.82 10.57 1.85C10.94 1.61 11.12 1.15 11 0.72C10.87 0.3 10.48 0 10.04 0L10 0Z"/>
  <path transform="translate(9 2.02)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M4.48 0.44C4.79 0.9 4.67 1.52 4.21 1.83C2.87 2.73 2 4.25 2 5.98C2 8.74 4.24 10.98 7 10.98C8.73 10.98 10.25 10.1 11.15 8.77C11.46 8.31 12.08 8.19 12.54 8.5C12.99 8.81 13.11 9.43 12.81 9.89C11.55 11.75 9.42 12.98 7 12.98C3.13 12.98 0 9.84 0 5.98C0 3.56 1.23 1.43 3.09 0.17C3.55 -0.14 4.17 -0.02 4.48 0.44Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(3 3)" fill="currentColor" d="M18 8.97C16.85 10.79 14.82 12 12.5 12C8.91 12 6 9.09 6 5.5C6 3.18 7.21 1.15 9.03 0C9.02 0 9.01 0 9 0C4.03 0 0 4.03 0 9C0 13.97 4.03 18 9 18C13.97 18 18 13.97 18 9C18 8.99 18 8.98 18 8.97Z"/>
  <path transform="translate(3 3)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M18 8.97C16.85 10.79 14.82 12 12.5 12C8.91 12 6 9.09 6 5.5C6 3.18 7.21 1.15 9.03 0C9.02 0 9.01 0 9 0C4.03 0 0 4.03 0 9C0 13.97 4.03 18 9 18C13.97 18 18 13.97 18 9C18 8.99 18 8.98 18 8.97Z"/>
</svg>