Align Space Evenly Vertical icon

Use the Align Space Evenly 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 { AlignSpaceEvenlyVertical24Regular, AlignSpaceEvenlyVertical24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AlignSpaceEvenlyVertical24Regular aria-label="Align Space Evenly Vertical" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_align_space_evenly_vertical_24_regular.svg" width="24" height="24" alt="Align Space Evenly 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="M6.5 3.5C5.94772 3.5 5.5 3.94772 5.5 4.5V5.5C5.5 6.05228 5.94772 6.5 6.5 6.5H17.5C18.0523 6.5 18.5 6.05229 18.5 5.5V4.5C18.5 3.94772 18.0523 3.5 17.5 3.5H6.5ZM4 4.5C4 3.11929 5.11929 2 6.5 2H17.5C18.8807 2 20 3.11929 20 4.5V5.5C20 6.88071 18.8807 8 17.5 8H6.5C5.11929 8 4 6.88071 4 5.5V4.5ZM6.5 10.5C5.94772 10.5 5.5 10.9477 5.5 11.5V12.5C5.5 13.0523 5.94772 13.5 6.5 13.5H17.5C18.0523 13.5 18.5 13.0523 18.5 12.5V11.5C18.5 10.9477 18.0523 10.5 17.5 10.5H6.5ZM4 11.5C4 10.1193 5.11929 9 6.5 9H17.5C18.8807 9 20 10.1193 20 11.5V12.5C20 13.8807 18.8807 15 17.5 15H6.5C5.11929 15 4 13.8807 4 12.5V11.5ZM5.5 18.5C5.5 17.9477 5.94772 17.5 6.5 17.5H17.5C18.0523 17.5 18.5 17.9477 18.5 18.5V19.5C18.5 20.0523 18.0523 20.5 17.5 20.5H6.5C5.94772 20.5 5.5 20.0523 5.5 19.5V18.5ZM6.5 16C5.11929 16 4 17.1193 4 18.5V19.5C4 20.8807 5.11929 22 6.5 22H17.5C18.8807 22 20 20.8807 20 19.5V18.5C20 17.1193 18.8807 16 17.5 16H6.5Z" 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_space_evenly_vertical_24_regular.svg";

Details

Keywords

alignmenteditdesign