droplet emoji

droplet from Noto Emoji by Google Inc · Default · Travel & Places · Apache-2.0 Free for personal and commercial use.

Name: droplet
Set: Noto Emoji
Style: Default
Category: Travel & Places
Viewbox: 128×128
License: Apache 2.0

Use the droplet emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#4ec1f5" d="M63.38 4.07c-4.22.09-5.44 4.69-6.95 8.45s-10.5 24.21-16.32 34.53s-13.7 23.84-12.58 43.17c1.13 19.33 16.14 33.76 37.17 33.6c19.01-.14 35.64-11.1 36.32-34.91c.56-19.71-10.28-36.74-15.63-47.16c-3.18-6.2-13.59-26.95-14.69-29.52c-1.97-4.6-2.81-8.26-7.32-8.16"/><path fill="#b3e2fb" d="M47.38 64.42c-2.96.13-10 9.29-10 20.84s5.45 20.08 11.4 18.86c6.9-1.41 5.77-8.45 4.36-14.08c-1.21-4.84-3.1-10.56-3.52-15.77c-.26-3.37.86-9.99-2.24-9.85"/></svg>

React

import type { SVGProps } from "react";

export function NotoDroplet(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#4ec1f5" d="M63.38 4.07c-4.22.09-5.44 4.69-6.95 8.45s-10.5 24.21-16.32 34.53s-13.7 23.84-12.58 43.17c1.13 19.33 16.14 33.76 37.17 33.6c19.01-.14 35.64-11.1 36.32-34.91c.56-19.71-10.28-36.74-15.63-47.16c-3.18-6.2-13.59-26.95-14.69-29.52c-1.97-4.6-2.81-8.26-7.32-8.16"/><path fill="#b3e2fb" d="M47.38 64.42c-2.96.13-10 9.29-10 20.84s5.45 20.08 11.4 18.86c6.9-1.41 5.77-8.45 4.36-14.08c-1.21-4.84-3.1-10.56-3.52-15.77c-.26-3.37.86-9.99-2.24-9.85"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#4ec1f5" d="M63.38 4.07c-4.22.09-5.44 4.69-6.95 8.45s-10.5 24.21-16.32 34.53s-13.7 23.84-12.58 43.17c1.13 19.33 16.14 33.76 37.17 33.6c19.01-.14 35.64-11.1 36.32-34.91c.56-19.71-10.28-36.74-15.63-47.16c-3.18-6.2-13.59-26.95-14.69-29.52c-1.97-4.6-2.81-8.26-7.32-8.16"/><path fill="#b3e2fb" d="M47.38 64.42c-2.96.13-10 9.29-10 20.84s5.45 20.08 11.4 18.86c6.9-1.41 5.77-8.45 4.36-14.08c-1.21-4.84-3.1-10.56-3.52-15.77c-.26-3.37.86-9.99-2.24-9.85"/></svg>
</template>

CSS

.icon-droplet {
  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%20128%20128%22%3E%3Cpath%20fill%3D%22%234ec1f5%22%20d%3D%22M63.38%204.07c-4.22.09-5.44%204.69-6.95%208.45s-10.5%2024.21-16.32%2034.53s-13.7%2023.84-12.58%2043.17c1.13%2019.33%2016.14%2033.76%2037.17%2033.6c19.01-.14%2035.64-11.1%2036.32-34.91c.56-19.71-10.28-36.74-15.63-47.16c-3.18-6.2-13.59-26.95-14.69-29.52c-1.97-4.6-2.81-8.26-7.32-8.16%22%2F%3E%3Cpath%20fill%3D%22%23b3e2fb%22%20d%3D%22M47.38%2064.42c-2.96.13-10%209.29-10%2020.84s5.45%2020.08%2011.4%2018.86c6.9-1.41%205.77-8.45%204.36-14.08c-1.21-4.84-3.1-10.56-3.52-15.77c-.26-3.37.86-9.99-2.24-9.85%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%20128%20128%22%3E%3Cpath%20fill%3D%22%234ec1f5%22%20d%3D%22M63.38%204.07c-4.22.09-5.44%204.69-6.95%208.45s-10.5%2024.21-16.32%2034.53s-13.7%2023.84-12.58%2043.17c1.13%2019.33%2016.14%2033.76%2037.17%2033.6c19.01-.14%2035.64-11.1%2036.32-34.91c.56-19.71-10.28-36.74-15.63-47.16c-3.18-6.2-13.59-26.95-14.69-29.52c-1.97-4.6-2.81-8.26-7.32-8.16%22%2F%3E%3Cpath%20fill%3D%22%23b3e2fb%22%20d%3D%22M47.38%2064.42c-2.96.13-10%209.29-10%2020.84s5.45%2020.08%2011.4%2018.86c6.9-1.41%205.77-8.45%204.36-14.08c-1.21-4.84-3.1-10.56-3.52-15.77c-.26-3.37.86-9.99-2.24-9.85%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/noto/droplet.svg?color=%231a73e8&size=48

droplet emoji

The same emoji in other sets

More travel & places icons from Noto Emoji

Use the droplet emoji

SVG

React

Vue

CSS