Magnet icon
New Added in v0.5.0
A free pencil-style magnet icon, drawn by code from 2 arcs, 4 lines and 2 rectangles. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use magnet
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 { Magnet } from '@matita/icons/react';
<Magnet size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="magnet" />JavaScript
import { Magnet, toSvg } from '@matita/icons';
toSvg(Magnet, { 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-magnet" data-sketch="" aria-hidden="true"><path d="M3.65 11.78C3.7 11.2 3.64 9.41 3.97 8.31C4.3 7.22 4.87 6.05 5.64 5.21C6.41 4.37 7.53 3.71 8.59 3.28C9.65 2.85 10.86 2.62 12 2.62C13.14 2.62 14.36 2.84 15.41 3.28C16.46 3.73 17.49 4.44 18.29 5.27C19.08 6.1 19.79 7.17 20.18 8.26C20.56 9.35 20.53 11.21 20.6 11.8" stroke-width="1.472"/><path d="M7.56 11.61C7.57 11.29 7.43 10.28 7.59 9.68C7.75 9.08 8.12 8.46 8.54 7.98C8.96 7.51 9.53 7.11 10.11 6.84C10.69 6.58 11.37 6.39 12 6.4C12.63 6.4 13.33 6.58 13.88 6.87C14.43 7.15 14.92 7.64 15.3 8.12C15.69 8.6 15.98 9.16 16.2 9.74C16.42 10.33 16.53 11.32 16.6 11.63" stroke-width="1.712"/><path d="M3.44 10.61Q3.43 13.15 3.33 15.7" stroke-width="1.616"/><path d="M20.66 10.62Q20.42 13.28 20.39 15.95" stroke-width="1.648"/><path d="M7.64 10.62Q7.43 13.29 7.58 15.96" stroke-width="1.568"/><path d="M16.57 10.5Q16.49 13.18 16.32 15.85" stroke-width="1.424"/><path d="M2.08 15.67Q5.21 15.77 8.34 15.66M7.33 14.43Q7.65 18.21 7.59 21.99M8.5 21.18Q5.49 21.12 2.48 20.88M3.37 21.48Q3.3 17.95 3.5 14.41" stroke-width="1.552"/><path d="M15.04 15.6Q18.53 15.69 22.02 15.57M20.43 14.23Q20.33 18.06 20.56 21.89M21.46 21.12Q18.67 21.1 15.88 20.8M16.64 21.69Q16.42 18.05 16.36 14.42" stroke-width="1.52"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Magnet } from '@matita/icons/react';
<Magnet size={32} pencil />The file is icons/magnet.svg in the package (pencil/magnet.svg for the pencil variant). Matita 0.5.1.
02How it's drawn
The recipe for magnet
Magnet is not stored as a drawing. It is a recipe of 2 arcs, 4 lines and 2 rectangles 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 12 11 8.5 180 360;
A 12 11 4.5 180 360;
L 3.5 11 3.5 15.5;
L 20.5 11 20.5 15.5;
L 7.5 11 7.5 15.5;
L 16.5 11 16.5 15.5;
R 3.5 15.5 4 5.5;
R 16.5 15.5 4 5.5magnet as a number: 3835839
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 magnet. Seed 0 is the default.
magnet from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/magnet.svg.
True pixel sizes.