Cloud lightning icon
New Added in v0.5.0
A free pencil-style cloud lightning icon, drawn by code from 3 arcs, 2 lines and 1 polyline. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use cloud-lightning
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 { CloudLightning } from '@matita/icons/react';
<CloudLightning size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="cloud-lightning" />JavaScript
import { CloudLightning, toSvg } from '@matita/icons';
toSvg(CloudLightning, { 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-lightning" data-sketch="" aria-hidden="true"><path d="M7.91 15.55C7.62 15.52 6.7 15.57 6.19 15.37C5.68 15.17 5.2 14.75 4.82 14.35C4.45 13.95 4.12 13.47 3.92 12.97C3.72 12.47 3.63 11.89 3.64 11.35C3.65 10.81 3.76 10.22 3.99 9.73C4.22 9.24 4.61 8.76 5.03 8.42C5.46 8.08 6.29 7.83 6.54 7.71" stroke-width="1.648"/><path d="M7.19 7.07C7.34 6.72 7.67 5.63 8.07 5C8.47 4.37 8.98 3.7 9.6 3.29C10.21 2.89 11.03 2.65 11.78 2.55C12.53 2.45 13.38 2.46 14.09 2.69C14.8 2.91 15.47 3.41 16.04 3.9C16.61 4.4 17.27 5.38 17.51 5.67" stroke-width="1.616"/><path d="M17.38 6.37C17.7 6.49 18.73 6.76 19.28 7.13C19.83 7.49 20.29 8.02 20.66 8.56C21.03 9.1 21.38 9.74 21.47 10.38C21.57 11.01 21.43 11.74 21.24 12.37C21.05 13 20.77 13.71 20.32 14.18C19.88 14.64 19.18 14.94 18.56 15.17C17.93 15.39 16.91 15.46 16.58 15.51" stroke-width="1.6"/><path d="M7.15 15.68Q9.08 15.57 11.01 15.45" stroke-width="1.664"/><path d="M14.41 15.6Q15.85 15.6 17.28 15.57" stroke-width="1.6"/><path d="M13.16 15.03Q11.74 17 10.43 19.03Q12.29 18.88 14.14 19.03Q12.55 20.77 11.21 22.71" stroke-width="1.712"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { CloudLightning } from '@matita/icons/react';
<CloudLightning size={32} pencil />The file is icons/cloud-lightning.svg in the package (pencil/cloud-lightning.svg for the pencil variant). Matita 0.5.1.
02How it's drawn
The recipe for cloud-lightning
Cloud lightning is not stored as a drawing. It is a recipe of 3 arcs, 2 lines and 1 polyline 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 11.5 4 90 250;
A 12.5 8 5.5 195 330;
A 17 11 4.5 280 450;
L 7.5 15.5 10.5 15.5;
L 15 15.5 17 15.5;
P 13 15.5 10.5 19 14 19 11.5 22.5cloud-lightning as a number: 1999796657
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-lightning. Seed 0 is the default.
cloud-lightning from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/cloud-lightning.svg.
True pixel sizes.