Shopping cart icon
A free pencil-style shopping cart icon, drawn by code from 1 polyline and 2 circles. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use shopping-cart
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 { ShoppingCart } from '@matita/icons/react';
<ShoppingCart size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="shopping-cart" />JavaScript
import { ShoppingCart, toSvg } from '@matita/icons';
toSvg(ShoppingCart, { 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-shopping-cart" data-sketch="" aria-hidden="true"><path d="M2.5 3.38Q4.05 3.48 5.59 3.64Q6.52 9.69 8.04 15.62Q13.25 15.5 18.47 15.62Q19.77 11.4 20.36 7.03Q13.21 7.05 6.08 6.81" stroke-width="1.552"/><path d="M7.81 20.17C7.77 20.08 7.62 19.81 7.6 19.62C7.57 19.43 7.62 19.22 7.68 19.03C7.73 18.83 7.79 18.63 7.91 18.47C8.02 18.31 8.18 18.16 8.35 18.06C8.52 17.96 8.72 17.88 8.92 17.87C9.11 17.86 9.32 17.92 9.51 17.98C9.71 18.04 9.93 18.1 10.09 18.23C10.25 18.37 10.37 18.58 10.47 18.78C10.56 18.99 10.65 19.22 10.66 19.45C10.67 19.67 10.61 19.92 10.54 20.14C10.46 20.35 10.37 20.59 10.23 20.76C10.08 20.94 9.88 21.09 9.68 21.2C9.48 21.3 9.24 21.4 9.01 21.42C8.77 21.44 8.51 21.4 8.29 21.31C8.07 21.22 7.84 21.06 7.67 20.88C7.51 20.7 7.38 20.46 7.28 20.22C7.17 19.99 7.06 19.72 7.05 19.46C7.03 19.19 7.17 18.78 7.19 18.65" stroke-width="1.728"/><path d="M18.89 19.1C18.9 19.2 18.97 19.48 18.95 19.67C18.93 19.86 18.86 20.05 18.77 20.22C18.68 20.39 18.57 20.58 18.42 20.7C18.27 20.83 18.07 20.93 17.87 20.99C17.67 21.05 17.44 21.1 17.24 21.07C17.03 21.05 16.82 20.96 16.62 20.86C16.43 20.76 16.2 20.64 16.06 20.47C15.92 20.3 15.82 20.06 15.76 19.84C15.71 19.61 15.68 19.35 15.72 19.13C15.77 18.9 15.89 18.68 16.02 18.47C16.15 18.27 16.3 18.04 16.5 17.89C16.69 17.75 16.96 17.67 17.21 17.63C17.46 17.58 17.74 17.57 17.99 17.62C18.25 17.67 18.51 17.78 18.72 17.93C18.94 18.08 19.12 18.3 19.26 18.53C19.41 18.75 19.54 19.02 19.59 19.28C19.64 19.55 19.63 19.86 19.56 20.13C19.5 20.4 19.24 20.78 19.18 20.91" stroke-width="1.488"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { ShoppingCart } from '@matita/icons/react';
<ShoppingCart size={32} pencil />The file is icons/shopping-cart.svg in the package (pencil/shopping-cart.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for shopping-cart
Shopping cart is not stored as a drawing. It is a recipe of 1 polyline and 2 circles 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.
P 2.5 3.5 5.5 3.5 8 15.5 18.5 15.5 20.5 7 6.5 7;
C 9 19.5 1.4;
C 17.5 19.5 1.4shopping-cart as a number: 1394971806
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 shopping-cart. Seed 0 is the default.
True pixel sizes.