Align Straighten icon

Use the Align Straighten icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_align_straighten_24_regular.svg" width="24" height="24" alt="Align Straighten">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.07773 9.04005C2.68924 7.28767 3.79489 5.55216 5.54727 5.16366L14.9607 3.07676C16.7131 2.68826 18.4486 3.79391 18.8371 5.54629L19.8799 10.25H18.3435L17.3726 5.87095C17.1635 4.92736 16.2289 4.33201 15.2854 4.5412L5.87193 6.62811C4.92834 6.8373 4.33299 7.77181 4.54218 8.71539L4.88238 10.25H3.34597L3.07773 9.04005ZM19.1194 13.75H20.6558L20.924 14.9597C21.3125 16.7121 20.2068 18.4476 18.4545 18.8361L9.04103 20.923C7.28865 21.3115 5.55313 20.2059 5.16464 18.4535L4.1219 13.75H5.65832L6.62909 18.1288C6.83827 19.0724 7.77278 19.6678 8.71637 19.4586L18.1298 17.3717C19.0734 17.1625 19.6687 16.228 19.4596 15.2844L19.1194 13.75ZM1 12C1 11.5858 1.33579 11.25 1.75 11.25H4.25C4.66421 11.25 5 11.5858 5 12C5 12.4142 4.66421 12.75 4.25 12.75H1.75C1.33579 12.75 1 12.4142 1 12ZM7 12C7 11.5858 7.33579 11.25 7.75 11.25H10.25C10.6642 11.25 11 11.5858 11 12C11 12.4142 10.6642 12.75 10.25 12.75H7.75C7.33579 12.75 7 12.4142 7 12ZM13.75 11.25C13.3358 11.25 13 11.5858 13 12C13 12.4142 13.3358 12.75 13.75 12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.5858 16.6642 11.25 16.25 11.25H13.75ZM19 12C19 11.5858 19.3358 11.25 19.75 11.25H22.25C22.6642 11.25 23 11.5858 23 12C23 12.4142 22.6642 12.75 22.25 12.75H19.75C19.3358 12.75 19 12.4142 19 12Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/align_straighten_24_regular.svg";

Details

Keywords

alignalignmenteditdesignstraightenrotaterotationimagecrop