Target icon
New Added in v0.4.0
A free pencil-style target icon, drawn by code from 2 circles and 1 dot. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use target
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 { Target } from '@matita/icons/react';
<Target size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="target" />JavaScript
import { Target, toSvg } from '@matita/icons';
toSvg(Target, { 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-target" data-sketch="" aria-hidden="true"><path d="M3.77 14.82C3.69 14.24 3.16 12.44 3.29 11.31C3.42 10.18 4.02 9.08 4.56 8.03C5.1 6.98 5.66 5.79 6.55 5.02C7.45 4.26 8.74 3.68 9.92 3.44C11.1 3.2 12.45 3.32 13.62 3.58C14.79 3.84 15.95 4.34 16.97 4.98C17.99 5.61 19.12 6.4 19.74 7.39C20.36 8.38 20.5 9.71 20.68 10.91C20.86 12.1 21.12 13.44 20.81 14.58C20.5 15.71 19.63 16.82 18.8 17.72C17.98 18.61 16.94 19.39 15.84 19.94C14.74 20.49 13.43 20.99 12.21 21.03C10.99 21.06 9.67 20.63 8.51 20.16C7.36 19.69 6.21 19.04 5.29 18.19C4.37 17.34 3.43 16.24 3.02 15.08C2.6 13.93 2.69 12.51 2.8 11.26C2.92 10.01 3.57 8.18 3.72 7.56" stroke-width="1.776"/><path d="M8.31 9.41C8.47 9.22 8.88 8.56 9.28 8.3C9.68 8.04 10.24 7.96 10.72 7.84C11.2 7.73 11.69 7.59 12.18 7.6C12.67 7.6 13.19 7.7 13.66 7.87C14.12 8.03 14.57 8.29 14.96 8.59C15.34 8.88 15.7 9.24 15.98 9.64C16.26 10.03 16.51 10.49 16.63 10.96C16.76 11.42 16.77 11.94 16.72 12.41C16.67 12.89 16.52 13.38 16.31 13.82C16.1 14.25 15.82 14.69 15.47 15.03C15.13 15.37 14.69 15.65 14.25 15.87C13.81 16.09 13.32 16.27 12.84 16.37C12.35 16.47 11.82 16.53 11.31 16.49C10.81 16.44 10.27 16.32 9.82 16.1C9.36 15.89 8.93 15.55 8.59 15.19C8.25 14.83 8.01 14.38 7.79 13.95C7.56 13.51 7.32 13.05 7.25 12.58C7.19 12.11 7.36 11.37 7.38 11.12" stroke-width="1.728"/><path d="M12.08 12.02l.01 0" stroke-width="2.48"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Target } from '@matita/icons/react';
<Target size={32} pencil />The file is icons/target.svg in the package (pencil/target.svg for the pencil variant). Matita 0.4.0.
02How it's drawn
The recipe for target
Target is not stored as a drawing. It is a recipe of 2 circles 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;
C 12 12 4.5;
O 12 12target as a number: 845187144
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 target. Seed 0 is the default.
target from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/target.svg.
True pixel sizes.