Surprised icon
New Added in v0.5.0
A free pencil-style surprised icon, drawn by code from 2 circles and 2 dots. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use surprised
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 { Surprised } from '@matita/icons/react';
<Surprised size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="surprised" />JavaScript
import { Surprised, toSvg } from '@matita/icons';
toSvg(Surprised, { 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-surprised" data-sketch="" aria-hidden="true"><path d="M17.09 5.08C17.48 5.53 18.88 6.76 19.47 7.78C20.07 8.81 20.54 10.06 20.65 11.23C20.76 12.41 20.55 13.75 20.13 14.86C19.72 15.96 18.98 17.03 18.17 17.89C17.36 18.74 16.34 19.49 15.26 19.99C14.18 20.48 12.92 20.85 11.72 20.87C10.52 20.89 9.16 20.64 8.06 20.12C6.96 19.6 5.88 18.72 5.12 17.77C4.36 16.81 3.86 15.56 3.53 14.37C3.19 13.18 2.99 11.86 3.12 10.63C3.25 9.4 3.66 8.04 4.32 6.99C4.99 5.95 6.05 5.01 7.1 4.36C8.15 3.71 9.44 3.23 10.65 3.08C11.86 2.92 13.16 3.12 14.37 3.42C15.58 3.71 16.9 4.11 17.89 4.86C18.88 5.61 19.74 6.77 20.3 7.91C20.87 9.05 21.12 11.07 21.29 11.7" stroke-width="1.632"/><path d="M10.43 16.89C10.39 16.78 10.21 16.45 10.18 16.21C10.15 15.98 10.17 15.71 10.23 15.48C10.28 15.24 10.39 15.01 10.52 14.81C10.65 14.6 10.82 14.42 11 14.26C11.19 14.11 11.42 13.94 11.65 13.87C11.88 13.81 12.15 13.85 12.41 13.88C12.66 13.92 12.95 13.95 13.18 14.08C13.4 14.21 13.58 14.46 13.75 14.68C13.92 14.91 14.12 15.16 14.2 15.43C14.27 15.7 14.23 16.02 14.2 16.32C14.18 16.62 14.16 16.94 14.04 17.22C13.92 17.49 13.72 17.75 13.5 17.96C13.28 18.17 13.02 18.38 12.74 18.49C12.46 18.6 12.13 18.64 11.82 18.63C11.51 18.62 11.18 18.56 10.89 18.43C10.6 18.31 10.32 18.09 10.1 17.86C9.87 17.62 9.63 17.15 9.54 17.01" stroke-width="1.52"/><path d="M9.15 9.58l.01 0M15.02 9.42l.01 0" stroke-width="2.48"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Surprised } from '@matita/icons/react';
<Surprised size={32} pencil />The file is icons/surprised.svg in the package (pencil/surprised.svg for the pencil variant). Matita 0.5.1.
02How it's drawn
The recipe for surprised
Surprised is not stored as a drawing. It is a recipe of 2 circles and 2 dots 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;
O 9 9.5;
O 15 9.5;
C 12 16 1.8surprised as a number: 4147588314
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 surprised. Seed 0 is the default.
surprised from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/surprised.svg.
True pixel sizes.