Column Edit icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_column_edit_24_regular.svg" width="24" height="24" alt="Column 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="M3.25 3C2.83579 3 2.5 3.33579 2.5 3.75C2.5 4.16421 2.83579 4.5 3.25 4.5H3.75C4.44036 4.5 5 5.05964 5 5.75V18.25C5 18.9404 4.44036 19.5 3.75 19.5H3.25C2.83579 19.5 2.5 19.8358 2.5 20.25C2.5 20.6642 2.83579 21 3.25 21H3.75C5.26878 21 6.5 19.7688 6.5 18.25V5.75C6.5 4.23122 5.26878 3 3.75 3H3.25ZM10.75 3C9.23122 3 8 4.23122 8 5.75V18.25C8 19.7688 9.23122 21 10.75 21H11.1651L11.5209 19.5768C11.5273 19.5511 11.534 19.5255 11.541 19.5H10.75C10.0596 19.5 9.5 18.9404 9.5 18.25V5.75C9.5 5.05964 10.0596 4.5 10.75 4.5H13.25C13.9404 4.5 14.5 5.05964 14.5 5.75V15.855L16 14.355V5.75C16 4.23122 14.7688 3 13.25 3H10.75ZM19 11.4828C18.7839 11.6154 18.5798 11.7752 18.3927 11.9624L17.5 12.855V5.75C17.5 4.23122 18.7312 3 20.25 3H20.75C21.1642 3 21.5 3.33579 21.5 3.75C21.5 4.16421 21.1642 4.5 20.75 4.5H20.25C19.5596 4.5 19 5.05964 19 5.75V11.4828ZM19.0999 12.6695L13.1974 18.5719C12.8533 18.916 12.6092 19.3472 12.4911 19.8194L12.0334 21.6501C11.8344 22.4462 12.5556 23.1674 13.3517 22.9683L15.1824 22.5106C15.6545 22.3926 16.0857 22.1485 16.4299 21.8043L22.3323 15.9019C23.2249 15.0093 23.2249 13.5621 22.3323 12.6695C21.4397 11.7768 19.9925 11.7768 19.0999 12.6695Z" 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_edit_24_regular.svg";

Details

Keywords

contentgridalignmenteditpencil