rotate left icon

rotate-left-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.

Name: rotate-left-20-regular
Set: Fluent UI System Icons
Style: 20 Regular
Viewbox: 20×20
License: MIT

4 other variants in Fluent UI System Icons

rotate-left-20-filled rotate-left-24-filled rotate-left-24-regular rotate-left-32-light

The same icon in other sets

rotate-left-outlinedAnt Design Icons rotate-leftBoxIcons v2 rotate-leftFramework7 Icons rotate-leftFont Awesome 6 Solid rotate-leftFont Awesome Solid rotate-leftMaterial Symbols rotate-leftMaterial Symbols Light rotate-leftMaterial Design Icons

Related icons in Fluent UI System Icons

rotate-right-20-filled

Use the rotate left icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12.387 12a.526.526 0 0 1-.532-.52c0-.286.238-.519.532-.519h.355c1.764 0 3.193-1.084 3.193-2.423c0-1.297-1.344-2.357-3.034-2.42l-.16-.003H7.818l1.22 1.19a.51.51 0 0 1 0 .735a.54.54 0 0 1-.692.05l-.06-.05l-2.13-2.077a.51.51 0 0 1 0-.734l2.13-2.077l.06-.05a.54.54 0 0 1 .693.05a.51.51 0 0 1 0 .734l-1.22 1.19h4.924c2.352 0 4.258 1.55 4.258 3.462S15.094 12 12.742 12zM4 10.413V16h10.18zM3.794 17C3.355 17 3 16.663 3 16.248V9.376C3 9.168 3.178 9 3.397 9q.106 0 .199.05l13.206 7.248c.19.104.254.335.145.514a.4.4 0 0 1-.344.188z"/></svg>

React

import type { SVGProps } from "react";

export function FluentRotateLeft20Regular(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="M12.387 12a.526.526 0 0 1-.532-.52c0-.286.238-.519.532-.519h.355c1.764 0 3.193-1.084 3.193-2.423c0-1.297-1.344-2.357-3.034-2.42l-.16-.003H7.818l1.22 1.19a.51.51 0 0 1 0 .735a.54.54 0 0 1-.692.05l-.06-.05l-2.13-2.077a.51.51 0 0 1 0-.734l2.13-2.077l.06-.05a.54.54 0 0 1 .693.05a.51.51 0 0 1 0 .734l-1.22 1.19h4.924c2.352 0 4.258 1.55 4.258 3.462S15.094 12 12.742 12zM4 10.413V16h10.18zM3.794 17C3.355 17 3 16.663 3 16.248V9.376C3 9.168 3.178 9 3.397 9q.106 0 .199.05l13.206 7.248c.19.104.254.335.145.514a.4.4 0 0 1-.344.188z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M12.387 12a.526.526 0 0 1-.532-.52c0-.286.238-.519.532-.519h.355c1.764 0 3.193-1.084 3.193-2.423c0-1.297-1.344-2.357-3.034-2.42l-.16-.003H7.818l1.22 1.19a.51.51 0 0 1 0 .735a.54.54 0 0 1-.692.05l-.06-.05l-2.13-2.077a.51.51 0 0 1 0-.734l2.13-2.077l.06-.05a.54.54 0 0 1 .693.05a.51.51 0 0 1 0 .734l-1.22 1.19h4.924c2.352 0 4.258 1.55 4.258 3.462S15.094 12 12.742 12zM4 10.413V16h10.18zM3.794 17C3.355 17 3 16.663 3 16.248V9.376C3 9.168 3.178 9 3.397 9q.106 0 .199.05l13.206 7.248c.19.104.254.335.145.514a.4.4 0 0 1-.344.188z"/></svg>
</template>

CSS

.icon-rotate-left-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%22M12.387%2012a.526.526%200%200%201-.532-.52c0-.286.238-.519.532-.519h.355c1.764%200%203.193-1.084%203.193-2.423c0-1.297-1.344-2.357-3.034-2.42l-.16-.003H7.818l1.22%201.19a.51.51%200%200%201%200%20.735a.54.54%200%200%201-.692.05l-.06-.05l-2.13-2.077a.51.51%200%200%201%200-.734l2.13-2.077l.06-.05a.54.54%200%200%201%20.693.05a.51.51%200%200%201%200%20.734l-1.22%201.19h4.924c2.352%200%204.258%201.55%204.258%203.462S15.094%2012%2012.742%2012zM4%2010.413V16h10.18zM3.794%2017C3.355%2017%203%2016.663%203%2016.248V9.376C3%209.168%203.178%209%203.397%209q.106%200%20.199.05l13.206%207.248c.19.104.254.335.145.514a.4.4%200%200%201-.344.188z%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%22M12.387%2012a.526.526%200%200%201-.532-.52c0-.286.238-.519.532-.519h.355c1.764%200%203.193-1.084%203.193-2.423c0-1.297-1.344-2.357-3.034-2.42l-.16-.003H7.818l1.22%201.19a.51.51%200%200%201%200%20.735a.54.54%200%200%201-.692.05l-.06-.05l-2.13-2.077a.51.51%200%200%201%200-.734l2.13-2.077l.06-.05a.54.54%200%200%201%20.693.05a.51.51%200%200%201%200%20.734l-1.22%201.19h4.924c2.352%200%204.258%201.55%204.258%203.462S15.094%2012%2012.742%2012zM4%2010.413V16h10.18zM3.794%2017C3.355%2017%203%2016.663%203%2016.248V9.376C3%209.168%203.178%209%203.397%209q.106%200%20.199.05l13.206%207.248c.19.104.254.335.145.514a.4.4%200%200%201-.344.188z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/rotate-left-20-regular.svg?color=%231a73e8&size=48