new moon face emoji

new-moon-face from Twitter Emoji by Twitter · Default · Travel & Places · CC-BY-4.0 Attribution required.

Name: new-moon-face
Set: Twitter Emoji
Style: Default
Category: Travel & Places
Viewbox: 36×36
License: CC BY 4.0

The same emoji in other sets

new-moon-faceEmoji One (Colored)new-moon-faceFluent Emoji new-moon-faceFluent Emoji Flat new-moon-faceFluent Emoji High Contrast new-moon-faceNoto Emoji new-moon-faceOpenMoji

More travel & places icons from Twitter Emoji

Use the new moon face emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#66757f" d="M36 18c0 9.94-8.06 18-18 18c-9.941 0-18-8.06-18-18C0 8.059 8.059 0 18 0c9.94 0 18 8.059 18 18"/><g fill="#5b6876"><circle cx="9.5" cy="7.5" r="3.5"/><circle cx="24.5" cy="28.5" r="3.5"/><circle cx="22" cy="5" r="2"/><circle cx="3" cy="18" r="1"/><circle cx="30" cy="9" r="1"/><circle cx="16" cy="31" r="1"/><circle cx="32" cy="19" r="2"/><circle cx="6" cy="26" r="2"/></g><path fill="#292f33" d="M18 24.904c-7 0-9-2.618-9-1.381C9 24.762 13 28 18 28s9-3.238 9-4.477c0-1.237-2 1.381-9 1.381M27 15a3 3 0 1 1-6 0a3 3 0 0 1 6 0m-12 0a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/></svg>

React

import type { SVGProps } from "react";

export function TwemojiNewMoonFace(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#66757f" d="M36 18c0 9.94-8.06 18-18 18c-9.941 0-18-8.06-18-18C0 8.059 8.059 0 18 0c9.94 0 18 8.059 18 18"/><g fill="#5b6876"><circle cx="9.5" cy="7.5" r="3.5"/><circle cx="24.5" cy="28.5" r="3.5"/><circle cx="22" cy="5" r="2"/><circle cx="3" cy="18" r="1"/><circle cx="30" cy="9" r="1"/><circle cx="16" cy="31" r="1"/><circle cx="32" cy="19" r="2"/><circle cx="6" cy="26" r="2"/></g><path fill="#292f33" d="M18 24.904c-7 0-9-2.618-9-1.381C9 24.762 13 28 18 28s9-3.238 9-4.477c0-1.237-2 1.381-9 1.381M27 15a3 3 0 1 1-6 0a3 3 0 0 1 6 0m-12 0a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#66757f" d="M36 18c0 9.94-8.06 18-18 18c-9.941 0-18-8.06-18-18C0 8.059 8.059 0 18 0c9.94 0 18 8.059 18 18"/><g fill="#5b6876"><circle cx="9.5" cy="7.5" r="3.5"/><circle cx="24.5" cy="28.5" r="3.5"/><circle cx="22" cy="5" r="2"/><circle cx="3" cy="18" r="1"/><circle cx="30" cy="9" r="1"/><circle cx="16" cy="31" r="1"/><circle cx="32" cy="19" r="2"/><circle cx="6" cy="26" r="2"/></g><path fill="#292f33" d="M18 24.904c-7 0-9-2.618-9-1.381C9 24.762 13 28 18 28s9-3.238 9-4.477c0-1.237-2 1.381-9 1.381M27 15a3 3 0 1 1-6 0a3 3 0 0 1 6 0m-12 0a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/></svg>
</template>

CSS

.icon-new-moon-face {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M36%2018c0%209.94-8.06%2018-18%2018c-9.941%200-18-8.06-18-18C0%208.059%208.059%200%2018%200c9.94%200%2018%208.059%2018%2018%22%2F%3E%3Cg%20fill%3D%22%235b6876%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%227.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2224.5%22%20cy%3D%2228.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%229%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2231%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2226%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22M18%2024.904c-7%200-9-2.618-9-1.381C9%2024.762%2013%2028%2018%2028s9-3.238%209-4.477c0-1.237-2%201.381-9%201.381M27%2015a3%203%200%201%201-6%200a3%203%200%200%201%206%200m-12%200a3%203%200%201%201-6%200a3%203%200%200%201%206%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M36%2018c0%209.94-8.06%2018-18%2018c-9.941%200-18-8.06-18-18C0%208.059%208.059%200%2018%200c9.94%200%2018%208.059%2018%2018%22%2F%3E%3Cg%20fill%3D%22%235b6876%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%227.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2224.5%22%20cy%3D%2228.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%229%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2231%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2226%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23292f33%22%20d%3D%22M18%2024.904c-7%200-9-2.618-9-1.381C9%2024.762%2013%2028%2018%2028s9-3.238%209-4.477c0-1.237-2%201.381-9%201.381M27%2015a3%203%200%201%201-6%200a3%203%200%200%201%206%200m-12%200a3%203%200%201%201-6%200a3%203%200%200%201%206%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/new-moon-face.svg?color=%231a73e8&size=48