rotate left icon

rotate-left from Font Awesome Solid by Dave Gandy · Solid · CC-BY-4.0 Attribution required.

Name: rotate-left
Set: Font Awesome Solid
Style: Solid
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

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

Related icons in Font Awesome Solid

rotate-back rotate-backward rotate-forward rotate-right

Use the rotate left icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M88 256h144c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6 184.3-53.3 253.5 15.9c75 75 75 196.5 0 271.5s-196.5 75-271.5 0c-10.2-10.2-19-21.3-26.4-33c-9.5-14.9-29.3-19.3-44.2-9.8s-19.3 29.3-9.8 44.2c9.8 15.6 21.5 30.4 35.1 43.9c100 100 262 100 362 0s100-262 0-362c-94.2-94.3-243.7-99.7-344.3-16.2L105 71c-6.9-6.8-17.2-8.9-26.2-5.2S64 78.3 64 88v144c0 13.3 10.7 24 24 24"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidRotateLeft(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M88 256h144c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6 184.3-53.3 253.5 15.9c75 75 75 196.5 0 271.5s-196.5 75-271.5 0c-10.2-10.2-19-21.3-26.4-33c-9.5-14.9-29.3-19.3-44.2-9.8s-19.3 29.3-9.8 44.2c9.8 15.6 21.5 30.4 35.1 43.9c100 100 262 100 362 0s100-262 0-362c-94.2-94.3-243.7-99.7-344.3-16.2L105 71c-6.9-6.8-17.2-8.9-26.2-5.2S64 78.3 64 88v144c0 13.3 10.7 24 24 24"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M88 256h144c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6 184.3-53.3 253.5 15.9c75 75 75 196.5 0 271.5s-196.5 75-271.5 0c-10.2-10.2-19-21.3-26.4-33c-9.5-14.9-29.3-19.3-44.2-9.8s-19.3 29.3-9.8 44.2c9.8 15.6 21.5 30.4 35.1 43.9c100 100 262 100 362 0s100-262 0-362c-94.2-94.3-243.7-99.7-344.3-16.2L105 71c-6.9-6.8-17.2-8.9-26.2-5.2S64 78.3 64 88v144c0 13.3 10.7 24 24 24"/></svg>
</template>

CSS

.icon-rotate-left {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M88%20256h144c9.7%200%2018.5-5.8%2022.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6%20184.3-53.3%20253.5%2015.9c75%2075%2075%20196.5%200%20271.5s-196.5%2075-271.5%200c-10.2-10.2-19-21.3-26.4-33c-9.5-14.9-29.3-19.3-44.2-9.8s-19.3%2029.3-9.8%2044.2c9.8%2015.6%2021.5%2030.4%2035.1%2043.9c100%20100%20262%20100%20362%200s100-262%200-362c-94.2-94.3-243.7-99.7-344.3-16.2L105%2071c-6.9-6.8-17.2-8.9-26.2-5.2S64%2078.3%2064%2088v144c0%2013.3%2010.7%2024%2024%2024%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M88%20256h144c9.7%200%2018.5-5.8%2022.2-14.8s1.7-19.3-5.2-26.2l-46.7-46.7c75.3-58.6%20184.3-53.3%20253.5%2015.9c75%2075%2075%20196.5%200%20271.5s-196.5%2075-271.5%200c-10.2-10.2-19-21.3-26.4-33c-9.5-14.9-29.3-19.3-44.2-9.8s-19.3%2029.3-9.8%2044.2c9.8%2015.6%2021.5%2030.4%2035.1%2043.9c100%20100%20262%20100%20362%200s100-262%200-362c-94.2-94.3-243.7-99.7-344.3-16.2L105%2071c-6.9-6.8-17.2-8.9-26.2-5.2S64%2078.3%2064%2088v144c0%2013.3%2010.7%2024%2024%2024%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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