Cloud Cog icon
A hand-drawn cloud cog 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
- Files
- Grid
- 24 × 24
- Strokes
- 1.5 · 2 · 2.5
- Name
cloud-cog
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 CloudCogIcon.tsx
import { SvgXml } from "react-native-svg";
const CloudCogIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6.55 16.77C4.25 16.77 2.45 14.87 2.45 12.57C2.45 10.57 3.95 8.87 5.95 8.47C6.35 6.07 8.35 4.17 10.85 4.17C13.75 4.17 16.15 6.27 16.65 9.07C16.85 9.07 17.05 8.97 17.35 8.97C19.65 8.97 21.55 10.87 21.55 13.17C21.55 15.47 19.65 17.37 17.35 17.37L16.55 17.37"></path><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M13.75 17.55L13.81 17.68Q13.87 17.8 14.02 18.01Q14.17 18.22 14.28 18.48Q14.38 18.73 14.34 18.92L14.29 19.11L14.1 19.16Q13.91 19.2 13.66 19.09Q13.4 18.99 13.19 18.84Q12.98 18.69 12.86 18.63L12.73 18.57L12.64 18.69Q12.56 18.8 12.46 19.04Q12.35 19.27 12.18 19.49Q12.02 19.71 11.83 19.77L11.64 19.83L11.5 19.68Q11.37 19.53 11.34 19.26Q11.3 18.99 11.32 18.73Q11.35 18.47 11.34 18.34L11.32 18.2L11.19 18.19Q11.05 18.17 10.79 18.2Q10.53 18.22 10.26 18.18Q9.99 18.15 9.84 18.02L9.69 17.88L9.75 17.69Q9.81 17.5 10.03 17.34Q10.25 17.17 10.48 17.07Q10.72 16.96 10.84 16.88L10.95 16.79L10.89 16.66Q10.83 16.54 10.68 16.33Q10.53 16.12 10.43 15.87Q10.32 15.61 10.37 15.42L10.41 15.23L10.6 15.19Q10.79 15.14 11.04 15.25Q11.3 15.35 11.51 15.5Q11.72 15.65 11.85 15.71L11.97 15.77L12.05 15.65Q12.14 15.54 12.25 15.3Q12.35 15.07 12.52 14.85Q12.68 14.63 12.87 14.57L13.06 14.51L13.2 14.66Q13.33 14.81 13.37 15.08Q13.4 15.35 13.38 15.61Q13.35 15.87 13.37 16L13.38 16.14L13.52 16.16Q13.65 16.17 13.91 16.15Q14.17 16.12 14.44 16.16Q14.71 16.19 14.86 16.33L15.01 16.46L14.73 16.82Q14.45 17.17 14.21 17.27Q13.98 17.38 13.87 17.46L13.75 17.55Z"></path><circle stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" cx="12.35" cy="17.17" r="1"></circle></g></svg>`;
<SvgXml xml={CloudCogIcon} 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 cloud-cog.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6.55 16.77C4.25 16.77 2.45 14.87 2.45 12.57C2.45 10.57 3.95 8.87 5.95 8.47C6.35 6.07 8.35 4.17 10.85 4.17C13.75 4.17 16.15 6.27 16.65 9.07C16.85 9.07 17.05 8.97 17.35 8.97C19.65 8.97 21.55 10.87 21.55 13.17C21.55 15.47 19.65 17.37 17.35 17.37L16.55 17.37"></path><g><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M13.75 17.55L13.81 17.68Q13.87 17.8 14.02 18.01Q14.17 18.22 14.28 18.48Q14.38 18.73 14.34 18.92L14.29 19.11L14.1 19.16Q13.91 19.2 13.66 19.09Q13.4 18.99 13.19 18.84Q12.98 18.69 12.86 18.63L12.73 18.57L12.64 18.69Q12.56 18.8 12.46 19.04Q12.35 19.27 12.18 19.49Q12.02 19.71 11.83 19.77L11.64 19.83L11.5 19.68Q11.37 19.53 11.34 19.26Q11.3 18.99 11.32 18.73Q11.35 18.47 11.34 18.34L11.32 18.2L11.19 18.19Q11.05 18.17 10.79 18.2Q10.53 18.22 10.26 18.18Q9.99 18.15 9.84 18.02L9.69 17.88L9.75 17.69Q9.81 17.5 10.03 17.34Q10.25 17.17 10.48 17.07Q10.72 16.96 10.84 16.88L10.95 16.79L10.89 16.66Q10.83 16.54 10.68 16.33Q10.53 16.12 10.43 15.87Q10.32 15.61 10.37 15.42L10.41 15.23L10.6 15.19Q10.79 15.14 11.04 15.25Q11.3 15.35 11.51 15.5Q11.72 15.65 11.85 15.71L11.97 15.77L12.05 15.65Q12.14 15.54 12.25 15.3Q12.35 15.07 12.52 14.85Q12.68 14.63 12.87 14.57L13.06 14.51L13.2 14.66Q13.33 14.81 13.37 15.08Q13.4 15.35 13.38 15.61Q13.35 15.87 13.37 16L13.38 16.14L13.52 16.16Q13.65 16.17 13.91 16.15Q14.17 16.12 14.44 16.16Q14.71 16.19 14.86 16.33L15.01 16.46L14.73 16.82Q14.45 17.17 14.21 17.27Q13.98 17.38 13.87 17.46L13.75 17.55Z"></path><circle stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" cx="12.35" cy="17.17" r="1"></circle></g></svg>On the web, link it straight from the CDN:
HTML index.html
<img src="https://cdn.lumioui.com/iconset/static/cloud-cog.svg" width="24" height="24" alt="Cloud Cog" />
