At sign icon
A free pencil-style at sign icon, drawn by code from 1 circle, 1 line, 1 curve and 1 arc. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use at-sign
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 { AtSign } from '@matita/icons/react';
<AtSign size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="at-sign" />JavaScript
import { AtSign, toSvg } from '@matita/icons';
toSvg(AtSign, { 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-at-sign" data-sketch="" aria-hidden="true"><path d="M13.78 15C13.55 15.08 12.91 15.41 12.44 15.49C11.98 15.57 11.44 15.6 10.99 15.47C10.54 15.35 10.14 15.01 9.76 14.72C9.37 14.43 8.92 14.12 8.68 13.71C8.44 13.31 8.37 12.77 8.33 12.28C8.28 11.79 8.25 11.25 8.4 10.79C8.55 10.33 8.89 9.9 9.22 9.52C9.55 9.14 9.92 8.71 10.36 8.49C10.81 8.27 11.38 8.24 11.89 8.22C12.41 8.2 12.97 8.2 13.45 8.37C13.94 8.53 14.43 8.85 14.8 9.21C15.17 9.57 15.48 10.05 15.67 10.53C15.87 11.01 15.98 11.57 15.97 12.08C15.97 12.6 15.83 13.14 15.64 13.64C15.45 14.13 15.2 14.69 14.82 15.06C14.44 15.44 13.89 15.72 13.37 15.89C12.85 16.06 11.99 16.07 11.71 16.11" stroke-width="1.568"/><path d="M15.32 7.51Q15.5 10.74 15.65 13.96" stroke-width="1.808"/><path d="M15.6 13.31Q16.1 17.61 20.92 13.17" stroke-width="1.392"/><path d="M20.14 14.71C20.19 14.1 20.56 12.25 20.42 11.06C20.28 9.88 19.9 8.62 19.3 7.59C18.7 6.57 17.79 5.58 16.81 4.91C15.82 4.24 14.57 3.78 13.39 3.59C12.21 3.4 10.9 3.48 9.74 3.79C8.59 4.09 7.37 4.66 6.46 5.43C5.55 6.19 4.78 7.28 4.26 8.37C3.74 9.46 3.34 10.76 3.35 11.94C3.37 13.13 3.86 14.37 4.36 15.46C4.86 16.56 5.47 17.75 6.35 18.53C7.23 19.31 8.5 19.81 9.65 20.12C10.81 20.43 12.11 20.57 13.27 20.38C14.43 20.2 16.06 19.24 16.62 19.01" stroke-width="1.52"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { AtSign } from '@matita/icons/react';
<AtSign size={32} pencil />The file is icons/at-sign.svg in the package (pencil/at-sign.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for at-sign
At sign is not stored as a drawing. It is a recipe of 1 circle, 1 line, 1 curve and 1 arc 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 3.5;
L 15.5 8 15.5 13.5;
Q 15.5 13.5 16 17.5 20.4 13.5;
A 12 12 8.5 10 -295at-sign as a number: 1884462522
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 at-sign. Seed 0 is the default.
True pixel sizes.