Clock icon
A free pencil-style clock icon, drawn by code from 1 circle and 1 polyline. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use clock
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 { Clock } from '@matita/icons/react';
<Clock size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="clock" />JavaScript
import { Clock, toSvg } from '@matita/icons';
toSvg(Clock, { 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-clock" data-sketch="" aria-hidden="true"><path d="M7.5 4.86C8.08 4.73 9.78 4.24 10.96 4.08C12.14 3.93 13.44 3.67 14.57 3.93C15.69 4.19 16.8 4.92 17.7 5.63C18.6 6.34 19.41 7.23 19.96 8.19C20.51 9.14 20.88 10.25 21.02 11.34C21.17 12.43 21.2 13.68 20.83 14.71C20.45 15.73 19.59 16.69 18.78 17.51C17.96 18.33 17.01 19.13 15.94 19.62C14.87 20.12 13.57 20.44 12.37 20.48C11.17 20.52 9.9 20.23 8.76 19.85C7.61 19.47 6.42 18.94 5.52 18.19C4.63 17.45 3.89 16.41 3.38 15.37C2.88 14.34 2.5 13.13 2.49 12C2.49 10.88 2.91 9.71 3.36 8.62C3.81 7.53 4.34 6.34 5.19 5.48C6.04 4.63 7.28 3.86 8.48 3.47C9.68 3.09 11.73 3.22 12.38 3.17" stroke-width="1.776"/><path d="M11.93 6.73Q12.08 9.46 11.87 12.2Q13.79 13.06 15.72 13.89" stroke-width="1.568"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Clock } from '@matita/icons/react';
<Clock size={32} pencil />The file is icons/clock.svg in the package (pencil/clock.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for clock
Clock is not stored as a drawing. It is a recipe of 1 circle 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.
C 12 12 8.5;
P 12 7 12 12 15.5 14clock as a number: 363073373
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 clock. Seed 0 is the default.
True pixel sizes.