Code Block Edit icon (Filled & Regular)

The Code Block Edit icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Use the Code Block 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 { CodeBlockEdit24Regular, CodeBlockEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CodeBlockEdit24Regular aria-label="Code Block Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_code_block_edit_24_regular.svg" width="24" height="24" alt="Code Block 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 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V11.0121C20.4935 10.9686 19.9789 11.0422 19.5 11.2328V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.542C11.535 19.5255 11.5283 19.5511 11.5219 19.5768L11.1661 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM10.5303 8.21967C10.8232 8.51256 10.8232 8.98744 10.5303 9.28033L7.81066 12L10.5303 14.7197C10.8232 15.0126 10.8232 15.4874 10.5303 15.7803C10.2374 16.0732 9.76256 16.0732 9.46967 15.7803L6.21967 12.5303C5.92678 12.2374 5.92678 11.7626 6.21967 11.4697L9.46967 8.21967C9.76256 7.92678 10.2374 7.92678 10.5303 8.21967ZM13.4697 8.21967C13.7626 7.92678 14.2374 7.92678 14.5303 8.21967L17.7803 11.4697C18.0732 11.7626 18.0732 12.2374 17.7803 12.5303L14.5303 15.7803C14.2374 16.0732 13.7626 16.0732 13.4697 15.7803C13.1768 15.4874 13.1768 15.0126 13.4697 14.7197L16.1893 12L13.4697 9.28033C13.1768 8.98744 13.1768 8.51256 13.4697 8.21967ZM19.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/code_block_edit_24_regular.svg";

Details

Name	Code Block Edit
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_code_block_edit_24_regular.svg`
Filled file	`ic_fluent_code_block_edit_24_filled.svg`
React components	`CodeBlockEdit24Regular, CodeBlockEdit24Filled`
License	MIT (© Microsoft Corporation)

Code Block Edit icon

Use the Code Block Edit icon in React

Use it in HTML

Use it from the SVG package

Details

Related icons