Layout Column Two Edit icon

Use the Layout Column Two Edit 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 { LayoutColumnTwoEdit24Regular, LayoutColumnTwoEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LayoutColumnTwoEdit24Regular aria-label="Layout Column Two Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_layout_column_two_edit_24_regular.svg" width="24" height="24" alt="Layout Column Two Edit">

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="M19.0996 12.6699C19.9922 11.7773 21.4394 11.7773 22.332 12.6699C23.2245 13.5625 23.2246 15.0098 22.332 15.9023L16.4297 21.8047C16.0856 22.1486 15.6546 22.3927 15.1826 22.5107L13.3516 22.9688C12.5556 23.1676 11.8345 22.4463 12.0332 21.6504L12.4912 19.8193C12.6092 19.3473 12.8533 18.9163 13.1973 18.5723L19.0996 12.6699ZM17.75 3C19.5449 3 21 4.45507 21 6.25V11.0117C20.4936 10.9682 19.9788 11.0418 19.5 11.2324V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H12.75V17.6055L12.4912 17.8652C12.019 18.3375 11.6835 18.9293 11.5215 19.5771L11.166 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.25V4.5H6.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/layout_column_two_edit_24_regular.svg";

Details

Keywords

uilayoutstructurecustomize