Droplets icon
A hand-drawn droplets icon that animates on its own: an SVG on a 24px grid in thin, regular and bold strokes. Free to download and use in the apps you build (LumioUI License). It takes your text colour through currentColor.
- Category
- Nature
- Grid
- 24 × 24
- Strokes
- 1.5 · 2 · 2.5
- Name
droplets
Stroke weights and sizes
Use it in React Native
Paste the SVG into react-native-svg's SvgXml. The Icon component covers a curated set by name, and Animated Icons plays the motion natively.
TSX DropletsIcon.tsx
import { SvgXml } from "react-native-svg";
const DropletsIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M9.9 19.17C6.4 19.17 4 16.47 4 13.07C4 10.37 6.5 7.57 8.2 5.77C9.1 4.77 10.6 4.77 11.5 5.77C13.3 7.57 15.8 10.37 15.8 13.07C15.8 16.47 13.4 19.17 9.9 19.17Z"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6.8 13.47C6.8 14.77 7.7 15.87 9 16.07"></path></g><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M16.8 12.87C14.9 12.87 13.6 11.37 13.6 9.57C13.6 8.07 15 6.57 15.8 5.67C16.3 5.07 17.2 5.07 17.7 5.67C18.6 6.67 20 8.07 20 9.57C20 11.37 18.6 12.87 16.8 12.87Z"></path></g></svg>`;
<SvgXml xml={DropletsIcon} width={24} height={24} color="#111" />SVG code
The still glyph. The animated version, linked above, plays its motion on its own with SMIL, so it needs no script.
SVG droplets.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M9.9 19.17C6.4 19.17 4 16.47 4 13.07C4 10.37 6.5 7.57 8.2 5.77C9.1 4.77 10.6 4.77 11.5 5.77C13.3 7.57 15.8 10.37 15.8 13.07C15.8 16.47 13.4 19.17 9.9 19.17Z"></path><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6.8 13.47C6.8 14.77 7.7 15.87 9 16.07"></path></g><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M16.8 12.87C14.9 12.87 13.6 11.37 13.6 9.57C13.6 8.07 15 6.57 15.8 5.67C16.3 5.07 17.2 5.07 17.7 5.67C18.6 6.67 20 8.07 20 9.57C20 11.37 18.6 12.87 16.8 12.87Z"></path></g></svg>On the web, link it straight from the CDN:
HTML index.html
<img src="https://cdn.lumioui.com/iconset/static/droplets.svg" width="24" height="24" alt="Droplets" />
