# Maru Icons

> Use SVG and React icons for audio controls, instruments, routing and everyday interfaces.

Canonical: https://maru.audio/docs/maru-icons
Documentation index: https://maru.audio/llms.txt

Maru Icons provides interface and audio symbols for plugin faces, browser
instruments and apps. Use it alongside PluginUI controls or in an independent
project. The icons do not need the Maru audio runtime.

<a href="https://pluginui.com/icons" target="_blank" rel="noopener noreferrer">Browse and customize the icon collection</a>
to find a glyph and copy its import or SVG.

## Install and use with React

```sh
pnpm add maru-icons
```

```tsx
import { HeadphonesIcon, SineWaveIcon } from "maru-icons/react"

export function MonitorButton() {
  return (
    <button type="button" aria-label="Monitor audio">
      <HeadphonesIcon size={20} />
    </button>
  )
}

export function OscillatorSymbol() {
  return <SineWaveIcon size={32} aria-label="Sine oscillator" />
}
```

Named imports are tree-shakable. You can also import an individual component
from a path such as `maru-icons/react/sine-wave`.

Icons default to 24 pixels and inherit `currentColor`. Set `size`, `color`
and `strokeWidth` as needed; standard SVG props and refs are supported.
`nonScalingStroke` keeps stroke thickness stable when an SVG is scaled.
React 18 and 19 are supported.

## Use SVG without React

Static files are available at `maru-icons/svg/<id>.svg`. To generate SVG markup:

```js
import { iconCatalog, iconToSvg } from "maru-icons"

const icon = iconCatalog.find((entry) => entry.name === "sine-wave")
if (icon) {
  const svg = iconToSvg(icon, { size: 48, color: "currentColor" })
}
```

## Keep controls accessible

Icons are decorative by default. Put the accessible name on an icon button,
as in the monitor example. Give a meaningful standalone icon an `aria-label`
or `title`. A symbol should support the control's label and state; it should
not be the only way to discover what a control does.

For a consistent face, inherit icon color from the surrounding control and
choose sizes that fit its existing spacing. The [customization guide](https://maru.audio/docs/customizing-plugin-ui.md)
explains how to scope styles to your module.

## License and contributions

Use, modification, redistribution and resale are allowed under the Maru Icons
License. Preserve the applicable copyright and license notices, including
notices for curated third-party artwork. Maru logo and wave icons are brand
marks; the copyright license does not grant trademark rights or permission to
imply endorsement.

See the <a href="https://github.com/maru-audio/maru-icons" target="_blank" rel="noopener noreferrer">source, license and contribution guide</a>
for the full terms and how to suggest a missing icon.