rotate right icon

rotate-right from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name: rotate-right
Set: Framework7 Icons
Style: Outline
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

The same icon in other sets

rotate-right-outlinedAnt Design Icons rotate-rightBoxIcons v2 rotate-rightFont Awesome 6 Solid rotate-rightFont Awesome Solid rotate-right-20-filledFluent UI System Icons rotate-rightMaterial Symbols rotate-rightMaterial Symbols Light rotate-rightMaterial Design Icons

Related icons in Framework7 Icons

rotate-left

Use the rotate right icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.727 25.106c.539-.258.773-.657.75-1.313c-.07-.844-1.032-2.016-1.032-5.133c0-5.015 3.235-8.531 8.297-8.531h.07v3.21c0 1.852 1.454 2.274 2.86 1.22l6.398-4.664c1.078-.774 1.078-1.688 0-2.485l-6.398-4.687c-1.43-1.079-2.86-.656-2.86 1.242V7.41h-.093c-6.727 0-11.203 4.524-11.203 11.227c0 2.508.515 4.57 1.242 5.812c.398.68 1.242 1.008 1.968.657m37.734 29.25c4.008 0 6.023-1.922 6.023-6.024v-23.18c0-4.101-2.015-6.023-6.023-6.023H22.234c-4.008 0-6.023 1.922-6.023 6.023v23.18c0 4.102 2.016 6.024 6.023 6.024Zm-.07-3.774H22.305c-1.618 0-2.32-.656-2.32-2.32v-23.04c0-1.663.702-2.32 2.32-2.32H45.39c1.617 0 2.32.657 2.32 2.32v23.04c0 1.664-.703 2.32-2.32 2.32"/></svg>

React

import type { SVGProps } from "react";

export function F7RotateRight(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="M7.727 25.106c.539-.258.773-.657.75-1.313c-.07-.844-1.032-2.016-1.032-5.133c0-5.015 3.235-8.531 8.297-8.531h.07v3.21c0 1.852 1.454 2.274 2.86 1.22l6.398-4.664c1.078-.774 1.078-1.688 0-2.485l-6.398-4.687c-1.43-1.079-2.86-.656-2.86 1.242V7.41h-.093c-6.727 0-11.203 4.524-11.203 11.227c0 2.508.515 4.57 1.242 5.812c.398.68 1.242 1.008 1.968.657m37.734 29.25c4.008 0 6.023-1.922 6.023-6.024v-23.18c0-4.101-2.015-6.023-6.023-6.023H22.234c-4.008 0-6.023 1.922-6.023 6.023v23.18c0 4.102 2.016 6.024 6.023 6.024Zm-.07-3.774H22.305c-1.618 0-2.32-.656-2.32-2.32v-23.04c0-1.663.702-2.32 2.32-2.32H45.39c1.617 0 2.32.657 2.32 2.32v23.04c0 1.664-.703 2.32-2.32 2.32"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M7.727 25.106c.539-.258.773-.657.75-1.313c-.07-.844-1.032-2.016-1.032-5.133c0-5.015 3.235-8.531 8.297-8.531h.07v3.21c0 1.852 1.454 2.274 2.86 1.22l6.398-4.664c1.078-.774 1.078-1.688 0-2.485l-6.398-4.687c-1.43-1.079-2.86-.656-2.86 1.242V7.41h-.093c-6.727 0-11.203 4.524-11.203 11.227c0 2.508.515 4.57 1.242 5.812c.398.68 1.242 1.008 1.968.657m37.734 29.25c4.008 0 6.023-1.922 6.023-6.024v-23.18c0-4.101-2.015-6.023-6.023-6.023H22.234c-4.008 0-6.023 1.922-6.023 6.023v23.18c0 4.102 2.016 6.024 6.023 6.024Zm-.07-3.774H22.305c-1.618 0-2.32-.656-2.32-2.32v-23.04c0-1.663.702-2.32 2.32-2.32H45.39c1.617 0 2.32.657 2.32 2.32v23.04c0 1.664-.703 2.32-2.32 2.32"/></svg>
</template>

CSS

.icon-rotate-right {
  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%22M7.727%2025.106c.539-.258.773-.657.75-1.313c-.07-.844-1.032-2.016-1.032-5.133c0-5.015%203.235-8.531%208.297-8.531h.07v3.21c0%201.852%201.454%202.274%202.86%201.22l6.398-4.664c1.078-.774%201.078-1.688%200-2.485l-6.398-4.687c-1.43-1.079-2.86-.656-2.86%201.242V7.41h-.093c-6.727%200-11.203%204.524-11.203%2011.227c0%202.508.515%204.57%201.242%205.812c.398.68%201.242%201.008%201.968.657m37.734%2029.25c4.008%200%206.023-1.922%206.023-6.024v-23.18c0-4.101-2.015-6.023-6.023-6.023H22.234c-4.008%200-6.023%201.922-6.023%206.023v23.18c0%204.102%202.016%206.024%206.023%206.024Zm-.07-3.774H22.305c-1.618%200-2.32-.656-2.32-2.32v-23.04c0-1.663.702-2.32%202.32-2.32H45.39c1.617%200%202.32.657%202.32%202.32v23.04c0%201.664-.703%202.32-2.32%202.32%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%22M7.727%2025.106c.539-.258.773-.657.75-1.313c-.07-.844-1.032-2.016-1.032-5.133c0-5.015%203.235-8.531%208.297-8.531h.07v3.21c0%201.852%201.454%202.274%202.86%201.22l6.398-4.664c1.078-.774%201.078-1.688%200-2.485l-6.398-4.687c-1.43-1.079-2.86-.656-2.86%201.242V7.41h-.093c-6.727%200-11.203%204.524-11.203%2011.227c0%202.508.515%204.57%201.242%205.812c.398.68%201.242%201.008%201.968.657m37.734%2029.25c4.008%200%206.023-1.922%206.023-6.024v-23.18c0-4.101-2.015-6.023-6.023-6.023H22.234c-4.008%200-6.023%201.922-6.023%206.023v23.18c0%204.102%202.016%206.024%206.023%206.024Zm-.07-3.774H22.305c-1.618%200-2.32-.656-2.32-2.32v-23.04c0-1.663.702-2.32%202.32-2.32H45.39c1.617%200%202.32.657%202.32%202.32v23.04c0%201.664-.703%202.32-2.32%202.32%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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