Arrow Shuffle Off icon
Used in playback controls. Collection includes Fastforward, Rewind, Previous, Next, Stop, Pause, Video Play Pause, Arrow Shuffle, Arrow Repeat All, Arrow Repeat 1. The Arrow Shuffle Off icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrow Shuffle Off icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { ArrowShuffleOff24Regular, ArrowShuffleOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowShuffleOff24Regular aria-label="Arrow Shuffle Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_shuffle_off_24_regular.svg" width="24" height="24" alt="Arrow Shuffle Off"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L6.91556 7.97632C5.70858 7.38215 4.34661 6.99984 2.75 6.99984C2.33579 6.99984 2 7.33562 2 7.74984C2 8.16405 2.33579 8.49984 2.75 8.49984C5.39993 8.49984 7.28326 9.73131 9.13588 11.3316C9.33071 11.1559 9.52833 10.9754 9.7297 10.7905L10.4375 11.4983C8.12068 13.6265 6.01845 15.5 2.75 15.5C2.33579 15.5 2 15.8358 2 16.25C2 16.6642 2.33579 17 2.75 17C6.66803 17 9.1731 14.6977 11.4421 12.6123L11.4991 12.5599L12.2068 13.2676C12.1992 13.2746 12.1917 13.2815 12.1841 13.2885L12.0518 13.4101C11.952 13.5019 11.8507 13.5951 11.7487 13.6885C12.6863 14.5089 13.6916 15.2961 14.8361 15.8971L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM18.6609 15.479L20.8711 17.6893L21.7803 16.7802C21.921 16.6395 22 16.4487 22 16.2498C22 16.0509 21.921 15.8602 21.7803 15.7195L19.2803 13.2195C18.9874 12.9266 18.5126 12.9266 18.2197 13.2195C17.9268 13.5124 17.9268 13.9873 18.2197 14.2802L19.4393 15.4998H19.25C19.0493 15.4998 18.8531 15.4928 18.6609 15.479ZM12.6993 9.51732L13.7693 10.5873C15.3465 9.36507 17.029 8.49999 19.25 8.49999H19.4393L18.2197 9.71966C17.9268 10.0126 17.9268 10.4874 18.2197 10.7803C18.5126 11.0732 18.9874 11.0732 19.2803 10.7803L21.7803 8.28032C21.921 8.13967 22 7.9489 22 7.74999C22 7.55108 21.921 7.36031 21.7803 7.21966L19.2803 4.71967C18.9874 4.42678 18.5126 4.42678 18.2197 4.71967C17.9268 5.01256 17.9268 5.48744 18.2197 5.78033L19.4393 6.99999H19.25C16.5093 6.99999 14.46 8.12652 12.6993 9.51732Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/arrow_shuffle_off_24_regular.svg";Details
| Name | Arrow Shuffle Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_shuffle_off_24_regular.svg |
| Filled file | ic_fluent_arrow_shuffle_off_24_filled.svg |
| React components | ArrowShuffleOff24Regular, ArrowShuffleOff24Filled |
| License | MIT (© Microsoft Corporation) |