Arrow Shuffle 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 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 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 { ArrowShuffle24Regular, ArrowShuffle24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowShuffle24Regular aria-label="Arrow Shuffle" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_shuffle_24_regular.svg" width="24" height="24" alt="Arrow Shuffle"> 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="M19.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.25C15.332 6.99999 12.8269 9.30232 10.5579 11.3877L10.4925 11.4477C8.15388 13.5968 6.04432 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.4421 12.6123L11.5075 12.5522C13.8461 10.4032 15.9557 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.71967ZM2.75 6.99983C5.99799 6.99983 8.27497 8.58203 10.2514 10.3112C10.1492 10.4048 10.0482 10.4978 9.94821 10.5897L9.81591 10.7113C9.58463 10.9239 9.35843 11.1309 9.13588 11.3316C7.28326 9.73131 5.39993 8.49983 2.75 8.49983C2.33579 8.49983 2 8.16405 2 7.74983C2 7.33562 2.33579 6.99983 2.75 6.99983ZM19.25 16.9998C16.0021 16.9998 13.7251 15.4177 11.7487 13.6885C11.8507 13.5951 11.9515 13.5023 12.0513 13.4105L12.0518 13.4101L12.1841 13.2885C12.4154 13.0759 12.6416 12.8688 12.8642 12.6681C14.7168 14.2684 16.6001 15.4998 19.25 15.4998H19.4393L18.2197 14.2802C17.9268 13.9873 17.9268 13.5124 18.2197 13.2195C18.5126 12.9266 18.9874 12.9266 19.2803 13.2195L21.7803 15.7195C21.921 15.8602 22 16.0509 22 16.2498C22 16.4487 21.921 16.6395 21.7803 16.7802L19.2803 19.2802C18.9874 19.5731 18.5126 19.5731 18.2197 19.2802C17.9268 18.9873 17.9268 18.5124 18.2197 18.2195L19.4393 16.9998H19.25Z" 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_24_regular.svg";Details
| Name | Arrow Shuffle |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_shuffle_24_regular.svg |
| Filled file | ic_fluent_arrow_shuffle_24_filled.svg |
| React components | ArrowShuffle24Regular, ArrowShuffle24Filled |
| License | MIT (© Microsoft Corporation) |