shuffle-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.

Name
shuffle-fill
Set
MingCute Icon
Style
Fill
Viewbox
24×24
License
Apache 2.0

1 other variant in MingCute Icon

The same icon in other sets

Related icons in MingCute Icon

Use the shuffle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.802 3.182c-.582-.304-1.274.147-1.33.865q-.017.202-.032.453a5.5 5.5 0 0 0-4.887 3.04L11 8.646l-.553-1.106a5.5 5.5 0 0 0-4.92-3.04H4a1.5 1.5 0 1 0 0 3h1.528a2.5 2.5 0 0 1 2.236 1.382L9.323 12l-1.56 3.118A2.5 2.5 0 0 1 5.529 16.5H4a1.5 1.5 0 1 0 0 3h1.528a5.5 5.5 0 0 0 4.92-3.04L11 15.353l.553 1.105a5.5 5.5 0 0 0 4.885 3.04q.018.322.039.565c.054.672.684 1.057 1.26.756c.38-.198.933-.506 1.591-.934c.66-.428 1.173-.812 1.515-1.083c.52-.411.539-1.216.05-1.606a20 20 0 0 0-1.533-1.1a19 19 0 0 0-1.558-.915c-.582-.304-1.274.147-1.33.865q-.017.203-.032.453a2.5 2.5 0 0 1-2.204-1.382L12.677 12l1.56-3.118a2.5 2.5 0 0 1 2.2-1.382q.02.322.04.564c.054.672.684 1.057 1.26.756c.38-.198.933-.506 1.591-.934a20 20 0 0 0 1.515-1.083c.52-.411.539-1.217.05-1.606a20 20 0 0 0-1.533-1.1a19 19 0 0 0-1.558-.915"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteShuffleFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.802 3.182c-.582-.304-1.274.147-1.33.865q-.017.202-.032.453a5.5 5.5 0 0 0-4.887 3.04L11 8.646l-.553-1.106a5.5 5.5 0 0 0-4.92-3.04H4a1.5 1.5 0 1 0 0 3h1.528a2.5 2.5 0 0 1 2.236 1.382L9.323 12l-1.56 3.118A2.5 2.5 0 0 1 5.529 16.5H4a1.5 1.5 0 1 0 0 3h1.528a5.5 5.5 0 0 0 4.92-3.04L11 15.353l.553 1.105a5.5 5.5 0 0 0 4.885 3.04q.018.322.039.565c.054.672.684 1.057 1.26.756c.38-.198.933-.506 1.591-.934c.66-.428 1.173-.812 1.515-1.083c.52-.411.539-1.216.05-1.606a20 20 0 0 0-1.533-1.1a19 19 0 0 0-1.558-.915c-.582-.304-1.274.147-1.33.865q-.017.203-.032.453a2.5 2.5 0 0 1-2.204-1.382L12.677 12l1.56-3.118a2.5 2.5 0 0 1 2.2-1.382q.02.322.04.564c.054.672.684 1.057 1.26.756c.38-.198.933-.506 1.591-.934a20 20 0 0 0 1.515-1.083c.52-.411.539-1.217.05-1.606a20 20 0 0 0-1.533-1.1a19 19 0 0 0-1.558-.915"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17.802 3.182c-.582-.304-1.274.147-1.33.865q-.017.202-.032.453a5.5 5.5 0 0 0-4.887 3.04L11 8.646l-.553-1.106a5.5 5.5 0 0 0-4.92-3.04H4a1.5 1.5 0 1 0 0 3h1.528a2.5 2.5 0 0 1 2.236 1.382L9.323 12l-1.56 3.118A2.5 2.5 0 0 1 5.529 16.5H4a1.5 1.5 0 1 0 0 3h1.528a5.5 5.5 0 0 0 4.92-3.04L11 15.353l.553 1.105a5.5 5.5 0 0 0 4.885 3.04q.018.322.039.565c.054.672.684 1.057 1.26.756c.38-.198.933-.506 1.591-.934c.66-.428 1.173-.812 1.515-1.083c.52-.411.539-1.216.05-1.606a20 20 0 0 0-1.533-1.1a19 19 0 0 0-1.558-.915c-.582-.304-1.274.147-1.33.865q-.017.203-.032.453a2.5 2.5 0 0 1-2.204-1.382L12.677 12l1.56-3.118a2.5 2.5 0 0 1 2.2-1.382q.02.322.04.564c.054.672.684 1.057 1.26.756c.38-.198.933-.506 1.591-.934a20 20 0 0 0 1.515-1.083c.52-.411.539-1.217.05-1.606a20 20 0 0 0-1.533-1.1a19 19 0 0 0-1.558-.915"/></svg>
</template>

CSS

.icon-shuffle-fill {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.802%203.182c-.582-.304-1.274.147-1.33.865q-.017.202-.032.453a5.5%205.5%200%200%200-4.887%203.04L11%208.646l-.553-1.106a5.5%205.5%200%200%200-4.92-3.04H4a1.5%201.5%200%201%200%200%203h1.528a2.5%202.5%200%200%201%202.236%201.382L9.323%2012l-1.56%203.118A2.5%202.5%200%200%201%205.529%2016.5H4a1.5%201.5%200%201%200%200%203h1.528a5.5%205.5%200%200%200%204.92-3.04L11%2015.353l.553%201.105a5.5%205.5%200%200%200%204.885%203.04q.018.322.039.565c.054.672.684%201.057%201.26.756c.38-.198.933-.506%201.591-.934c.66-.428%201.173-.812%201.515-1.083c.52-.411.539-1.216.05-1.606a20%2020%200%200%200-1.533-1.1a19%2019%200%200%200-1.558-.915c-.582-.304-1.274.147-1.33.865q-.017.203-.032.453a2.5%202.5%200%200%201-2.204-1.382L12.677%2012l1.56-3.118a2.5%202.5%200%200%201%202.2-1.382q.02.322.04.564c.054.672.684%201.057%201.26.756c.38-.198.933-.506%201.591-.934a20%2020%200%200%200%201.515-1.083c.52-.411.539-1.217.05-1.606a20%2020%200%200%200-1.533-1.1a19%2019%200%200%200-1.558-.915%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.802%203.182c-.582-.304-1.274.147-1.33.865q-.017.202-.032.453a5.5%205.5%200%200%200-4.887%203.04L11%208.646l-.553-1.106a5.5%205.5%200%200%200-4.92-3.04H4a1.5%201.5%200%201%200%200%203h1.528a2.5%202.5%200%200%201%202.236%201.382L9.323%2012l-1.56%203.118A2.5%202.5%200%200%201%205.529%2016.5H4a1.5%201.5%200%201%200%200%203h1.528a5.5%205.5%200%200%200%204.92-3.04L11%2015.353l.553%201.105a5.5%205.5%200%200%200%204.885%203.04q.018.322.039.565c.054.672.684%201.057%201.26.756c.38-.198.933-.506%201.591-.934c.66-.428%201.173-.812%201.515-1.083c.52-.411.539-1.216.05-1.606a20%2020%200%200%200-1.533-1.1a19%2019%200%200%200-1.558-.915c-.582-.304-1.274.147-1.33.865q-.017.203-.032.453a2.5%202.5%200%200%201-2.204-1.382L12.677%2012l1.56-3.118a2.5%202.5%200%200%201%202.2-1.382q.02.322.04.564c.054.672.684%201.057%201.26.756c.38-.198.933-.506%201.591-.934a20%2020%200%200%200%201.515-1.083c.52-.411.539-1.217.05-1.606a20%2020%200%200%200-1.533-1.1a19%2019%200%200%200-1.558-.915%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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