Code Block icon
Used to represent code blocks in text editor scenarios. The Code Block 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 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 { CodeBlock24Regular, CodeBlock24Filled } from "@fluentui/react-icons";
export function Example() {
return <CodeBlock24Regular aria-label="Code Block" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_code_block_24_regular.svg" width="24" height="24" alt="Code Block"> 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.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25ZM10.5303 9.28033C10.8232 8.98744 10.8232 8.51256 10.5303 8.21967C10.2374 7.92678 9.76256 7.92678 9.46967 8.21967L6.21967 11.4697C5.92678 11.7626 5.92678 12.2374 6.21967 12.5303L9.46967 15.7803C9.76256 16.0732 10.2374 16.0732 10.5303 15.7803C10.8232 15.4874 10.8232 15.0126 10.5303 14.7197L7.81066 12L10.5303 9.28033ZM14.5303 8.21967C14.2374 7.92678 13.7626 7.92678 13.4697 8.21967C13.1768 8.51256 13.1768 8.98744 13.4697 9.28033L16.1893 12L13.4697 14.7197C13.1768 15.0126 13.1768 15.4874 13.4697 15.7803C13.7626 16.0732 14.2374 16.0732 14.5303 15.7803L17.7803 12.5303C18.0732 12.2374 18.0732 11.7626 17.7803 11.4697L14.5303 8.21967Z" 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_24_regular.svg";Details
| Name | Code Block |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_code_block_24_regular.svg |
| Filled file | ic_fluent_code_block_24_filled.svg |
| React components | CodeBlock24Regular, CodeBlock24Filled |
| License | MIT (© Microsoft Corporation) |