Toggle right icon
A free pencil-style toggle right icon, drawn by code from 2 lines, 2 arcs and 1 circle. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use toggle-right
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 { ToggleRight } from '@matita/icons/react';
<ToggleRight size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="toggle-right" />JavaScript
import { ToggleRight, toSvg } from '@matita/icons';
toSvg(ToggleRight, { 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-toggle-right" data-sketch="" aria-hidden="true"><path d="M7.61 7.14Q11.96 6.93 16.3 7.07" stroke-width="1.776"/><path d="M7.38 17.02Q12 17.21 16.63 17.14" stroke-width="1.776"/><path d="M8.77 16.92C8.41 16.89 7.33 16.91 6.65 16.73C5.98 16.56 5.24 16.29 4.7 15.85C4.17 15.41 3.73 14.73 3.46 14.09C3.19 13.45 3.07 12.69 3.09 12C3.11 11.31 3.28 10.58 3.57 9.96C3.86 9.35 4.32 8.78 4.82 8.29C5.33 7.81 5.94 7.24 6.59 7.05C7.25 6.86 8.4 7.12 8.76 7.13" stroke-width="1.616"/><path d="M15.25 7.15C15.6 7.17 16.68 7.11 17.34 7.3C17.99 7.49 18.66 7.85 19.18 8.29C19.7 8.73 20.17 9.33 20.46 9.95C20.76 10.57 20.94 11.3 20.97 12C21 12.7 20.92 13.49 20.65 14.14C20.38 14.79 19.9 15.46 19.35 15.91C18.81 16.37 18.07 16.72 17.39 16.86C16.7 17.01 15.61 16.8 15.26 16.79" stroke-width="1.648"/><path d="M13.85 10.55C13.96 10.4 14.27 9.9 14.56 9.69C14.84 9.47 15.21 9.31 15.55 9.24C15.9 9.18 16.28 9.21 16.62 9.3C16.97 9.38 17.34 9.51 17.64 9.74C17.93 9.96 18.22 10.29 18.39 10.64C18.56 10.99 18.63 11.42 18.67 11.82C18.7 12.23 18.72 12.68 18.61 13.06C18.49 13.45 18.25 13.83 17.98 14.13C17.72 14.43 17.38 14.72 17.03 14.88C16.67 15.04 16.24 15.12 15.85 15.1C15.46 15.08 15.03 14.97 14.68 14.77C14.33 14.58 14.02 14.27 13.75 13.94C13.48 13.62 13.19 13.23 13.07 12.82C12.95 12.41 12.98 11.9 13.05 11.46C13.11 11.02 13.24 10.55 13.46 10.18C13.69 9.81 14.04 9.5 14.39 9.25C14.74 8.99 15.37 8.74 15.56 8.63" stroke-width="1.664"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { ToggleRight } from '@matita/icons/react';
<ToggleRight size={32} pencil />The file is icons/toggle-right.svg in the package (pencil/toggle-right.svg for the pencil variant). Matita 0.3.0.
02How it's drawn
The recipe for toggle-right
Toggle right is not stored as a drawing. It is a recipe of 2 lines, 2 arcs and 1 circle 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.
L 8 7 16 7;
L 8 17 16 17;
A 8 12 5 90 270;
A 16 12 5 -90 90;
C 16 12 2.6toggle-right as a number: 909908010
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 toggle-right. Seed 0 is the default.
True pixel sizes.