drop icon

drop-12-regular from Fluent UI System Icons by Microsoft Corporation · 12 Regular · MIT Free for personal and commercial use.

Name: drop-12-regular
Set: Fluent UI System Icons
Style: 12 Regular
Viewbox: 12×12
License: MIT

13 other variants in Fluent UI System Icons

drop-12-filled drop-16-filled drop-16-regular drop-20-filled drop-20-regular drop-24-filled drop-24-regular drop-28-filled drop-28-regular drop-32-filled drop-32-regular drop-48-filled drop-48-regular

The same icon in other sets

dropFramework7 Icons dropcss.gg drop-fillMingCute Icon dropMyna UI Icons dropPhosphor dropPixelarticons drop-fillRemix Icon drop-outlineTeenyicons

Use the drop icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12"><path fill="currentColor" d="M6 1a.5.5 0 0 1 .354.146v.002A15 15 0 0 1 8.1 3.217C8.806 4.244 9.5 5.597 9.5 7c0 1.337-.36 2.352-1.019 3.035C7.821 10.718 6.928 11 6 11s-1.822-.282-2.481-.965S2.5 8.337 2.5 7c0-1.403.694-2.756 1.4-3.783a15 15 0 0 1 1.745-2.07h.001A.5.5 0 0 1 6 1m0 1.216c-.338.358-.821.907-1.275 1.567C4.055 4.756 3.5 5.903 3.5 7c0 1.163.311 1.898.738 2.34S5.271 10 6 10s1.335-.218 1.762-.66S8.5 8.163 8.5 7c0-1.097-.556-2.244-1.225-3.217A13.4 13.4 0 0 0 6 2.216"/></svg>

React

import type { SVGProps } from "react";

export function FluentDrop12Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12"><path fill="currentColor" d="M6 1a.5.5 0 0 1 .354.146v.002A15 15 0 0 1 8.1 3.217C8.806 4.244 9.5 5.597 9.5 7c0 1.337-.36 2.352-1.019 3.035C7.821 10.718 6.928 11 6 11s-1.822-.282-2.481-.965S2.5 8.337 2.5 7c0-1.403.694-2.756 1.4-3.783a15 15 0 0 1 1.745-2.07h.001A.5.5 0 0 1 6 1m0 1.216c-.338.358-.821.907-1.275 1.567C4.055 4.756 3.5 5.903 3.5 7c0 1.163.311 1.898.738 2.34S5.271 10 6 10s1.335-.218 1.762-.66S8.5 8.163 8.5 7c0-1.097-.556-2.244-1.225-3.217A13.4 13.4 0 0 0 6 2.216"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 12 12"><path fill="currentColor" d="M6 1a.5.5 0 0 1 .354.146v.002A15 15 0 0 1 8.1 3.217C8.806 4.244 9.5 5.597 9.5 7c0 1.337-.36 2.352-1.019 3.035C7.821 10.718 6.928 11 6 11s-1.822-.282-2.481-.965S2.5 8.337 2.5 7c0-1.403.694-2.756 1.4-3.783a15 15 0 0 1 1.745-2.07h.001A.5.5 0 0 1 6 1m0 1.216c-.338.358-.821.907-1.275 1.567C4.055 4.756 3.5 5.903 3.5 7c0 1.163.311 1.898.738 2.34S5.271 10 6 10s1.335-.218 1.762-.66S8.5 8.163 8.5 7c0-1.097-.556-2.244-1.225-3.217A13.4 13.4 0 0 0 6 2.216"/></svg>
</template>

CSS

.icon-drop-12-regular {
  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%2012%2012%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%201a.5.5%200%200%201%20.354.146v.002A15%2015%200%200%201%208.1%203.217C8.806%204.244%209.5%205.597%209.5%207c0%201.337-.36%202.352-1.019%203.035C7.821%2010.718%206.928%2011%206%2011s-1.822-.282-2.481-.965S2.5%208.337%202.5%207c0-1.403.694-2.756%201.4-3.783a15%2015%200%200%201%201.745-2.07h.001A.5.5%200%200%201%206%201m0%201.216c-.338.358-.821.907-1.275%201.567C4.055%204.756%203.5%205.903%203.5%207c0%201.163.311%201.898.738%202.34S5.271%2010%206%2010s1.335-.218%201.762-.66S8.5%208.163%208.5%207c0-1.097-.556-2.244-1.225-3.217A13.4%2013.4%200%200%200%206%202.216%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%2012%2012%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%201a.5.5%200%200%201%20.354.146v.002A15%2015%200%200%201%208.1%203.217C8.806%204.244%209.5%205.597%209.5%207c0%201.337-.36%202.352-1.019%203.035C7.821%2010.718%206.928%2011%206%2011s-1.822-.282-2.481-.965S2.5%208.337%202.5%207c0-1.403.694-2.756%201.4-3.783a15%2015%200%200%201%201.745-2.07h.001A.5.5%200%200%201%206%201m0%201.216c-.338.358-.821.907-1.275%201.567C4.055%204.756%203.5%205.903%203.5%207c0%201.163.311%201.898.738%202.34S5.271%2010%206%2010s1.335-.218%201.762-.66S8.5%208.163%208.5%207c0-1.097-.556-2.244-1.225-3.217A13.4%2013.4%200%200%200%206%202.216%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/drop-12-regular.svg?color=%231a73e8&size=48