shuffle icon

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

Name
shuffle
Set
Font Awesome Solid
Style
Solid
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

shuffleBootstrap IconsshuffleBoxIcons v2shuffleCarbonshuffle-fillEva IconsshuffleFramework7 IconsshuffleFont Awesome 6 SolidshuffleFeather Iconsshuffle-outlineFlowbite IconsshuffleHuge IconsshuffleIconParkshuffleIconPark OutlineshuffleIconoirshuffleIonIconsshuffleJam IconsshuffleLucideshuffleMaterial SymbolsshuffleMaterial Symbols LightshuffleMaterial Design Iconsshuffle-fillMingCute IconshuffleMyna UI IconsshufflePhosphorshufflePixelarticonsshuffleRadix Iconsshuffle-fillRemix Icon

Use the shuffle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M467.8 98.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.9S448 268.9 448 256v-32h-32c-10.1 0-19.6 4.7-25.6 12.8L358 280l-40-53.3l21.2-28.3c18.1-24.2 46.6-38.4 76.8-38.4h32v-32c0-12.9 7.8-24.6 19.8-29.6M218 360l40 53.3l-21.2 28.3C218.7 465.8 190.2 480 160 480H96c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c10.1 0 19.6-4.7 25.6-12.8zm284.6 174.6c-9.2 9.2-22.9 11.9-34.9 6.9S448 524.9 448 512v-32h-32c-30.2 0-58.7-14.2-76.8-38.4L185.6 236.8c-6-8.1-15.5-12.8-25.6-12.8H96c-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 Fa7SolidShuffle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M467.8 98.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.9S448 268.9 448 256v-32h-32c-10.1 0-19.6 4.7-25.6 12.8L358 280l-40-53.3l21.2-28.3c18.1-24.2 46.6-38.4 76.8-38.4h32v-32c0-12.9 7.8-24.6 19.8-29.6M218 360l40 53.3l-21.2 28.3C218.7 465.8 190.2 480 160 480H96c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c10.1 0 19.6-4.7 25.6-12.8zm284.6 174.6c-9.2 9.2-22.9 11.9-34.9 6.9S448 524.9 448 512v-32h-32c-30.2 0-58.7-14.2-76.8-38.4L185.6 236.8c-6-8.1-15.5-12.8-25.6-12.8H96c-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 640 640"><path fill="currentColor" d="M467.8 98.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.9S448 268.9 448 256v-32h-32c-10.1 0-19.6 4.7-25.6 12.8L358 280l-40-53.3l21.2-28.3c18.1-24.2 46.6-38.4 76.8-38.4h32v-32c0-12.9 7.8-24.6 19.8-29.6M218 360l40 53.3l-21.2 28.3C218.7 465.8 190.2 480 160 480H96c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c10.1 0 19.6-4.7 25.6-12.8zm284.6 174.6c-9.2 9.2-22.9 11.9-34.9 6.9S448 524.9 448 512v-32h-32c-30.2 0-58.7-14.2-76.8-38.4L185.6 236.8c-6-8.1-15.5-12.8-25.6-12.8H96c-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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M467.8%2098.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.9S448%20268.9%20448%20256v-32h-32c-10.1%200-19.6%204.7-25.6%2012.8L358%20280l-40-53.3l21.2-28.3c18.1-24.2%2046.6-38.4%2076.8-38.4h32v-32c0-12.9%207.8-24.6%2019.8-29.6M218%20360l40%2053.3l-21.2%2028.3C218.7%20465.8%20190.2%20480%20160%20480H96c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64c10.1%200%2019.6-4.7%2025.6-12.8zm284.6%20174.6c-9.2%209.2-22.9%2011.9-34.9%206.9S448%20524.9%20448%20512v-32h-32c-30.2%200-58.7-14.2-76.8-38.4L185.6%20236.8c-6-8.1-15.5-12.8-25.6-12.8H96c-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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M467.8%2098.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.9S448%20268.9%20448%20256v-32h-32c-10.1%200-19.6%204.7-25.6%2012.8L358%20280l-40-53.3l21.2-28.3c18.1-24.2%2046.6-38.4%2076.8-38.4h32v-32c0-12.9%207.8-24.6%2019.8-29.6M218%20360l40%2053.3l-21.2%2028.3C218.7%20465.8%20190.2%20480%20160%20480H96c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64c10.1%200%2019.6-4.7%2025.6-12.8zm284.6%20174.6c-9.2%209.2-22.9%2011.9-34.9%206.9S448%20524.9%20448%20512v-32h-32c-30.2%200-58.7-14.2-76.8-38.4L185.6%20236.8c-6-8.1-15.5-12.8-25.6-12.8H96c-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/fa7-solid/shuffle.svg?color=%231a73e8&size=48

Shuffle solid icon — Font Awesome Solid · IconsDB