shuffle icon
shuffle from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- shuffle
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
shuffleBootstrap IconsshuffleBoxIcons v2shuffleCarbonshuffle-fillEva IconsshuffleFont Awesome 6 SolidshuffleFont Awesome SolidshuffleFeather Iconsshuffle-outlineFlowbite IconsshuffleHuge IconsshuffleIconParkshuffleIconPark OutlineshuffleIconoirshuffleIonIconsshuffleJam IconsshuffleLucideshuffleMaterial SymbolsshuffleMaterial Symbols LightshuffleMaterial Design Iconsshuffle-fillMingCute IconshuffleMyna UI IconsshufflePhosphorshufflePixelarticonsshuffleRadix Iconsshuffle-fillRemix Icon
Use the shuffle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M.332 40.012c0 1.5 1.102 2.531 2.766 2.531h5.344c4.03 0 6.468-1.172 9.375-4.57l5.273-6.141l5.25 6.14c2.906 3.4 5.32 4.594 9.422 4.594h4.289v5.203c0 1.266.797 2.063 2.11 2.063c.562 0 1.148-.21 1.57-.586l8.859-7.312c1.078-.868 1.055-2.274 0-3.141l-8.86-7.36a2.4 2.4 0 0 0-1.57-.585c-1.312 0-2.11.797-2.11 2.062v4.547h-4.17c-2.414 0-3.914-.773-5.836-3l-5.601-6.539l5.601-6.516c1.922-2.25 3.422-3.023 5.836-3.023h4.172v4.71c0 1.267.797 2.063 2.11 2.063c.562 0 1.148-.21 1.57-.586l8.859-7.312c1.078-.867 1.055-2.25 0-3.14l-8.86-7.36a2.4 2.4 0 0 0-1.57-.586c-1.312 0-2.11.797-2.11 2.062v5.063h-4.288c-4.102 0-6.516 1.195-9.422 4.594l-5.25 6.14l-5.273-6.14c-2.907-3.399-5.344-4.594-9.375-4.594H3.097c-1.664 0-2.766 1.031-2.766 2.555c0 1.5 1.125 2.554 2.766 2.554h5.437c2.274 0 3.703.774 5.602 3l5.601 6.516l-5.601 6.54c-1.922 2.226-3.352 3-5.602 3H3.098c-1.64 0-2.766 1.054-2.766 2.554"/></svg>
React
import type { SVGProps } from "react";
export function F7Shuffle(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M.332 40.012c0 1.5 1.102 2.531 2.766 2.531h5.344c4.03 0 6.468-1.172 9.375-4.57l5.273-6.141l5.25 6.14c2.906 3.4 5.32 4.594 9.422 4.594h4.289v5.203c0 1.266.797 2.063 2.11 2.063c.562 0 1.148-.21 1.57-.586l8.859-7.312c1.078-.868 1.055-2.274 0-3.141l-8.86-7.36a2.4 2.4 0 0 0-1.57-.585c-1.312 0-2.11.797-2.11 2.062v4.547h-4.17c-2.414 0-3.914-.773-5.836-3l-5.601-6.539l5.601-6.516c1.922-2.25 3.422-3.023 5.836-3.023h4.172v4.71c0 1.267.797 2.063 2.11 2.063c.562 0 1.148-.21 1.57-.586l8.859-7.312c1.078-.867 1.055-2.25 0-3.14l-8.86-7.36a2.4 2.4 0 0 0-1.57-.586c-1.312 0-2.11.797-2.11 2.062v5.063h-4.288c-4.102 0-6.516 1.195-9.422 4.594l-5.25 6.14l-5.273-6.14c-2.907-3.399-5.344-4.594-9.375-4.594H3.097c-1.664 0-2.766 1.031-2.766 2.555c0 1.5 1.125 2.554 2.766 2.554h5.437c2.274 0 3.703.774 5.602 3l5.601 6.516l-5.601 6.54c-1.922 2.226-3.352 3-5.602 3H3.098c-1.64 0-2.766 1.054-2.766 2.554"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M.332 40.012c0 1.5 1.102 2.531 2.766 2.531h5.344c4.03 0 6.468-1.172 9.375-4.57l5.273-6.141l5.25 6.14c2.906 3.4 5.32 4.594 9.422 4.594h4.289v5.203c0 1.266.797 2.063 2.11 2.063c.562 0 1.148-.21 1.57-.586l8.859-7.312c1.078-.868 1.055-2.274 0-3.141l-8.86-7.36a2.4 2.4 0 0 0-1.57-.585c-1.312 0-2.11.797-2.11 2.062v4.547h-4.17c-2.414 0-3.914-.773-5.836-3l-5.601-6.539l5.601-6.516c1.922-2.25 3.422-3.023 5.836-3.023h4.172v4.71c0 1.267.797 2.063 2.11 2.063c.562 0 1.148-.21 1.57-.586l8.859-7.312c1.078-.867 1.055-2.25 0-3.14l-8.86-7.36a2.4 2.4 0 0 0-1.57-.586c-1.312 0-2.11.797-2.11 2.062v5.063h-4.288c-4.102 0-6.516 1.195-9.422 4.594l-5.25 6.14l-5.273-6.14c-2.907-3.399-5.344-4.594-9.375-4.594H3.097c-1.664 0-2.766 1.031-2.766 2.555c0 1.5 1.125 2.554 2.766 2.554h5.437c2.274 0 3.703.774 5.602 3l5.601 6.516l-5.601 6.54c-1.922 2.226-3.352 3-5.602 3H3.098c-1.64 0-2.766 1.054-2.766 2.554"/></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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M.332%2040.012c0%201.5%201.102%202.531%202.766%202.531h5.344c4.03%200%206.468-1.172%209.375-4.57l5.273-6.141l5.25%206.14c2.906%203.4%205.32%204.594%209.422%204.594h4.289v5.203c0%201.266.797%202.063%202.11%202.063c.562%200%201.148-.21%201.57-.586l8.859-7.312c1.078-.868%201.055-2.274%200-3.141l-8.86-7.36a2.4%202.4%200%200%200-1.57-.585c-1.312%200-2.11.797-2.11%202.062v4.547h-4.17c-2.414%200-3.914-.773-5.836-3l-5.601-6.539l5.601-6.516c1.922-2.25%203.422-3.023%205.836-3.023h4.172v4.71c0%201.267.797%202.063%202.11%202.063c.562%200%201.148-.21%201.57-.586l8.859-7.312c1.078-.867%201.055-2.25%200-3.14l-8.86-7.36a2.4%202.4%200%200%200-1.57-.586c-1.312%200-2.11.797-2.11%202.062v5.063h-4.288c-4.102%200-6.516%201.195-9.422%204.594l-5.25%206.14l-5.273-6.14c-2.907-3.399-5.344-4.594-9.375-4.594H3.097c-1.664%200-2.766%201.031-2.766%202.555c0%201.5%201.125%202.554%202.766%202.554h5.437c2.274%200%203.703.774%205.602%203l5.601%206.516l-5.601%206.54c-1.922%202.226-3.352%203-5.602%203H3.098c-1.64%200-2.766%201.054-2.766%202.554%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M.332%2040.012c0%201.5%201.102%202.531%202.766%202.531h5.344c4.03%200%206.468-1.172%209.375-4.57l5.273-6.141l5.25%206.14c2.906%203.4%205.32%204.594%209.422%204.594h4.289v5.203c0%201.266.797%202.063%202.11%202.063c.562%200%201.148-.21%201.57-.586l8.859-7.312c1.078-.868%201.055-2.274%200-3.141l-8.86-7.36a2.4%202.4%200%200%200-1.57-.585c-1.312%200-2.11.797-2.11%202.062v4.547h-4.17c-2.414%200-3.914-.773-5.836-3l-5.601-6.539l5.601-6.516c1.922-2.25%203.422-3.023%205.836-3.023h4.172v4.71c0%201.267.797%202.063%202.11%202.063c.562%200%201.148-.21%201.57-.586l8.859-7.312c1.078-.867%201.055-2.25%200-3.14l-8.86-7.36a2.4%202.4%200%200%200-1.57-.586c-1.312%200-2.11.797-2.11%202.062v5.063h-4.288c-4.102%200-6.516%201.195-9.422%204.594l-5.25%206.14l-5.273-6.14c-2.907-3.399-5.344-4.594-9.375-4.594H3.097c-1.664%200-2.766%201.031-2.766%202.555c0%201.5%201.125%202.554%202.766%202.554h5.437c2.274%200%203.703.774%205.602%203l5.601%206.516l-5.601%206.54c-1.922%202.226-3.352%203-5.602%203H3.098c-1.64%200-2.766%201.054-2.766%202.554%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/shuffle.svg?color=%231a73e8&size=48
