code block icon

code-block-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.

Name
code-block-48
Set
Fluent UI System Color Icons
Style
48
Viewbox
48×48
License
MIT

5 other variants in Fluent UI System Color Icons

code-block-16code-block-20code-block-24code-block-28code-block-32

The same icon in other sets

code-blockBoxIcons v2code-blockCarboncode-block-16-filledFluent UI System Iconscode-blockMajesticonscode-blockPhosphorcode-blockRemix Icon

Use the code block icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGIRbAbbIU1)" d="M12 6a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h24a6 6 0 0 0 6-6V12a6 6 0 0 0-6-6z"/><path fill="url(#SVGK2yQpb1K1)" d="M20.884 15.366a1.25 1.25 0 0 1 0 1.768L14.018 24l6.866 6.866a1.25 1.25 0 0 1-1.768 1.768l-7.75-7.75a1.25 1.25 0 0 1 0-1.768l7.75-7.75a1.25 1.25 0 0 1 1.768 0m8 0l7.75 7.75a1.25 1.25 0 0 1 0 1.768l-7.75 7.75a1.25 1.25 0 0 1-1.768-1.768L33.982 24l-6.866-6.866a1.25 1.25 0 0 1 1.768-1.768"/><defs><linearGradient id="SVGIRbAbbIU1" x1="14.778" x2="34.52" y1="6" y2="42" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#e67eea"/><stop offset=".438" stop-color="#ad64d7"/><stop offset="1" stop-color="#794dc5"/></linearGradient><linearGradient id="SVGK2yQpb1K1" x1="17.165" x2="28.034" y1="15.692" y2="42.785" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#f9dcfa"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorCodeBlock48(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGIRbAbbIU1)" d="M12 6a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h24a6 6 0 0 0 6-6V12a6 6 0 0 0-6-6z"/><path fill="url(#SVGK2yQpb1K1)" d="M20.884 15.366a1.25 1.25 0 0 1 0 1.768L14.018 24l6.866 6.866a1.25 1.25 0 0 1-1.768 1.768l-7.75-7.75a1.25 1.25 0 0 1 0-1.768l7.75-7.75a1.25 1.25 0 0 1 1.768 0m8 0l7.75 7.75a1.25 1.25 0 0 1 0 1.768l-7.75 7.75a1.25 1.25 0 0 1-1.768-1.768L33.982 24l-6.866-6.866a1.25 1.25 0 0 1 1.768-1.768"/><defs><linearGradient id="SVGIRbAbbIU1" x1="14.778" x2="34.52" y1="6" y2="42" gradientUnits="userSpaceOnUse"><stop offset=".028" stopColor="#e67eea"/><stop offset=".438" stopColor="#ad64d7"/><stop offset="1" stopColor="#794dc5"/></linearGradient><linearGradient id="SVGK2yQpb1K1" x1="17.165" x2="28.034" y1="15.692" y2="42.785" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#f9dcfa"/></linearGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGIRbAbbIU1)" d="M12 6a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h24a6 6 0 0 0 6-6V12a6 6 0 0 0-6-6z"/><path fill="url(#SVGK2yQpb1K1)" d="M20.884 15.366a1.25 1.25 0 0 1 0 1.768L14.018 24l6.866 6.866a1.25 1.25 0 0 1-1.768 1.768l-7.75-7.75a1.25 1.25 0 0 1 0-1.768l7.75-7.75a1.25 1.25 0 0 1 1.768 0m8 0l7.75 7.75a1.25 1.25 0 0 1 0 1.768l-7.75 7.75a1.25 1.25 0 0 1-1.768-1.768L33.982 24l-6.866-6.866a1.25 1.25 0 0 1 1.768-1.768"/><defs><linearGradient id="SVGIRbAbbIU1" x1="14.778" x2="34.52" y1="6" y2="42" gradientUnits="userSpaceOnUse"><stop offset=".028" stop-color="#e67eea"/><stop offset=".438" stop-color="#ad64d7"/><stop offset="1" stop-color="#794dc5"/></linearGradient><linearGradient id="SVGK2yQpb1K1" x1="17.165" x2="28.034" y1="15.692" y2="42.785" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#f9dcfa"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-code-block-48 {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGIRbAbbIU1)%22%20d%3D%22M12%206a6%206%200%200%200-6%206v24a6%206%200%200%200%206%206h24a6%206%200%200%200%206-6V12a6%206%200%200%200-6-6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGK2yQpb1K1)%22%20d%3D%22M20.884%2015.366a1.25%201.25%200%200%201%200%201.768L14.018%2024l6.866%206.866a1.25%201.25%200%200%201-1.768%201.768l-7.75-7.75a1.25%201.25%200%200%201%200-1.768l7.75-7.75a1.25%201.25%200%200%201%201.768%200m8%200l7.75%207.75a1.25%201.25%200%200%201%200%201.768l-7.75%207.75a1.25%201.25%200%200%201-1.768-1.768L33.982%2024l-6.866-6.866a1.25%201.25%200%200%201%201.768-1.768%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIRbAbbIU1%22%20x1%3D%2214.778%22%20x2%3D%2234.52%22%20y1%3D%226%22%20y2%3D%2242%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.028%22%20stop-color%3D%22%23e67eea%22%2F%3E%3Cstop%20offset%3D%22.438%22%20stop-color%3D%22%23ad64d7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23794dc5%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGK2yQpb1K1%22%20x1%3D%2217.165%22%20x2%3D%2228.034%22%20y1%3D%2215.692%22%20y2%3D%2242.785%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f9dcfa%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGIRbAbbIU1)%22%20d%3D%22M12%206a6%206%200%200%200-6%206v24a6%206%200%200%200%206%206h24a6%206%200%200%200%206-6V12a6%206%200%200%200-6-6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGK2yQpb1K1)%22%20d%3D%22M20.884%2015.366a1.25%201.25%200%200%201%200%201.768L14.018%2024l6.866%206.866a1.25%201.25%200%200%201-1.768%201.768l-7.75-7.75a1.25%201.25%200%200%201%200-1.768l7.75-7.75a1.25%201.25%200%200%201%201.768%200m8%200l7.75%207.75a1.25%201.25%200%200%201%200%201.768l-7.75%207.75a1.25%201.25%200%200%201-1.768-1.768L33.982%2024l-6.866-6.866a1.25%201.25%200%200%201%201.768-1.768%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIRbAbbIU1%22%20x1%3D%2214.778%22%20x2%3D%2234.52%22%20y1%3D%226%22%20y2%3D%2242%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.028%22%20stop-color%3D%22%23e67eea%22%2F%3E%3Cstop%20offset%3D%22.438%22%20stop-color%3D%22%23ad64d7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23794dc5%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGK2yQpb1K1%22%20x1%3D%2217.165%22%20x2%3D%2228.034%22%20y1%3D%2215.692%22%20y2%3D%2242.785%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f9dcfa%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/code-block-48.svg?color=%231a73e8&size=48