Gentleface › Text & formatting › text-rotate

text-rotate icon

Text rotate: text rotation, rotate text, vertical text. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.628 8.372L1.99 3.004L1.99 3.004L1.832 2.683L2.689 1.826L3.01 1.984L3.01 1.984L8.372 4.628L7.928 5.072L7.928 5.072L7.655 5.345L6.135 4.567L4.548 6.154L5.321 7.679L4.628 8.372ZM3.698 3.309L2.89 2.89L2.859 2.92L3.278 3.728L4.118 5.406L5.376 4.148L3.698 3.309ZM10.144 4.144C10.241 4.048 10.359 4 10.5 4L13.5 4C13.641 4 13.759 4.048 13.856 4.144C13.952 4.241 14 4.359 14 4.5C14 4.641 13.952 4.759 13.856 4.856C13.759 4.952 13.641 5 13.5 5L12.4 5C12.57 5.333 12.705 5.684 12.806 6.051C13.006 6.784 13.052 7.526 12.945 8.278C12.837 9.03 12.585 9.729 12.188 10.376C11.822 10.972 11.36 11.48 10.8 11.9C10.24 12.32 9.623 12.622 8.949 12.806C8.216 13.006 7.474 13.052 6.722 12.945C5.97 12.837 5.271 12.585 4.624 12.188C4.028 11.822 3.52 11.36 3.1 10.8C3.017 10.69 2.985 10.566 3.005 10.429C3.025 10.293 3.09 10.183 3.2 10.1C3.313 10.015 3.436 9.983 3.571 10.002C3.706 10.021 3.815 10.087 3.9 10.2C4.243 10.658 4.659 11.036 5.147 11.336C5.676 11.661 6.249 11.867 6.864 11.955C7.479 12.043 8.086 12.005 8.685 11.841C9.237 11.69 9.742 11.443 10.2 11.1C10.658 10.757 11.036 10.341 11.336 9.853C11.661 9.324 11.867 8.751 11.955 8.136C12.043 7.521 12.005 6.914 11.841 6.315C11.712 5.842 11.512 5.404 11.242 5L11 5L11 7.5C11 7.641 10.952 7.759 10.856 7.856C10.759 7.952 10.641 8 10.5 8C10.359 8 10.241 7.952 10.144 7.856C10.048 7.759 10 7.641 10 7.5L10 4.5C10 4.359 10.048 4.241 10.144 4.144Z"/></svg>

React

// Gentleface "text-rotate" (line-round), MIT. https://gentleface.com/icons/text-rotate
import type { SVGProps } from 'react';

export function TextRotateIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M4.628 8.372L1.99 3.004L1.99 3.004L1.832 2.683L2.689 1.826L3.01 1.984L3.01 1.984L8.372 4.628L7.928 5.072L7.928 5.072L7.655 5.345L6.135 4.567L4.548 6.154L5.321 7.679L4.628 8.372ZM3.698 3.309L2.89 2.89L2.859 2.92L3.278 3.728L4.118 5.406L5.376 4.148L3.698 3.309ZM10.144 4.144C10.241 4.048 10.359 4 10.5 4L13.5 4C13.641 4 13.759 4.048 13.856 4.144C13.952 4.241 14 4.359 14 4.5C14 4.641 13.952 4.759 13.856 4.856C13.759 4.952 13.641 5 13.5 5L12.4 5C12.57 5.333 12.705 5.684 12.806 6.051C13.006 6.784 13.052 7.526 12.945 8.278C12.837 9.03 12.585 9.729 12.188 10.376C11.822 10.972 11.36 11.48 10.8 11.9C10.24 12.32 9.623 12.622 8.949 12.806C8.216 13.006 7.474 13.052 6.722 12.945C5.97 12.837 5.271 12.585 4.624 12.188C4.028 11.822 3.52 11.36 3.1 10.8C3.017 10.69 2.985 10.566 3.005 10.429C3.025 10.293 3.09 10.183 3.2 10.1C3.313 10.015 3.436 9.983 3.571 10.002C3.706 10.021 3.815 10.087 3.9 10.2C4.243 10.658 4.659 11.036 5.147 11.336C5.676 11.661 6.249 11.867 6.864 11.955C7.479 12.043 8.086 12.005 8.685 11.841C9.237 11.69 9.742 11.443 10.2 11.1C10.658 10.757 11.036 10.341 11.336 9.853C11.661 9.324 11.867 8.751 11.955 8.136C12.043 7.521 12.005 6.914 11.841 6.315C11.712 5.842 11.512 5.404 11.242 5L11 5L11 7.5C11 7.641 10.952 7.759 10.856 7.856C10.759 7.952 10.641 8 10.5 8C10.359 8 10.241 7.952 10.144 7.856C10.048 7.759 10 7.641 10 7.5L10 4.5C10 4.359 10.048 4.241 10.144 4.144Z" />
    </svg>
  );
}

Vue

Vue: see /icons/text-rotate.md

Svelte

Svelte: see /icons/text-rotate.md

HTML img

HTML img: see /icons/text-rotate.md

CSS

CSS: see /icons/text-rotate.md

Data URL

Data URL: see /icons/text-rotate.md

Sprite

Sprite: see /icons/text-rotate.md

SwiftUI

SwiftUI: see /icons/text-rotate.md

Compose

Compose: see /icons/text-rotate.md

Android XML

Android XML: see /icons/text-rotate.md

Flutter

Flutter: see /icons/text-rotate.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { TextRotateIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

text rotation, rotate text, vertical text

Don’t confuse with

rotate-cw: rotate-cw rotates an object

Tags

text rotation, rotate text, text direction, vertical text, orientation, angle, spreadsheet, cell, text, format, a

Category

Text & formatting

Component name

TextRotateIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

Family 38

bold case-lower case-sensitive case-sensitive-arrow-down case-sensitive-off case-sensitive-plus case-sensitive-swap case-title case-upper footnote heading heading-1

More text & formatting icons

align-center align-justify align-justify-center align-left align-right asterisk border-all border-bottom border-horizontal border-inner border-left border-none border-outer border-right border-top border-vertical · all text & formatting icons

For agents

Metadata: /icons/text-rotate.json · Markdown: /icons/text-rotate.md · SVG: https://gentleface.com/svg/{style}/16/text-rotate.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/text-rotate.png

text-rotate icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp