ChordMuse IconMuseby ChordMuse v1.0.0

199 music icons, drawn by hand.

Notation, instruments, playback, studio gear and more, all on one 24px grid with a 1.5px stroke. Free to use in any app, on any platform.

SVGSpriteWeb ComponentReactVue · Svelte · AngularAndroid / ComposeiOS / SwiftUIFlutterJSON
Color

Use IconMuse in your app

Everything below comes from this website. The registry packages are optional extras for later.

Live works now, served by this website Registry after publishing to npm, pub.dev or Maven Central

Any app, one command

Live

Run it in your project. It works out what kind of app it is and writes the icons into it as ready-to-use code. All you need is Node.js 18 or later.

  • React, Next.js, Vue, Nuxt, Svelte, Angular, Solid, Astro, React Native
  • Flutter, iOS / SwiftUI, Android / Compose
  • Plain HTML, Django, Rails, Laravel, PHP, Go

Add --icons play,pause to include only the icons you need. Run it again to update.

Is it safe?
  • One readable file, no dependencies. Read the code on npm
  • Only writes into one folder, and lists every file
  • Doesn't read your code or send anything anywhere
  • --dry-run shows what it would do first
cd my-app
npx iconmuse generate
Example: Flutter app
Wrote 199 icons as 1 file in lib/iconmuse/
Use it:
    IconMuse(IconMuseIcons.play, size: 24)
Without npm
curl -fsSL https://icons.chordmuse.app/iconmuse.mjs -o iconmuse.mjs
node iconmuse.mjs generate

Any website

Live

A Web Component that works in plain HTML, WordPress, PHP, Rails, Django and any JS framework. No install or build step.

<script type="module"
  src="https://icons.chordmuse.app/dist/icon-muse.js"></script>

<icon-muse name="play" size="24" label="Play"></icon-muse>

Colour follows the surrounding CSS color. Web guide

SVG files

Live

Every icon is a standalone SVG. Click any icon above to copy or download it, or link to it directly.

<img src="https://icons.chordmuse.app/svg/play.svg"
     width="24" height="24" alt="Play">

An <img> is always black. Paste the SVG inline to recolour it.

React · Next.js

Livenpm

Today, the one command writes a typed IconMuse component into your app. Once the npm package is published:

npm i iconmuse

import { IconMuse } from 'iconmuse/react';
<IconMuse name="play" size={24} title="Play" />

React guide

Vue · Svelte · Angular · Solid · Astro

Live

The one command writes a native component for your framework: IconMuse.vue, IconMuse.svelte, an Angular standalone component, and so on.

node iconmuse.mjs generate

<IconMuse name="play" :size="24" />   <!-- Vue -->

Framework guide

iOS · macOS · SwiftUI

Live

The one command adds IconMuse.xcassets and IconMuse.swift next to your app's assets.

IconMuse.play.image
    .foregroundStyle(.tint)

Icons are template images, so they tint like SF Symbols. iOS guide

Flutter

Livepub.dev

The one command writes lib/iconmuse/iconmuse.dart. Once the package is on pub.dev, flutter pub add iconmuse also works.

IconMuse(IconMuseIcons.play, size: 24)

Needs flutter_svg; the command tells you if it's missing. Flutter guide

Android · Compose

LiveMaven

The one command writes ic_iconmuse_*.xml drawables into res/drawable.

Icon(painterResource(R.drawable.ic_iconmuse_play), "Play")

Once published to Maven Central: implementation("app.chordmuse:iconmuse:1.0.0"). Android guide

Any language

Live

Raw path data for every icon, for Python, Go, Rust, game engines and design tools.

curl https://icons.chordmuse.app/dist/icons.json

Each icon is a list of { d, filled } paths on a 24 × 24 grid. Format guide

AI agents

Live

Coding agents such as Claude Code can use the IconMuse skill, which runs the same one command for you.

https://icons.chordmuse.app/llms.txt
https://icons.chordmuse.app/skills/iconmuse/SKILL.md

Agent guide