Align Bottom icon

Use the Align Bottom 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 { AlignBottom24Regular, AlignBottom24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2.75 21C2.33579 21 2 20.6642 2 20.25C2 19.8358 2.33579 19.5 2.75 19.5H21.25C21.6642 19.5 22 19.8358 22 20.25C22 20.6642 21.6642 21 21.25 21H2.75ZM4 15.75C4 16.9926 5.00736 18 6.25 18H8.75C9.99264 18 11 16.9926 11 15.75L11 5.25C11 4.00736 9.99264 3 8.75 3H6.25C5.00736 3 4 4.00736 4 5.25L4 15.75ZM6.25 16.5C5.83579 16.5 5.5 16.1642 5.5 15.75L5.5 5.25C5.5 4.83579 5.83579 4.5 6.25 4.5H8.75C9.16421 4.5 9.5 4.83579 9.5 5.25L9.5 15.75C9.5 16.1642 9.16421 16.5 8.75 16.5H6.25ZM13 15.75C13 16.9926 14.0074 18 15.25 18H17.75C18.9926 18 20 16.9926 20 15.75V8.75C20 7.50736 18.9926 6.5 17.75 6.5H15.25C14.0074 6.5 13 7.50736 13 8.75L13 15.75ZM15.25 16.5C14.8358 16.5 14.5 16.1642 14.5 15.75L14.5 8.75C14.5 8.33579 14.8358 8 15.25 8H17.75C18.1642 8 18.5 8.33579 18.5 8.75V15.75C18.5 16.1642 18.1642 16.5 17.75 16.5H15.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_bottom_24_regular.svg";

Details

Keywords

alignmenteditdesign