Icons

Audio has things a general icon set does not draw: a knob, a rack unit, the shape of a sawtooth, the response of a high shelf. These glyphs are audio/ui's own, drawn to sit together and to take the color of the text around them.

Weights

Each glyph comes in four weights, picked with the weight prop of its icon:

• regular is the thin line, 1.5 on the 24 grid. It is the default.
• bold is a thicker line, 2.25, for a small size or a state to show.
• duotone is the line over a tint of the same color. Closed shapes take the tint; a glyph made of lines has a soft shape behind it.
• fill is the solid shape, with its details cut out of it. A glyph made of lines only has no body to fill, so it is drawn as the bold line.

Use them

The icons are in @audio-ui/icons, on npm. Install it, and an icon is a React component named for what it draws, with Icon after: KnobIcon, TracksIcon, SineIcon, LowpassIcon. It is 1em wide unless size says otherwise, and it takes the color of its text.

bunnpmpnpmyarn
Copy
pnpm add @audio-ui/icons

Copy
import { KnobIcon } from "@audio-ui/icons/react";

<KnobIcon className="text-muted-foreground" size={20} weight="bold" />;

The package works without React. @audio-ui/icons holds the glyphs as data, the catalog and toSvg, which gives the text of an SVG file for any glyph in any weight; draw gives the same drawing as plain nodes, for a Vue, Svelte or custom element adapter to render. Copy SVG and Download on this page give the same text.

Draw one

A new glyph is a few shapes on a 24 grid with a 2px margin, drawn with one stroke width and round ends. Mark a closed shape as tinted so it has a body in duotone and fill, and a detail inside it as a knock so fill cuts it out. The package's tests draw every glyph in every weight, so a glyph that breaks one fails them.