droplet icon
droplet from Bootstrap Icons by The Bootstrap Authors · Outline · MIT Free for personal and commercial use.
- Name
- droplet
- Set
- Bootstrap Icons
- Style
- Outline
- Viewbox
- 16×16
- License
- MIT
1 other variant in Bootstrap Icons
The same icon in other sets
dropletBoxIcons v2dropletBoxIcons v2 SoliddropletEmoji One (Colored)droplet-fillEva IconsdropletFont Awesome 6 SoliddropletFont Awesome SoliddropletFeather IconsdropletFluent EmojidropletFluent Emoji FlatdropletFluent Emoji High ContrastdropletFirefox OS EmojidropletHuge IconsdropletHumbleiconsdropletIconoirdropletLucidedropletMyna UI IconsdropletNoto EmojidropletOpenMojidropletStreamline EmojisdropletTabler IconsdropletTwitter Emoji
Related icons in Bootstrap Icons
Use the droplet icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="currentColor" fill-rule="evenodd"><path d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/><path d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z"/></g></svg>
React
import type { SVGProps } from "react";
export function BiDroplet(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="currentColor" fillRule="evenodd"><path d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/><path d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="currentColor" fill-rule="evenodd"><path d="M7.21.8C7.69.295 8 0 8 0q.164.544.371 1.038c.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8m.413 1.021A31 31 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/><path d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87z"/></g></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%2016%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.21.8C7.69.295%208%200%208%200q.164.544.371%201.038c.812%201.946%202.073%203.35%203.197%204.6C12.878%207.096%2014%208.345%2014%2010a6%206%200%200%201-12%200C2%206.668%205.58%202.517%207.21.8m.413%201.021A31%2031%200%200%200%205.794%203.99c-.726.95-1.436%202.008-1.96%203.07C3.304%208.133%203%209.138%203%2010a5%205%200%200%200%2010%200c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75%205.11%208.5%203.72%207.623%201.82z%22%2F%3E%3Cpath%20d%3D%22M4.553%207.776c.82-1.641%201.717-2.753%202.093-3.13l.708.708c-.29.29-1.128%201.311-1.907%202.87z%22%2F%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.21.8C7.69.295%208%200%208%200q.164.544.371%201.038c.812%201.946%202.073%203.35%203.197%204.6C12.878%207.096%2014%208.345%2014%2010a6%206%200%200%201-12%200C2%206.668%205.58%202.517%207.21.8m.413%201.021A31%2031%200%200%200%205.794%203.99c-.726.95-1.436%202.008-1.96%203.07C3.304%208.133%203%209.138%203%2010a5%205%200%200%200%2010%200c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75%205.11%208.5%203.72%207.623%201.82z%22%2F%3E%3Cpath%20d%3D%22M4.553%207.776c.82-1.641%201.717-2.753%202.093-3.13l.708.708c-.29.29-1.128%201.311-1.907%202.87z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bi/droplet.svg?color=%231a73e8&size=48
