Maru Icons

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.

Browse and customize the icon collection to find a glyph and copy its import or SVG.

Install and use with React

pnpm add maru-icons

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:

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 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 source, license and contribution guide for the full terms and how to suggest a missing icon.