---
title: IconMuse on any website
description: Use IconMuse music icons in plain HTML, WordPress, PHP, Rails, Django or any framework, with no build step.
---

# IconMuse on any website

**Status:** live. These files are served by https://icons.chordmuse.app.

## Web Component (recommended)

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

<icon-muse name="play" size="24" label="Play"></icon-muse>
<icon-muse name="guitar-electric" size="32" color="#8E44AD"></icon-muse>
<icon-muse name="play" size="24" stroke-width="2"></icon-muse>   <!-- bolder line -->
```

| Attribute | Default | Notes |
| --- | --- | --- |
| `name` | (required) | Kebab-case icon name; see the gallery or `https://icons.chordmuse.app/llms.txt` |
| `size` | `1em` | Any CSS length or a number in px |
| `color` | `currentColor` | Inherits the surrounding text colour |
| `stroke-width` | `1.5` | Line thickness, 0.5–3. Preview values with the website's **Stroke** slider |
| `label` | (none) | Accessible name. Without it the icon is `aria-hidden` |

## Inline SVG

Click an icon in the gallery and choose **Copy SVG**, then paste it into your HTML. Inline SVG follows CSS `color` and needs no JavaScript. The copied SVG uses the thickness set on the website's **Stroke** slider.

## Image tag

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

Images can't inherit colour, so they always render black. Use the Web Component or inline SVG when you need colour.

## Classic script (no modules)

```html
<script src="https://icons.chordmuse.app/dist/iconmuse.umd.js"></script>
<i data-iconmuse="play" data-size="24"></i>
<script>IconMuse.replaceIcons();</script>
```

## Self-hosting

Copy `dist/icon-muse.js` and `dist/index.mjs` into your site. Both files are needed. Alternatively, run the [IconMuse skill](ai-agents.md) to generate a single self-contained `iconmuse.js` with only the icons you use.