Column Triple Edit icon

Use the Column Triple 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 { ColumnTripleEdit24Regular, ColumnTripleEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ColumnTripleEdit24Regular aria-label="Column Triple Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_column_triple_edit_24_regular.svg" width="24" height="24" alt="Column Triple 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.6699ZM5.5 3C6.88071 3 8 4.11929 8 5.5V18.5C8 19.8807 6.88071 21 5.5 21H4.5C3.11929 21 2 19.8807 2 18.5V5.5C2 4.11929 3.11929 3 4.5 3H5.5ZM12.5 3C13.8807 3 15 4.11929 15 5.5V15.3555L13.5 16.8555V5.5C13.5 4.94771 13.0523 4.5 12.5 4.5H11.5C10.9477 4.5 10.5 4.94771 10.5 5.5V18.5C10.5 19.0523 10.9477 19.5 11.5 19.5H11.541C11.534 19.5255 11.5269 19.5515 11.5205 19.5771L11.1709 20.9785C9.94592 20.8172 9 19.769 9 18.5V5.5C9 4.11929 10.1193 3 11.5 3H12.5ZM4.5 4.5C3.94772 4.5 3.5 4.94771 3.5 5.5V18.5C3.5 19.0523 3.94772 19.5 4.5 19.5H5.5C6.05228 19.5 6.5 19.0523 6.5 18.5V5.5C6.5 4.94771 6.05228 4.5 5.5 4.5H4.5ZM19.5 3C20.8807 3 22 4.11929 22 5.5V11.2607C21.5233 11.0586 21.0085 10.9735 20.5 11.0068V5.5C20.5 4.94771 20.0523 4.5 19.5 4.5H18.5C17.9477 4.5 17.5 4.94771 17.5 5.5V12.8555L16 14.3555V5.5C16 4.11929 17.1193 3 18.5 3H19.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/column_triple_edit_24_regular.svg";

Details

Keywords

contentgridalignmenteditpencil