Cloud icon
A free pencil-style cloud icon, drawn by code from 3 arcs and 1 line. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use cloud
One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.
React
import { Cloud } from '@matita/icons/react';
<Cloud size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="cloud" />JavaScript
import { Cloud, toSvg } from '@matita/icons';
toSvg(Cloud, { size: 24 }); // SVG stringSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-cloud" data-sketch="" aria-hidden="true"><path d="M7.99 18.52C7.7 18.49 6.79 18.54 6.26 18.36C5.72 18.18 5.21 17.82 4.79 17.44C4.37 17.05 3.99 16.57 3.75 16.05C3.51 15.53 3.32 14.88 3.36 14.32C3.4 13.76 3.69 13.17 3.99 12.69C4.28 12.21 4.69 11.78 5.13 11.45C5.57 11.12 6.37 10.83 6.62 10.71" stroke-width="1.488"/><path d="M6.99 10.32C7.14 9.95 7.45 8.74 7.88 8.1C8.31 7.45 8.93 6.87 9.58 6.45C10.23 6.03 11.02 5.71 11.79 5.59C12.55 5.47 13.44 5.5 14.18 5.74C14.91 5.98 15.6 6.5 16.18 7.03C16.76 7.56 17.4 8.61 17.64 8.92" stroke-width="1.776"/><path d="M17.24 9.42C17.53 9.5 18.48 9.65 18.98 9.93C19.49 10.22 19.91 10.7 20.28 11.15C20.66 11.59 21.06 12.08 21.24 12.62C21.43 13.16 21.43 13.8 21.4 14.38C21.36 14.97 21.3 15.62 21.04 16.15C20.79 16.68 20.34 17.17 19.87 17.55C19.41 17.92 18.83 18.26 18.26 18.4C17.69 18.54 16.76 18.39 16.46 18.38" stroke-width="1.68"/><path d="M7.29 18.62Q12.34 18.72 17.38 18.5" stroke-width="1.648"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Cloud } from '@matita/icons/react';
<Cloud size={32} pencil />The file is icons/cloud.svg in the package (pencil/cloud.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for cloud
Cloud is not stored as a drawing. It is a recipe of 3 arcs and 1 line on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.
A 7.5 14.5 4 90 250;
A 12.5 11 5.5 195 330;
A 17 14 4.5 280 450;
L 7.5 18.5 17 18.5cloud as a number: 449227134
Shapes: L line, P polyline, Z closed shape, R rectangle, C circle, E ellipse, A arc, Q curve, O dot. Separate shapes with ;. Edits stay on this page.
03Takes, sizes, pencil
Same icon, every way
Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.
Five seeds of cloud. Seed 0 is the default.
True pixel sizes.