---
title: IconMuse for React and Next.js
description: Use IconMuse music icons in React or Next.js, either as the iconmuse npm package or as a component generated into your project.
---

# IconMuse for React and Next.js

There are two options. Both give you the same `<IconMuse name="play" />` component.

## Option A: install the npm package

```bash
npm i iconmuse
```

```tsx
import { IconMuse } from 'iconmuse/react';

export function PlayButton() {
  return (
    <button>
      <IconMuse name="play" size={20} /> Play
    </button>
  );
}
```

Updates come through npm like any other dependency.

## Option B: generate the component into your project

```bash
npx iconmuse generate                          # all icons
npx iconmuse generate --icons play,pause,vinyl # only these
```

This writes `components/iconmuse/IconMuse.tsx` (or `.jsx`) plus the icon data into your project, and adds no dependency. It's best if you want only a few icons or full control over the code. Then:

```tsx
import { IconMuse } from '@/components/iconmuse';

<IconMuse name="play" size={24} />
```

The command prints the exact import path for your project.

## Props

| Prop | Default | Notes |
| --- | --- | --- |
| `name` | (required) | Typed, so your editor autocompletes every icon name |
| `size` | `24` | Number (px) or any CSS length |
| `color` | `currentColor` | Follows CSS `color` |
| `strokeWidth` | `1.5` | |
| `title` | (none) | Makes the icon accessible (`role="img"`). Without it, the icon is `aria-hidden` |

Any other SVG prop (`className`, `style`, `onClick`, `ref`, …) is passed through to the `<svg>`.

## Line thickness (stroke)

Set `strokeWidth` on any icon, using a value between 0.5 and 3:

```tsx
<IconMuse name="play" strokeWidth={2} />     // bolder
<IconMuse name="play" strokeWidth={1} />     // lighter
```

With Option B, `npx iconmuse generate --stroke 2` changes the default for every icon. The website's **Stroke** slider shows what each value looks like.

## Next.js

The component has no hooks, so it works in Server Components without `"use client"`.

## React Native

Use Option B. `npx iconmuse generate` detects React Native and Expo and writes a `react-native-svg` version of the component.