shuffle icon

shuffle from Font Awesome 6 Solid by Dave Gandy · Regular · CC-BY-4.0 Attribution required.

Name
shuffle
Set
Font Awesome 6 Solid
Style
Regular
Viewbox
512×512
License
CC BY 4.0

The same icon in other sets

shuffleBootstrap IconsshuffleBoxIcons v2shuffleCarbonshuffle-fillEva IconsshuffleFramework7 IconsshuffleFeather IconsshuffleHuge IconsshuffleIconoirshuffleIonIconsshuffleJam IconsshuffleLucideshuffleMaterial SymbolsshuffleMaterial Design Iconsshuffle-fillMingCute IconshufflePhosphorshufflePixelarticonsshuffleRadix Iconsshuffle-fillRemix Iconshuffle-boldSolarshuffleUnicons

Use the shuffle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9S384 204.8 384 191.8v-32h-32c-10.1 0-19.6 4.7-25.6 12.8L284 229.3L244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6M164 282.7l40 53.3l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c10.1 0 19.6-4.7 25.6-12.8zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9S383.9 461 383.9 448v-32h-32c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c30.2 0 58.7 14.2 76.8 38.4l153.6 204.8c6 8.1 15.5 12.8 25.6 12.8h32v-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidShuffle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9S384 204.8 384 191.8v-32h-32c-10.1 0-19.6 4.7-25.6 12.8L284 229.3L244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6M164 282.7l40 53.3l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c10.1 0 19.6-4.7 25.6-12.8zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9S383.9 461 383.9 448v-32h-32c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c30.2 0 58.7 14.2 76.8 38.4l153.6 204.8c6 8.1 15.5 12.8 25.6 12.8h32v-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9S384 204.8 384 191.8v-32h-32c-10.1 0-19.6 4.7-25.6 12.8L284 229.3L244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6M164 282.7l40 53.3l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c10.1 0 19.6-4.7 25.6-12.8zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9S383.9 461 383.9 448v-32h-32c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c30.2 0 58.7 14.2 76.8 38.4l153.6 204.8c6 8.1 15.5 12.8 25.6 12.8h32v-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"/></svg>
</template>

CSS

.icon-shuffle {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M403.8%2034.4c12-5%2025.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064c-9.2%209.2-22.9%2011.9-34.9%206.9S384%20204.8%20384%20191.8v-32h-32c-10.1%200-19.6%204.7-25.6%2012.8L284%20229.3L244%20176l31.2-41.6C293.3%20110.2%20321.8%2096%20352%2096h32V64c0-12.9%207.8-24.6%2019.8-29.6M164%20282.7l40%2053.3l-31.2%2041.6C154.7%20401.8%20126.2%20416%2096%20416H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64c10.1%200%2019.6-4.7%2025.6-12.8zm274.6%20188c-9.2%209.2-22.9%2011.9-34.9%206.9S383.9%20461%20383.9%20448v-32h-32c-30.2%200-58.7-14.2-76.8-38.4L121.6%20172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64c30.2%200%2058.7%2014.2%2076.8%2038.4l153.6%20204.8c6%208.1%2015.5%2012.8%2025.6%2012.8h32v-32c0-12.9%207.8-24.6%2019.8-29.6s25.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M403.8%2034.4c12-5%2025.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064c-9.2%209.2-22.9%2011.9-34.9%206.9S384%20204.8%20384%20191.8v-32h-32c-10.1%200-19.6%204.7-25.6%2012.8L284%20229.3L244%20176l31.2-41.6C293.3%20110.2%20321.8%2096%20352%2096h32V64c0-12.9%207.8-24.6%2019.8-29.6M164%20282.7l40%2053.3l-31.2%2041.6C154.7%20401.8%20126.2%20416%2096%20416H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64c10.1%200%2019.6-4.7%2025.6-12.8zm274.6%20188c-9.2%209.2-22.9%2011.9-34.9%206.9S383.9%20461%20383.9%20448v-32h-32c-30.2%200-58.7-14.2-76.8-38.4L121.6%20172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64c30.2%200%2058.7%2014.2%2076.8%2038.4l153.6%20204.8c6%208.1%2015.5%2012.8%2025.6%2012.8h32v-32c0-12.9%207.8-24.6%2019.8-29.6s25.7-2.2%2034.9%206.9l64%2064c6%206%209.4%2014.1%209.4%2022.6s-3.4%2016.6-9.4%2022.6l-64%2064z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/shuffle.svg?color=%231a73e8&size=48