Gift icon

A free pencil-style gift icon, drawn by code from 1 closed shape, 1 polyline, 1 line and 2 ellipses. Use it as an SVG, a React component, or by name. MIT licensed.

gift

01Use it

Use gift

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 { Gift } from '@matita/icons/react';

<Gift size={24} />

// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="gift" />

JavaScript

import { Gift, toSvg } from '@matita/icons';

toSvg(Gift, { size: 24 });   // SVG string

SVG

<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-gift" data-sketch="" aria-hidden="true"><path d="M3.37 7.82Q12 8.37 20.63 7.88Q20.55 9.92 20.35 11.94Q11.95 11.92 3.56 12.02Q3.28 9.93 3.37 7.82Q4.2 7.84 5.03 7.83" stroke-width="1.392"/><path d="M4.79 11.5Q5.05 16 5.07 20.51Q11.97 20.23 18.86 20.47Q18.82 16.01 19.1 11.56" stroke-width="1.488"/><path d="M12.13 7.65Q11.72 14.29 12.01 20.93" stroke-width="1.824"/><path d="M11 7.46C10.84 7.5 10.37 7.67 10.05 7.72C9.72 7.78 9.38 7.79 9.04 7.77C8.7 7.75 8.3 7.73 8 7.61C7.7 7.49 7.44 7.28 7.25 7.07C7.06 6.86 6.94 6.61 6.87 6.36C6.79 6.11 6.75 5.84 6.8 5.59C6.85 5.33 6.98 5.06 7.18 4.83C7.37 4.6 7.65 4.37 7.96 4.23C8.27 4.08 8.67 4 9.04 3.94C9.41 3.89 9.83 3.83 10.2 3.88C10.57 3.93 10.93 4.1 11.25 4.26C11.58 4.42 11.94 4.6 12.15 4.85C12.35 5.09 12.4 5.41 12.45 5.7C12.51 6 12.55 6.31 12.47 6.6C12.38 6.89 12.18 7.19 11.94 7.44C11.7 7.68 11.39 7.94 11.04 8.09C10.69 8.25 10.24 8.32 9.83 8.36C9.42 8.4 8.78 8.34 8.57 8.33" stroke-width="1.712"/><path d="M15.24 4.34C15.4 4.38 15.95 4.47 16.24 4.62C16.53 4.76 16.8 4.97 16.96 5.18C17.13 5.4 17.21 5.67 17.24 5.93C17.26 6.18 17.23 6.46 17.11 6.71C16.99 6.96 16.79 7.23 16.53 7.43C16.26 7.63 15.9 7.8 15.53 7.9C15.17 8.01 14.75 8.07 14.35 8.07C13.95 8.07 13.52 8.03 13.14 7.92C12.77 7.81 12.37 7.64 12.09 7.42C11.81 7.2 11.59 6.91 11.46 6.61C11.33 6.32 11.28 5.98 11.33 5.67C11.38 5.36 11.55 5.03 11.77 4.75C11.99 4.47 12.29 4.19 12.64 3.99C13 3.79 13.46 3.64 13.9 3.57C14.33 3.5 14.83 3.5 15.28 3.56C15.72 3.63 16.17 3.77 16.57 3.95C16.96 4.14 17.45 4.57 17.63 4.69" stroke-width="1.392"/></svg>

Pencil variant

import '@matita/icons/pencil.css';
import { Gift } from '@matita/icons/react';

<Gift size={32} pencil />

The file is icons/gift.svg in the package (pencil/gift.svg for the pencil variant). Matita 0.2.1.

02How it's drawn

The recipe for gift

Gift is not stored as a drawing. It is a recipe of 1 closed shape, 1 polyline, 1 line and 2 ellipses 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.

A · Recipe
Z 3.5 8 20.5 8 20.5 12 3.5 12;
P 5 12 5 20.5 19 20.5 19 12;
L 12 8 12 20.5;
E 9.5 6 2.5 1.8;
E 14.5 6 2.5 1.8
B · Plotted
C · Drawn
How it works

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.

seed 0
seed 1
seed 2
seed 3
seed 4

Five seeds of gift. Seed 0 is the default.

16 px
20 px
24 px
32 px
48 px
96 px

True pixel sizes.

Ink
Pencil