Fluent Icons

Align Straighten icon

Microsoft uses it to straighten or rotate content. The Align Straighten icon is tagged rotation, crop and rotate. Similar Fluent icons include Text Align Center, Text Align Center Rotate 270 and Text Align Center Rotate 90.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_align_straighten_24_regular.svg

Align Straighten icon in React

npm install @fluentui/react-icons

import { AlignStraighten24Regular } from "@fluentui/react-icons";

export function Example() {
  return <AlignStraighten24Regular aria-label="Align Straighten" />;
}

Use the Align Straighten icon in React

Import AlignStraighten24Regular and AlignStraighten24Filled from Microsoft's @fluentui/react-icons package; the code tabs above have this and other platforms. Coding agents can look the component up through the Fluent Icons MCP server.

Details

NameAlign Straighten
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_align_straighten_24_regular.svg
Filled fileic_fluent_align_straighten_24_filled.svg
React (Regular)AlignStraighten20Regular, AlignStraighten24Regular
React (Filled)AlignStraighten20Filled, AlignStraighten24Filled
Font glyph (Regular, 24 px)U+F01B7 · &#xF01B7;
Font glyph (Filled, 24 px)U+F01B7 · &#xF01B7;
LicenseMIT (© Microsoft Corporation)

Keywords

alignmenteditdesignrotateimage

Similar icons

Text Align CenterText Align Center Rotate 270Text Align Center Rotate 90Text Align DistributedText Align Distributed EvenlyText Align Distributed VerticalText Align JustifyText Align Justify LowText Align Justify Low Rotate 270Text Align Justify Low Rotate 90Text Align Justify Rotate 270Text Align Justify Rotate 90