Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Radix Icons · RxShuffle

Shuffle icon

A free shuffle icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: icons.radix-ui.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/shuffle.json

components/icons/radix-shuffle.tsx

import * as React from "react";

/**
 * Shuffle from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/shuffle. Sized in em, colored by currentColor.
 */
export function RxShuffleIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8.08984 8.12814C8.58453 8.79296 9.05295 9.39787 9.56543 9.88986C10.2892 10.5846 11.0465 11.0002 12 11.0002H12.793L11.6465 9.85372L11.582 9.7756C11.4539 9.58152 11.4756 9.31756 11.6465 9.14669C11.8173 8.97583 12.0813 8.95407 12.2754 9.08224L12.3535 9.14669L14.3535 11.1467C14.5488 11.342 14.5488 11.6585 14.3535 11.8537L12.3535 13.8537C12.1583 14.049 11.8417 14.049 11.6465 13.8537C11.4512 13.6585 11.4512 13.342 11.6465 13.1467L12.793 12.0002H12C10.7037 12.0002 9.7107 11.4156 8.87207 10.6106C8.37205 10.1305 7.90974 9.55042 7.45801 8.95138C7.64654 8.71441 7.8276 8.48007 8 8.25021C8.03055 8.20947 8.05987 8.16831 8.08984 8.12814ZM11.6465 1.14669C11.8173 0.975828 12.0813 0.954074 12.2754 1.08224L12.3535 1.14669L14.3535 3.14669L14.418 3.22482C14.5461 3.4189 14.5244 3.68286 14.3535 3.85372L12.3535 5.85372C12.1583 6.04899 11.8417 6.04899 11.6465 5.85372C11.4512 5.65846 11.4512 5.34195 11.6465 5.14669L12.793 4.00021H12C11.0465 4.00021 10.2892 4.41586 9.56543 5.11056C8.82263 5.82365 8.17078 6.7728 7.40039 7.80001C5.89165 9.81166 4.00963 12.0002 0.5 12.0002C0.223858 12.0002 0 11.7764 0 11.5002C0 11.2241 0.223858 11.0002 0.5 11.0002C3.49021 11.0002 5.10841 9.18863 6.59961 7.2004C7.329 6.22788 8.05261 5.17665 8.87207 4.38986C9.7107 3.58478 10.7037 3.00021 12 3.00021H12.793L11.6465 1.85372L11.582 1.7756C11.4539 1.58152 11.4756 1.31756 11.6465 1.14669ZM0.5 3.00021C3.35242 3.00021 5.1293 4.44621 6.50488 6.06759C6.3319 6.30165 6.16402 6.53151 6 6.75021C5.96377 6.79852 5.92681 6.846 5.89062 6.89376C4.57223 5.29373 3.0261 4.00021 0.5 4.00021C0.223858 4.00021 0 3.77635 0 3.50021C0 3.22406 0.223858 3.00021 0.5 3.00021Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxShuffle } from "react-icons/rx";

export function Example() {
  return <RxShuffle className="size-5" />;
}

shuffle.svg

<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M8.08984 8.12814C8.58453 8.79296 9.05295 9.39787 9.56543 9.88986C10.2892 10.5846 11.0465 11.0002 12 11.0002H12.793L11.6465 9.85372L11.582 9.7756C11.4539 9.58152 11.4756 9.31756 11.6465 9.14669C11.8173 8.97583 12.0813 8.95407 12.2754 9.08224L12.3535 9.14669L14.3535 11.1467C14.5488 11.342 14.5488 11.6585 14.3535 11.8537L12.3535 13.8537C12.1583 14.049 11.8417 14.049 11.6465 13.8537C11.4512 13.6585 11.4512 13.342 11.6465 13.1467L12.793 12.0002H12C10.7037 12.0002 9.7107 11.4156 8.87207 10.6106C8.37205 10.1305 7.90974 9.55042 7.45801 8.95138C7.64654 8.71441 7.8276 8.48007 8 8.25021C8.03055 8.20947 8.05987 8.16831 8.08984 8.12814ZM11.6465 1.14669C11.8173 0.975828 12.0813 0.954074 12.2754 1.08224L12.3535 1.14669L14.3535 3.14669L14.418 3.22482C14.5461 3.4189 14.5244 3.68286 14.3535 3.85372L12.3535 5.85372C12.1583 6.04899 11.8417 6.04899 11.6465 5.85372C11.4512 5.65846 11.4512 5.34195 11.6465 5.14669L12.793 4.00021H12C11.0465 4.00021 10.2892 4.41586 9.56543 5.11056C8.82263 5.82365 8.17078 6.7728 7.40039 7.80001C5.89165 9.81166 4.00963 12.0002 0.5 12.0002C0.223858 12.0002 0 11.7764 0 11.5002C0 11.2241 0.223858 11.0002 0.5 11.0002C3.49021 11.0002 5.10841 9.18863 6.59961 7.2004C7.329 6.22788 8.05261 5.17665 8.87207 4.38986C9.7107 3.58478 10.7037 3.00021 12 3.00021H12.793L11.6465 1.85372L11.582 1.7756C11.4539 1.58152 11.4756 1.31756 11.6465 1.14669ZM0.5 3.00021C3.35242 3.00021 5.1293 4.44621 6.50488 6.06759C6.3319 6.30165 6.16402 6.53151 6 6.75021C5.96377 6.79852 5.92681 6.846 5.89062 6.89376C4.57223 5.29373 3.0261 4.00021 0.5 4.00021C0.223858 4.00021 0 3.77635 0 3.50021C0 3.22406 0.223858 3.00021 0.5 3.00021Z"
    fill="currentColor"
  />
</svg>

Attribution

"Shuffle" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Shuffle icon in other sets

Similar Radix Icons icons