Music icon
A free pencil-style music icon, drawn by code from 2 circles and 1 polyline. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use music
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 { Music } from '@matita/icons/react';
<Music size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="music" />JavaScript
import { Music, toSvg } from '@matita/icons';
toSvg(Music, { 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-music" data-sketch="" aria-hidden="true"><path d="M8.86 15.9C8.96 16.02 9.3 16.33 9.45 16.59C9.59 16.86 9.7 17.18 9.72 17.48C9.74 17.78 9.67 18.11 9.55 18.4C9.44 18.69 9.24 18.95 9.04 19.19C8.83 19.44 8.6 19.68 8.32 19.85C8.04 20.03 7.71 20.18 7.37 20.24C7.04 20.31 6.65 20.34 6.31 20.27C5.97 20.2 5.65 20.01 5.35 19.83C5.05 19.64 4.74 19.43 4.53 19.16C4.31 18.89 4.16 18.55 4.06 18.22C3.97 17.88 3.96 17.52 3.98 17.17C3.99 16.82 4.04 16.44 4.18 16.1C4.32 15.77 4.54 15.42 4.82 15.17C5.09 14.91 5.46 14.71 5.82 14.57C6.18 14.43 6.58 14.38 6.98 14.35C7.37 14.33 7.81 14.31 8.19 14.42C8.56 14.54 8.92 14.79 9.24 15.04C9.55 15.29 9.94 15.77 10.08 15.92" stroke-width="1.584"/><path d="M15.78 17.65C15.65 17.54 15.21 17.25 15 16.97C14.79 16.7 14.6 16.34 14.52 15.98C14.45 15.63 14.49 15.22 14.57 14.86C14.64 14.5 14.78 14.13 14.98 13.81C15.17 13.49 15.44 13.16 15.75 12.96C16.06 12.76 16.47 12.67 16.84 12.64C17.21 12.6 17.62 12.64 17.98 12.77C18.34 12.9 18.71 13.13 18.98 13.41C19.24 13.69 19.45 14.08 19.59 14.46C19.73 14.84 19.83 15.28 19.82 15.69C19.82 16.1 19.72 16.55 19.55 16.92C19.38 17.3 19.12 17.68 18.81 17.96C18.5 18.23 18.11 18.48 17.71 18.58C17.32 18.69 16.86 18.68 16.45 18.61C16.04 18.53 15.61 18.38 15.25 18.15C14.9 17.92 14.54 17.58 14.31 17.2C14.08 16.82 13.97 16.1 13.9 15.89" stroke-width="1.584"/><path d="M9.63 18.04Q9.32 11.44 9.49 4.83Q14.53 4.06 19.5 2.96Q19.05 9.34 19.59 15.71" stroke-width="1.392"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Music } from '@matita/icons/react';
<Music size={32} pencil />The file is icons/music.svg in the package (pencil/music.svg for the pencil variant). Matita 0.3.0.
02How it's drawn
The recipe for music
Music is not stored as a drawing. It is a recipe of 2 circles and 1 polyline 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 7 17.5 2.5;
C 17 15.5 2.5;
P 9.5 17.5 9.5 5 19.5 3 19.5 15.5music as a number: 2677821396
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 music. Seed 0 is the default.
True pixel sizes.