Circle help icon
A free pencil-style circle help icon, drawn by code from 1 circle, 1 arc, 1 polyline and 1 dot. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use circle-help
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 { CircleHelp } from '@matita/icons/react';
<CircleHelp size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="circle-help" />JavaScript
import { CircleHelp, toSvg } from '@matita/icons';
toSvg(CircleHelp, { 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-circle-help" data-sketch="" aria-hidden="true"><path d="M10.05 3.7C10.63 3.72 12.4 3.62 13.55 3.82C14.7 4.01 15.98 4.23 16.95 4.85C17.91 5.46 18.78 6.5 19.35 7.5C19.92 8.51 20.21 9.73 20.36 10.88C20.51 12.03 20.53 13.27 20.26 14.4C19.99 15.53 19.47 16.75 18.73 17.65C17.99 18.56 16.89 19.29 15.83 19.82C14.76 20.35 13.52 20.75 12.33 20.84C11.13 20.92 9.79 20.76 8.67 20.32C7.55 19.88 6.45 19.1 5.61 18.23C4.78 17.36 4.1 16.23 3.67 15.1C3.23 13.97 2.91 12.66 2.99 11.46C3.07 10.27 3.58 9.05 4.13 7.95C4.67 6.85 5.31 5.62 6.24 4.86C7.17 4.11 8.5 3.75 9.7 3.41C10.9 3.08 12.26 2.68 13.44 2.87C14.62 3.06 16.24 4.29 16.8 4.58" stroke-width="1.792"/><path d="M9.36 9.77C9.41 9.59 9.55 9.01 9.7 8.67C9.86 8.33 10.02 8 10.27 7.73C10.51 7.46 10.83 7.16 11.17 7.04C11.51 6.93 11.94 6.98 12.31 7.03C12.68 7.07 13.1 7.14 13.4 7.34C13.69 7.54 13.93 7.91 14.09 8.23C14.25 8.55 14.32 8.91 14.37 9.27C14.43 9.63 14.53 10.05 14.42 10.39C14.31 10.72 13.85 11.14 13.73 11.29" stroke-width="1.472"/><path d="M14.3 10.74Q13.2 11.66 12.04 12.51Q12.07 13.42 12.03 14.34" stroke-width="1.568"/><path d="M12.14 16.85l.01 0" stroke-width="2.48"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { CircleHelp } from '@matita/icons/react';
<CircleHelp size={32} pencil />The file is icons/circle-help.svg in the package (pencil/circle-help.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for circle-help
Circle help is not stored as a drawing. It is a recipe of 1 circle, 1 arc, 1 polyline and 1 dot 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.
C 12 12 8.5;
A 12 9.5 2.5 180 400;
P 13.9 11.1 12 12.6 12 14;
O 12 17circle-help as a number: 3763183631
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 circle-help. Seed 0 is the default.
True pixel sizes.