What does the shuffle icon represent?

It represents the action of randomizing or shuffling the order of items in a list, most often used in media playback.

How do I use the shuffle icon in React?

You can import and use it like this: import { Shuffle } from '@phosphor-icons/react'; .

Phosphor icons, including the shuffle icon, are distributed under the MIT license.

Phosphor · shuffle · MIT

The Phosphor shuffle icon depicts two arrows forming a cross, commonly used to indicate randomizing playback order for media like music or videos.

Install

npm i @phosphor-icons/react

Import & render

import { Shuffle } from '@phosphor-icons/react';

<Shuffle size={24} />

Phosphor ships this icon in 6 styles — each its own import:

regular

<Shuffle size={24} />

thin

<Shuffle size={24} weight="thin" />

light

<Shuffle size={24} weight="light" />

bold

<Shuffle size={24} weight="bold" />

fill

<Shuffle size={24} weight="fill" />

duotone

<Shuffle size={24} weight="duotone" />

What does the shuffle icon represent?: It represents the action of randomizing or shuffling the order of items in a list, most often used in media playback.
How do I use the shuffle icon in React?: You can import and use it like this: import { Shuffle } from '@phosphor-icons/react'; <Shuffle />.
What is the license for the Phosphor shuffle icon?: Phosphor icons, including the shuffle icon, are distributed under the MIT license.

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

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