Text Align Distributed Vertical icon

Use the Text Align Distributed Vertical 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 { TextAlignDistributedVertical24Regular, TextAlignDistributedVertical24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextAlignDistributedVertical24Regular aria-label="Text Align Distributed Vertical" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_align_distributed_vertical_24_regular.svg" width="24" height="24" alt="Text Align Distributed Vertical">

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="M16.7803 5.28033L17.5 4.56066L17.5 21.25C17.5 21.6642 17.8358 22 18.25 22C18.6642 22 19 21.6642 19 21.25V4.56066L19.7197 5.28033C20.0126 5.57322 20.4874 5.57322 20.7803 5.28033C21.0732 4.98744 21.0732 4.51256 20.7803 4.21967L18.7803 2.21967C18.4874 1.92678 18.0126 1.92678 17.7197 2.21967L15.7197 4.21967C15.4268 4.51256 15.4268 4.98744 15.7197 5.28033C16.0126 5.57322 16.4874 5.57322 16.7803 5.28033ZM6 19.4393L6.71967 18.7197C7.01256 18.4268 7.48744 18.4268 7.78033 18.7197C8.07322 19.0126 8.07322 19.4874 7.78033 19.7803L5.78033 21.7803C5.48744 22.0732 5.01256 22.0732 4.71967 21.7803L2.71967 19.7803C2.42678 19.4874 2.42678 19.0126 2.71967 18.7197C3.01256 18.4268 3.48744 18.4268 3.78033 18.7197L4.5 19.4393L4.5 2.75C4.5 2.33579 4.83579 2 5.25 2C5.66421 2 6 2.33579 6 2.75L6 19.4393ZM12.5 2.75C12.5 2.33579 12.1642 2 11.75 2C11.3358 2 11 2.33579 11 2.75L11 21.25C11 21.6642 11.3358 22 11.75 22C12.1642 22 12.5 21.6642 12.5 21.25L12.5 2.75Z" 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/text_align_distributed_vertical_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatealignmentleftrightjustifylowdistributerotate