# Icons > The glyphs audio/ui draws for itself: one thin stroke on a 24 grid, in four weights, named for what they draw. Search them, pick a weight and a size, then copy the SVG. 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. | Icon | Component | Category | Keywords | | --- | --- | --- | --- | | Knob | `KnobIcon` | Controls | control, dial, rotary, parameter | | Tracks | `TracksIcon` | Editors | arrangement, clips, timeline, daw | | Rack | `RackIcon` | Effects | device, plugin, effect, unit | | Faders | `FadersIcon` | Controls | mixer, levels, channels, sliders | | Waveform | `WaveformIcon` | Displays | engine, signal, bars, meter | | Envelope | `EnvelopeIcon` | Editors | adsr, automation, curve | | XYPad | `XYPadIcon` | Controls | pad, two values, position, xy | | Pad | `PadIcon` | Controls | drum, trigger, strike, velocity | | Piano | `PianoIcon` | Controls | keyboard, keys, notes | | Meter | `MeterIcon` | Displays | level, peak, vu, bar | | Gauge | `GaugeIcon` | Displays | needle, vu, dial, tuner | | Spectrum | `SpectrumIcon` | Displays | analyzer, frequency, fft, bars | | Scope | `ScopeIcon` | Displays | oscilloscope, signal, trace | | Plot | `PlotIcon` | Displays | graph, curve, axes, eq | | Play | `PlayIcon` | Transport | start, run | | Pause | `PauseIcon` | Transport | hold | | Stop | `StopIcon` | Transport | halt, end | | Record | `RecordIcon` | Transport | arm, capture | | Loop | `LoopIcon` | Transport | repeat, cycle, region | | Mic | `MicIcon` | Signal | microphone, input, voice | | Speaker | `SpeakerIcon` | Signal | output, monitor, loudspeaker | | Headphones | `HeadphonesIcon` | Signal | output, cue, monitor | | Midi | `MidiIcon` | Signal | din, keyboard, controller, plug | | Sequencer | `SequencerIcon` | Editors | steps, pattern, drum machine | | PianoRoll | `PianoRollIcon` | Editors | notes, midi, editor | | Compressor | `CompressorIcon` | Effects | dynamics, curve, knee, ratio | | Delay | `DelayIcon` | Effects | echo, repeat, feedback | | Reverb | `ReverbIcon` | Effects | room, space, tail | | Distortion | `DistortionIcon` | Effects | overdrive, clip, saturation | | Stereo | `StereoIcon` | Signal | channels, left right, width, pan | | Mono | `MonoIcon` | Signal | one channel, centre, summed, single | | Tape | `TapeIcon` | Signal | cassette, reel, recording, lo-fi | | Vinyl | `VinylIcon` | Signal | record, disc, turntable, dj | | Clip | `ClipIcon` | Editors | region, audio, waveform, arrangement | | Automation | `AutomationIcon` | Editors | points, line, parameter, envelope | | Magnet | `MagnetIcon` | Editors | snap, grid, quantize | | Sine | `SineIcon` | Oscillators | wave, oscillator, smooth | | Square | `SquareIcon` | Oscillators | wave, oscillator, pulse | | Sawtooth | `SawtoothIcon` | Oscillators | wave, oscillator, saw, ramp | | Triangle | `TriangleIcon` | Oscillators | wave, oscillator | | Lowpass | `LowpassIcon` | Filters | filter, cut, response | | Highpass | `HighpassIcon` | Filters | filter, cut, response | | Bandpass | `BandpassIcon` | Filters | filter, band, response | | Notch | `NotchIcon` | Filters | filter, reject, response | | Lowshelf | `LowshelfIcon` | Filters | filter, eq, shelf, bass | | Highshelf | `HighshelfIcon` | Filters | filter, eq, shelf, treble | | Peak | `PeakIcon` | Filters | filter, eq, bell, band | | Metronome | `MetronomeIcon` | Transport | start, begin, count in, tempo, get started | | TuningFork | `TuningForkIcon` | Docs | introduction, about, reference, pitch | | Jack | `JackIcon` | Signal | install, installation, plug, connect | | Patchbay | `PatchbayIcon` | Signal | registry, sockets, patch, panel | | Shapes | `ShapesIcon` | Docs | primitives, circle, square | | Braces | `BracesIcon` | Docs | code, headless, css, curly | | Fader | `FaderIcon` | Controls | theme, tokens, values, mixer | | Playhead | `PlayheadIcon` | Editors | roadmap, timeline, plan, transport | | Grid | `GridIcon` | Docs | catalog, icons, tiles | | Note | `NoteIcon` | Docs | introduction, music, welcome, overview | | Insert | `InsertIcon` | Docs | install, installation, add, rack | | Crate | `CrateIcon` | Docs | registry, catalog, records, collection | | Dial | `DialIcon` | Docs | headless, unstyled, skeleton, knob | | Contrast | `ContrastIcon` | Docs | theme, tokens, light, dark | | Sparkle | `SparkleIcon` | Agents | ai, skill, magic, star | | Bot | `BotIcon` | Agents | llm, robot, assistant | ## 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. ```sh npm install @audio-ui/icons ``` ```tsx import { KnobIcon } from "@audio-ui/icons/react"; ; ``` 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.