cycle icon
cycle from Material Symbols by Google · Regular · UI Actions · Apache-2.0 Free for personal and commercial use.
- Name
- cycle
- Set
- Material Symbols
- Style
- Regular
- Category
- UI Actions
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- cycle-outline, cycle-outline-sharp, cycle-sharp
1 other variant in Material Symbols
The same icon in other sets
More ui actions icons from Material Symbols
Use the cycle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.85 21.125q-2.6-1.2-4.225-3.625T2 12.025q0-.65.063-1.275t.212-1.225l-1.15.675l-1-1.725L4.9 5.725l2.75 4.75l-1.75 1l-1.35-2.35q-.275.675-.412 1.4T4 12.025q0 2.425 1.325 4.413t3.525 2.937zM15.5 9V7h2.725q-1.15-1.425-2.775-2.212T12 4q-1.375 0-2.6.425t-2.25 1.2l-1-1.75Q7.4 3 8.875 2.5T12 2q1.975 0 3.775.738T19 4.874V3.5h2V9zm-.65 15l-4.775-2.75l2.75-4.75l1.725 1l-1.425 2.45q2.95-.425 4.913-2.675T20 12q0-.275-.012-.513T19.925 11h2.025q.025.25.038.488T22 12q0 3.375-2.013 6.038t-5.237 3.587l1.1.65z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsCycle(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="M7.85 21.125q-2.6-1.2-4.225-3.625T2 12.025q0-.65.063-1.275t.212-1.225l-1.15.675l-1-1.725L4.9 5.725l2.75 4.75l-1.75 1l-1.35-2.35q-.275.675-.412 1.4T4 12.025q0 2.425 1.325 4.413t3.525 2.937zM15.5 9V7h2.725q-1.15-1.425-2.775-2.212T12 4q-1.375 0-2.6.425t-2.25 1.2l-1-1.75Q7.4 3 8.875 2.5T12 2q1.975 0 3.775.738T19 4.874V3.5h2V9zm-.65 15l-4.775-2.75l2.75-4.75l1.725 1l-1.425 2.45q2.95-.425 4.913-2.675T20 12q0-.275-.012-.513T19.925 11h2.025q.025.25.038.488T22 12q0 3.375-2.013 6.038t-5.237 3.587l1.1.65z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.85 21.125q-2.6-1.2-4.225-3.625T2 12.025q0-.65.063-1.275t.212-1.225l-1.15.675l-1-1.725L4.9 5.725l2.75 4.75l-1.75 1l-1.35-2.35q-.275.675-.412 1.4T4 12.025q0 2.425 1.325 4.413t3.525 2.937zM15.5 9V7h2.725q-1.15-1.425-2.775-2.212T12 4q-1.375 0-2.6.425t-2.25 1.2l-1-1.75Q7.4 3 8.875 2.5T12 2q1.975 0 3.775.738T19 4.874V3.5h2V9zm-.65 15l-4.775-2.75l2.75-4.75l1.725 1l-1.425 2.45q2.95-.425 4.913-2.675T20 12q0-.275-.012-.513T19.925 11h2.025q.025.25.038.488T22 12q0 3.375-2.013 6.038t-5.237 3.587l1.1.65z"/></svg> </template>
CSS
.icon-cycle {
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%22M7.85%2021.125q-2.6-1.2-4.225-3.625T2%2012.025q0-.65.063-1.275t.212-1.225l-1.15.675l-1-1.725L4.9%205.725l2.75%204.75l-1.75%201l-1.35-2.35q-.275.675-.412%201.4T4%2012.025q0%202.425%201.325%204.413t3.525%202.937zM15.5%209V7h2.725q-1.15-1.425-2.775-2.212T12%204q-1.375%200-2.6.425t-2.25%201.2l-1-1.75Q7.4%203%208.875%202.5T12%202q1.975%200%203.775.738T19%204.874V3.5h2V9zm-.65%2015l-4.775-2.75l2.75-4.75l1.725%201l-1.425%202.45q2.95-.425%204.913-2.675T20%2012q0-.275-.012-.513T19.925%2011h2.025q.025.25.038.488T22%2012q0%203.375-2.013%206.038t-5.237%203.587l1.1.65z%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%22M7.85%2021.125q-2.6-1.2-4.225-3.625T2%2012.025q0-.65.063-1.275t.212-1.225l-1.15.675l-1-1.725L4.9%205.725l2.75%204.75l-1.75%201l-1.35-2.35q-.275.675-.412%201.4T4%2012.025q0%202.425%201.325%204.413t3.525%202.937zM15.5%209V7h2.725q-1.15-1.425-2.775-2.212T12%204q-1.375%200-2.6.425t-2.25%201.2l-1-1.75Q7.4%203%208.875%202.5T12%202q1.975%200%203.775.738T19%204.874V3.5h2V9zm-.65%2015l-4.775-2.75l2.75-4.75l1.725%201l-1.425%202.45q2.95-.425%204.913-2.675T20%2012q0-.275-.012-.513T19.925%2011h2.025q.025.25.038.488T22%2012q0%203.375-2.013%206.038t-5.237%203.587l1.1.65z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/cycle.svg?color=%231a73e8&size=48
