Circle alert icon
A free pencil-style circle alert icon, drawn by code from 1 circle, 1 line and 1 dot. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use circle-alert
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 { CircleAlert } from '@matita/icons/react';
<CircleAlert size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="circle-alert" />JavaScript
import { CircleAlert, toSvg } from '@matita/icons';
toSvg(CircleAlert, { 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-circle-alert" data-sketch="" aria-hidden="true"><path d="M20.32 14.61C20.05 15.11 19.46 16.77 18.72 17.61C17.98 18.46 16.93 19.22 15.87 19.68C14.82 20.14 13.57 20.28 12.4 20.35C11.22 20.42 9.89 20.5 8.82 20.11C7.75 19.72 6.81 18.82 5.99 18.03C5.16 17.24 4.34 16.35 3.86 15.36C3.39 14.36 3.17 13.17 3.13 12.05C3.1 10.94 3.23 9.71 3.67 8.68C4.1 7.65 4.9 6.67 5.74 5.87C6.58 5.07 7.61 4.3 8.7 3.89C9.79 3.47 11.09 3.37 12.29 3.39C13.5 3.4 14.77 3.56 15.91 3.98C17.04 4.4 18.32 5.02 19.12 5.88C19.92 6.74 20.34 8.02 20.71 9.14C21.09 10.27 21.44 11.49 21.37 12.64C21.3 13.79 20.86 15.02 20.3 16.06C19.73 17.1 18.38 18.41 17.99 18.87" stroke-width="1.824"/><path d="M12.05 6.94Q12.12 10.13 12.1 13.31" stroke-width="1.648"/><path d="M12.04 16.23l.01 0" stroke-width="2.48"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { CircleAlert } from '@matita/icons/react';
<CircleAlert size={32} pencil />The file is icons/circle-alert.svg in the package (pencil/circle-alert.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for circle-alert
Circle alert is not stored as a drawing. It is a recipe of 1 circle, 1 line 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;
L 12 7.5 12 12.8;
O 12 16.2circle-alert as a number: 1691015434
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 circle-alert. Seed 0 is the default.
True pixel sizes.