counterclockwise arrows button emoji

counterclockwise-arrows-button from Fluent Emoji High Contrast by Microsoft Corporation · Default · Symbols · MIT Free for personal and commercial use.

Name
counterclockwise-arrows-button
Set
Fluent Emoji High Contrast
Style
Default
Category
Symbols
Viewbox
32×32
License
MIT

The same emoji in other sets

More symbols icons from Fluent Emoji High Contrast

Use the counterclockwise arrows button emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M8.641 15.054a.7.7 0 0 1-.695-.695l-.031-6.14a.699.699 0 0 1 1.192-.497l1.782 1.782c.09.09.232.098.334.022a8.003 8.003 0 0 1 12.625 4.858a.474.474 0 0 1-.476.56h-2.063a.54.54 0 0 1-.507-.397a5.002 5.002 0 0 0-7.356-2.903a.24.24 0 0 0-.041.376l1.873 1.873a.698.698 0 0 1-.498 1.192zm12.289 7.461l1.762 1.763a.699.699 0 0 0 1.192-.498l-.031-6.139a.7.7 0 0 0-.695-.695l-6.14-.032a.699.699 0 0 0-.497 1.193l1.874 1.873a.238.238 0 0 1-.051.381a5.002 5.002 0 0 1-7.146-3.02a.54.54 0 0 0-.507-.397H8.628c-.3 0-.534.264-.476.559a8.003 8.003 0 0 0 12.45 4.986a.256.256 0 0 1 .327.026"/><path d="M6 1h20a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V6a5 5 0 0 1 5-5M3 6v20a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiHighContrastCounterclockwiseArrowsButton(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M8.641 15.054a.7.7 0 0 1-.695-.695l-.031-6.14a.699.699 0 0 1 1.192-.497l1.782 1.782c.09.09.232.098.334.022a8.003 8.003 0 0 1 12.625 4.858a.474.474 0 0 1-.476.56h-2.063a.54.54 0 0 1-.507-.397a5.002 5.002 0 0 0-7.356-2.903a.24.24 0 0 0-.041.376l1.873 1.873a.698.698 0 0 1-.498 1.192zm12.289 7.461l1.762 1.763a.699.699 0 0 0 1.192-.498l-.031-6.139a.7.7 0 0 0-.695-.695l-6.14-.032a.699.699 0 0 0-.497 1.193l1.874 1.873a.238.238 0 0 1-.051.381a5.002 5.002 0 0 1-7.146-3.02a.54.54 0 0 0-.507-.397H8.628c-.3 0-.534.264-.476.559a8.003 8.003 0 0 0 12.45 4.986a.256.256 0 0 1 .327.026"/><path d="M6 1h20a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V6a5 5 0 0 1 5-5M3 6v20a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="currentColor"><path d="M8.641 15.054a.7.7 0 0 1-.695-.695l-.031-6.14a.699.699 0 0 1 1.192-.497l1.782 1.782c.09.09.232.098.334.022a8.003 8.003 0 0 1 12.625 4.858a.474.474 0 0 1-.476.56h-2.063a.54.54 0 0 1-.507-.397a5.002 5.002 0 0 0-7.356-2.903a.24.24 0 0 0-.041.376l1.873 1.873a.698.698 0 0 1-.498 1.192zm12.289 7.461l1.762 1.763a.699.699 0 0 0 1.192-.498l-.031-6.139a.7.7 0 0 0-.695-.695l-6.14-.032a.699.699 0 0 0-.497 1.193l1.874 1.873a.238.238 0 0 1-.051.381a5.002 5.002 0 0 1-7.146-3.02a.54.54 0 0 0-.507-.397H8.628c-.3 0-.534.264-.476.559a8.003 8.003 0 0 0 12.45 4.986a.256.256 0 0 1 .327.026"/><path d="M6 1h20a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V6a5 5 0 0 1 5-5M3 6v20a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3"/></g></svg>
</template>

CSS

.icon-counterclockwise-arrows-button {
  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%2032%2032%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M8.641%2015.054a.7.7%200%200%201-.695-.695l-.031-6.14a.699.699%200%200%201%201.192-.497l1.782%201.782c.09.09.232.098.334.022a8.003%208.003%200%200%201%2012.625%204.858a.474.474%200%200%201-.476.56h-2.063a.54.54%200%200%201-.507-.397a5.002%205.002%200%200%200-7.356-2.903a.24.24%200%200%200-.041.376l1.873%201.873a.698.698%200%200%201-.498%201.192zm12.289%207.461l1.762%201.763a.699.699%200%200%200%201.192-.498l-.031-6.139a.7.7%200%200%200-.695-.695l-6.14-.032a.699.699%200%200%200-.497%201.193l1.874%201.873a.238.238%200%200%201-.051.381a5.002%205.002%200%200%201-7.146-3.02a.54.54%200%200%200-.507-.397H8.628c-.3%200-.534.264-.476.559a8.003%208.003%200%200%200%2012.45%204.986a.256.256%200%200%201%20.327.026%22%2F%3E%3Cpath%20d%3D%22M6%201h20a5%205%200%200%201%205%205v20a5%205%200%200%201-5%205H6a5%205%200%200%201-5-5V6a5%205%200%200%201%205-5M3%206v20a3%203%200%200%200%203%203h20a3%203%200%200%200%203-3V6a3%203%200%200%200-3-3H6a3%203%200%200%200-3%203%22%2F%3E%3C%2Fg%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%2032%2032%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M8.641%2015.054a.7.7%200%200%201-.695-.695l-.031-6.14a.699.699%200%200%201%201.192-.497l1.782%201.782c.09.09.232.098.334.022a8.003%208.003%200%200%201%2012.625%204.858a.474.474%200%200%201-.476.56h-2.063a.54.54%200%200%201-.507-.397a5.002%205.002%200%200%200-7.356-2.903a.24.24%200%200%200-.041.376l1.873%201.873a.698.698%200%200%201-.498%201.192zm12.289%207.461l1.762%201.763a.699.699%200%200%200%201.192-.498l-.031-6.139a.7.7%200%200%200-.695-.695l-6.14-.032a.699.699%200%200%200-.497%201.193l1.874%201.873a.238.238%200%200%201-.051.381a5.002%205.002%200%200%201-7.146-3.02a.54.54%200%200%200-.507-.397H8.628c-.3%200-.534.264-.476.559a8.003%208.003%200%200%200%2012.45%204.986a.256.256%200%200%201%20.327.026%22%2F%3E%3Cpath%20d%3D%22M6%201h20a5%205%200%200%201%205%205v20a5%205%200%200%201-5%205H6a5%205%200%200%201-5-5V6a5%205%200%200%201%205-5M3%206v20a3%203%200%200%200%203%203h20a3%203%200%200%200%203-3V6a3%203%200%200%200-3-3H6a3%203%200%200%200-3%203%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-emoji-high-contrast/counterclockwise-arrows-button.svg?color=%231a73e8&size=48

Counterclockwise Arrows Button emoji — Fluent Emoji High Contrast · IconsDB