arrow shuffle icon
arrow-shuffle-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- arrow-shuffle-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- License
- MIT
11 other variants in Fluent UI System Icons
The same icon in other sets
Related icons in Fluent UI System Icons
arrow-autofit-content-20-filledarrow-autofit-down-20-filledarrow-autofit-height-20-filledarrow-autofit-height-dotted-20-filledarrow-autofit-height-in-20-filledarrow-autofit-up-20-filledarrow-autofit-width-20-filledarrow-autofit-width-dotted-20-filledarrow-between-down-20-filledarrow-between-up-20-filledarrow-bidirectional-left-right-16-filledarrow-bidirectional-up-down-12-filledarrow-bounce-12-filledarrow-circle-down-12-filledarrow-circle-down-double-20-filledarrow-circle-down-right-12-filledarrow-circle-down-split-20-filledarrow-circle-down-up-20-filledarrow-circle-left-12-filledarrow-circle-right-12-filledarrow-circle-up-12-filledarrow-circle-up-left-16-filledarrow-circle-up-right-16-filledarrow-circle-up-sparkle-20-filled
Use the arrow shuffle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M15.854 4.146a.5.5 0 0 0-.708.708l1.15 1.148c-3.323.073-5.283 1.902-7.105 3.603l-.032.03C7.277 11.39 5.533 13 2.5 13a.5.5 0 0 0 0 1c3.447 0 5.45-1.87 7.31-3.605l.031-.03c1.838-1.715 3.545-3.29 6.45-3.362l-1.145 1.144a.5.5 0 0 0 .708.707l2-2a.5.5 0 0 0 0-.708zM2.5 6c2.81 0 4.661 1.243 6.256 2.642l-.28.261q-.23.218-.457.425C6.517 8.023 4.92 7 2.5 7a.5.5 0 0 1 0-1m13.795 7.998c-2.696-.059-4.495-1.275-6.051-2.64l.28-.261q.23-.218.457-.425c1.458 1.267 3.008 2.268 5.31 2.325l-1.145-1.143a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.707z"/></svg>
React
import type { SVGProps } from "react";
export function FluentArrowShuffle20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M15.854 4.146a.5.5 0 0 0-.708.708l1.15 1.148c-3.323.073-5.283 1.902-7.105 3.603l-.032.03C7.277 11.39 5.533 13 2.5 13a.5.5 0 0 0 0 1c3.447 0 5.45-1.87 7.31-3.605l.031-.03c1.838-1.715 3.545-3.29 6.45-3.362l-1.145 1.144a.5.5 0 0 0 .708.707l2-2a.5.5 0 0 0 0-.708zM2.5 6c2.81 0 4.661 1.243 6.256 2.642l-.28.261q-.23.218-.457.425C6.517 8.023 4.92 7 2.5 7a.5.5 0 0 1 0-1m13.795 7.998c-2.696-.059-4.495-1.275-6.051-2.64l.28-.261q.23-.218.457-.425c1.458 1.267 3.008 2.268 5.31 2.325l-1.145-1.143a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.707z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M15.854 4.146a.5.5 0 0 0-.708.708l1.15 1.148c-3.323.073-5.283 1.902-7.105 3.603l-.032.03C7.277 11.39 5.533 13 2.5 13a.5.5 0 0 0 0 1c3.447 0 5.45-1.87 7.31-3.605l.031-.03c1.838-1.715 3.545-3.29 6.45-3.362l-1.145 1.144a.5.5 0 0 0 .708.707l2-2a.5.5 0 0 0 0-.708zM2.5 6c2.81 0 4.661 1.243 6.256 2.642l-.28.261q-.23.218-.457.425C6.517 8.023 4.92 7 2.5 7a.5.5 0 0 1 0-1m13.795 7.998c-2.696-.059-4.495-1.275-6.051-2.64l.28-.261q.23-.218.457-.425c1.458 1.267 3.008 2.268 5.31 2.325l-1.145-1.143a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.707z"/></svg> </template>
CSS
.icon-arrow-shuffle-20-regular {
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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.854%204.146a.5.5%200%200%200-.708.708l1.15%201.148c-3.323.073-5.283%201.902-7.105%203.603l-.032.03C7.277%2011.39%205.533%2013%202.5%2013a.5.5%200%200%200%200%201c3.447%200%205.45-1.87%207.31-3.605l.031-.03c1.838-1.715%203.545-3.29%206.45-3.362l-1.145%201.144a.5.5%200%200%200%20.708.707l2-2a.5.5%200%200%200%200-.708zM2.5%206c2.81%200%204.661%201.243%206.256%202.642l-.28.261q-.23.218-.457.425C6.517%208.023%204.92%207%202.5%207a.5.5%200%200%201%200-1m13.795%207.998c-2.696-.059-4.495-1.275-6.051-2.64l.28-.261q.23-.218.457-.425c1.458%201.267%203.008%202.268%205.31%202.325l-1.145-1.143a.5.5%200%200%201%20.708-.708l2%202a.5.5%200%200%201%200%20.708l-2%202a.5.5%200%200%201-.708-.707z%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.854%204.146a.5.5%200%200%200-.708.708l1.15%201.148c-3.323.073-5.283%201.902-7.105%203.603l-.032.03C7.277%2011.39%205.533%2013%202.5%2013a.5.5%200%200%200%200%201c3.447%200%205.45-1.87%207.31-3.605l.031-.03c1.838-1.715%203.545-3.29%206.45-3.362l-1.145%201.144a.5.5%200%200%200%20.708.707l2-2a.5.5%200%200%200%200-.708zM2.5%206c2.81%200%204.661%201.243%206.256%202.642l-.28.261q-.23.218-.457.425C6.517%208.023%204.92%207%202.5%207a.5.5%200%200%201%200-1m13.795%207.998c-2.696-.059-4.495-1.275-6.051-2.64l.28-.261q.23-.218.457-.425c1.458%201.267%203.008%202.268%205.31%202.325l-1.145-1.143a.5.5%200%200%201%20.708-.708l2%202a.5.5%200%200%201%200%20.708l-2%202a.5.5%200%200%201-.708-.707z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/arrow-shuffle-20-regular.svg?color=%231a73e8&size=48
