shuffle icon

shuffle from Radix Icons by WorkOS · Outline · MIT Free for personal and commercial use.

Name
shuffle
Set
Radix Icons
Style
Outline
Viewbox
15×15
License
MIT

The same icon in other sets

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

Use the shuffle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M8.09 8.128c.495.665.963 1.27 1.475 1.762C10.29 10.585 11.047 11 12 11h.793l-1.146-1.146l-.065-.078a.5.5 0 0 1 .693-.694l.079.065l2 2a.5.5 0 0 1 0 .707l-2 2a.5.5 0 1 1-.707-.707L12.793 12H12c-1.296 0-2.29-.584-3.128-1.39c-.5-.48-.962-1.06-1.414-1.659q.284-.355.542-.7zm3.557-6.981a.5.5 0 0 1 .628-.065l.079.065l2 2l.064.078a.5.5 0 0 1-.064.629l-2 2a.5.5 0 1 1-.707-.707L12.793 4H12c-.953 0-1.71.416-2.435 1.11c-.742.714-1.394 1.663-2.165 2.69C5.892 9.812 4.01 12 .5 12a.5.5 0 1 1 0-1c2.99 0 4.608-1.811 6.1-3.8c.729-.972 1.453-2.023 2.272-2.81C9.711 3.585 10.704 3 12 3h.793l-1.146-1.146l-.065-.078a.5.5 0 0 1 .064-.63M.5 3c2.852 0 4.63 1.446 6.005 3.068q-.26.353-.505.682q-.054.073-.11.144C4.573 5.294 3.027 4 .5 4a.5.5 0 0 1 0-1"/></svg>

React

import type { SVGProps } from "react";

export function RadixIconsShuffle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M8.09 8.128c.495.665.963 1.27 1.475 1.762C10.29 10.585 11.047 11 12 11h.793l-1.146-1.146l-.065-.078a.5.5 0 0 1 .693-.694l.079.065l2 2a.5.5 0 0 1 0 .707l-2 2a.5.5 0 1 1-.707-.707L12.793 12H12c-1.296 0-2.29-.584-3.128-1.39c-.5-.48-.962-1.06-1.414-1.659q.284-.355.542-.7zm3.557-6.981a.5.5 0 0 1 .628-.065l.079.065l2 2l.064.078a.5.5 0 0 1-.064.629l-2 2a.5.5 0 1 1-.707-.707L12.793 4H12c-.953 0-1.71.416-2.435 1.11c-.742.714-1.394 1.663-2.165 2.69C5.892 9.812 4.01 12 .5 12a.5.5 0 1 1 0-1c2.99 0 4.608-1.811 6.1-3.8c.729-.972 1.453-2.023 2.272-2.81C9.711 3.585 10.704 3 12 3h.793l-1.146-1.146l-.065-.078a.5.5 0 0 1 .064-.63M.5 3c2.852 0 4.63 1.446 6.005 3.068q-.26.353-.505.682q-.054.073-.11.144C4.573 5.294 3.027 4 .5 4a.5.5 0 0 1 0-1"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15"><path fill="currentColor" d="M8.09 8.128c.495.665.963 1.27 1.475 1.762C10.29 10.585 11.047 11 12 11h.793l-1.146-1.146l-.065-.078a.5.5 0 0 1 .693-.694l.079.065l2 2a.5.5 0 0 1 0 .707l-2 2a.5.5 0 1 1-.707-.707L12.793 12H12c-1.296 0-2.29-.584-3.128-1.39c-.5-.48-.962-1.06-1.414-1.659q.284-.355.542-.7zm3.557-6.981a.5.5 0 0 1 .628-.065l.079.065l2 2l.064.078a.5.5 0 0 1-.064.629l-2 2a.5.5 0 1 1-.707-.707L12.793 4H12c-.953 0-1.71.416-2.435 1.11c-.742.714-1.394 1.663-2.165 2.69C5.892 9.812 4.01 12 .5 12a.5.5 0 1 1 0-1c2.99 0 4.608-1.811 6.1-3.8c.729-.972 1.453-2.023 2.272-2.81C9.711 3.585 10.704 3 12 3h.793l-1.146-1.146l-.065-.078a.5.5 0 0 1 .064-.63M.5 3c2.852 0 4.63 1.446 6.005 3.068q-.26.353-.505.682q-.054.073-.11.144C4.573 5.294 3.027 4 .5 4a.5.5 0 0 1 0-1"/></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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.09%208.128c.495.665.963%201.27%201.475%201.762C10.29%2010.585%2011.047%2011%2012%2011h.793l-1.146-1.146l-.065-.078a.5.5%200%200%201%20.693-.694l.079.065l2%202a.5.5%200%200%201%200%20.707l-2%202a.5.5%200%201%201-.707-.707L12.793%2012H12c-1.296%200-2.29-.584-3.128-1.39c-.5-.48-.962-1.06-1.414-1.659q.284-.355.542-.7zm3.557-6.981a.5.5%200%200%201%20.628-.065l.079.065l2%202l.064.078a.5.5%200%200%201-.064.629l-2%202a.5.5%200%201%201-.707-.707L12.793%204H12c-.953%200-1.71.416-2.435%201.11c-.742.714-1.394%201.663-2.165%202.69C5.892%209.812%204.01%2012%20.5%2012a.5.5%200%201%201%200-1c2.99%200%204.608-1.811%206.1-3.8c.729-.972%201.453-2.023%202.272-2.81C9.711%203.585%2010.704%203%2012%203h.793l-1.146-1.146l-.065-.078a.5.5%200%200%201%20.064-.63M.5%203c2.852%200%204.63%201.446%206.005%203.068q-.26.353-.505.682q-.054.073-.11.144C4.573%205.294%203.027%204%20.5%204a.5.5%200%200%201%200-1%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%2015%2015%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.09%208.128c.495.665.963%201.27%201.475%201.762C10.29%2010.585%2011.047%2011%2012%2011h.793l-1.146-1.146l-.065-.078a.5.5%200%200%201%20.693-.694l.079.065l2%202a.5.5%200%200%201%200%20.707l-2%202a.5.5%200%201%201-.707-.707L12.793%2012H12c-1.296%200-2.29-.584-3.128-1.39c-.5-.48-.962-1.06-1.414-1.659q.284-.355.542-.7zm3.557-6.981a.5.5%200%200%201%20.628-.065l.079.065l2%202l.064.078a.5.5%200%200%201-.064.629l-2%202a.5.5%200%201%201-.707-.707L12.793%204H12c-.953%200-1.71.416-2.435%201.11c-.742.714-1.394%201.663-2.165%202.69C5.892%209.812%204.01%2012%20.5%2012a.5.5%200%201%201%200-1c2.99%200%204.608-1.811%206.1-3.8c.729-.972%201.453-2.023%202.272-2.81C9.711%203.585%2010.704%203%2012%203h.793l-1.146-1.146l-.065-.078a.5.5%200%200%201%20.064-.63M.5%203c2.852%200%204.63%201.446%206.005%203.068q-.26.353-.505.682q-.054.073-.11.144C4.573%205.294%203.027%204%20.5%204a.5.5%200%200%201%200-1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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