Align Right icon

Use the Align Right 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 { AlignRight24Regular, AlignRight24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M21 2.75C21 2.33579 20.6642 2 20.25 2C19.8358 2 19.5 2.33579 19.5 2.75V21.25C19.5 21.6642 19.8358 22 20.25 22C20.6642 22 21 21.6642 21 21.25V2.75ZM15.75 4C16.9926 4 18 5.00736 18 6.25V8.75C18 9.99264 16.9926 11 15.75 11L5.25 11C4.00736 11 3 9.99264 3 8.75V6.25C3 5.00736 4.00736 4 5.25 4L15.75 4ZM16.5 6.25C16.5 5.83579 16.1642 5.5 15.75 5.5L5.25 5.5C4.83579 5.5 4.5 5.83579 4.5 6.25V8.75C4.5 9.16421 4.83579 9.5 5.25 9.5L15.75 9.5C16.1642 9.5 16.5 9.16421 16.5 8.75V6.25ZM15.75 13C16.9926 13 18 14.0074 18 15.25V17.75C18 18.9926 16.9926 20 15.75 20H8.75C7.50736 20 6.5 18.9926 6.5 17.75V15.25C6.5 14.0074 7.50736 13 8.75 13L15.75 13ZM16.5 15.25C16.5 14.8358 16.1642 14.5 15.75 14.5L8.75 14.5C8.33579 14.5 8 14.8358 8 15.25V17.75C8 18.1642 8.33579 18.5 8.75 18.5H15.75C16.1642 18.5 16.5 18.1642 16.5 17.75V15.25Z" 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_right_24_regular.svg";

Details

Keywords

alignmenteditdesign