What is the play pause icon used for?

It's used to indicate and control the action of starting or stopping media playback, such as in music players or video applications.

How do I use the play pause icon in React?

You can import and use it in your React application with the following statement: `import { PlayPauseIcon } from '@heroicons/react/24/outline'`.

Heroicons are distributed under the MIT license, allowing for free use in both open-source and commercial projects.

Heroicons · play-pause · MIT

The Heroicons play pause icon depicts a triangle pointing right (play) and two vertical lines (pause), commonly used to control media playback.

Install

npm i @heroicons/react

Import & render

import { PlayPauseIcon } from '@heroicons/react/24/outline';

<PlayPauseIcon className="size-6" />

Heroicons ships this icon in 4 styles — each its own import:

24/outline

<PlayPauseIcon className="size-6" />

24/solid

<PlayPauseIcon className="size-6" />

20/solid

<PlayPauseIcon className="size-6" />

16/solid

<PlayPauseIcon className="size-6" />

What is the play pause icon used for?: It's used to indicate and control the action of starting or stopping media playback, such as in music players or video applications.
How do I use the play pause icon in React?: You can import and use it in your React application with the following statement: `import { PlayPauseIcon } from '@heroicons/react/24/outline'`.
What is the license for Heroicons?: Heroicons are distributed under the MIT license, allowing for free use in both open-source and commercial projects.

The same idea in other libraries, and near matches in Heroicons.

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →