What is the stop circle icon used for?

It's typically used to indicate a stop or pause action, like stopping media playback or canceling an operation.

How do I use the stop circle icon in React?

You can import it from Heroicons like this: `import { StopCircleIcon } from '@heroicons/react/24/outline'`.

Heroicons are released under the MIT license, allowing for free use in both personal and commercial projects.

Heroicons · stop-circle · MIT

The Heroicons stop circle icon depicts a circle with a solid square inside, commonly used to represent a stop or pause function in user interfaces.

Install

npm i @heroicons/react

Import & render

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

<StopCircleIcon className="size-6" />

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

24/outline

<StopCircleIcon className="size-6" />

24/solid

<StopCircleIcon className="size-6" />

20/solid

<StopCircleIcon className="size-6" />

16/solid

<StopCircleIcon className="size-6" />

What is the stop circle icon used for?: It's typically used to indicate a stop or pause action, like stopping media playback or canceling an operation.
How do I use the stop circle icon in React?: You can import it from Heroicons like this: `import { StopCircleIcon } from '@heroicons/react/24/outline'`.
What is the license for Heroicons?: Heroicons are released under the MIT license, allowing for free use in both personal 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 →