code block icon

code-block-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: code-block-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

code-block code-block-bold code-block-duotone code-block-fill code-block-thin

The same icon in other sets

code-blockBoxIcons v2 code-blockCarbon code-block-16-filledFluent UI System Icons code-blockMajesticons code-blockRemix Icon

Related icons in Phosphor

code-simple

Use the code block icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m59.76 100.24l-32-32a6 6 0 0 1 0-8.48l32-32a6 6 0 1 1 8.48 8.48L40.49 64l27.75 27.76a6 6 0 1 1-8.48 8.48m40 0a6 6 0 0 0 8.48 0l32-32a6 6 0 0 0 0-8.48l-32-32a6 6 0 1 0-8.48 8.48L127.51 64L99.76 91.76a6 6 0 0 0 0 8.48M200 42h-24a6 6 0 0 0 0 12h24a2 2 0 0 1 2 2v144a2 2 0 0 1-2 2H56a2 2 0 0 1-2-2v-64a6 6 0 0 0-12 0v64a14 14 0 0 0 14 14h144a14 14 0 0 0 14-14V56a14 14 0 0 0-14-14"/></svg>

React

import type { SVGProps } from "react";

export function PhCodeBlockLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m59.76 100.24l-32-32a6 6 0 0 1 0-8.48l32-32a6 6 0 1 1 8.48 8.48L40.49 64l27.75 27.76a6 6 0 1 1-8.48 8.48m40 0a6 6 0 0 0 8.48 0l32-32a6 6 0 0 0 0-8.48l-32-32a6 6 0 1 0-8.48 8.48L127.51 64L99.76 91.76a6 6 0 0 0 0 8.48M200 42h-24a6 6 0 0 0 0 12h24a2 2 0 0 1 2 2v144a2 2 0 0 1-2 2H56a2 2 0 0 1-2-2v-64a6 6 0 0 0-12 0v64a14 14 0 0 0 14 14h144a14 14 0 0 0 14-14V56a14 14 0 0 0-14-14"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m59.76 100.24l-32-32a6 6 0 0 1 0-8.48l32-32a6 6 0 1 1 8.48 8.48L40.49 64l27.75 27.76a6 6 0 1 1-8.48 8.48m40 0a6 6 0 0 0 8.48 0l32-32a6 6 0 0 0 0-8.48l-32-32a6 6 0 1 0-8.48 8.48L127.51 64L99.76 91.76a6 6 0 0 0 0 8.48M200 42h-24a6 6 0 0 0 0 12h24a2 2 0 0 1 2 2v144a2 2 0 0 1-2 2H56a2 2 0 0 1-2-2v-64a6 6 0 0 0-12 0v64a14 14 0 0 0 14 14h144a14 14 0 0 0 14-14V56a14 14 0 0 0-14-14"/></svg>
</template>

CSS

.icon-code-block-light {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m59.76%20100.24l-32-32a6%206%200%200%201%200-8.48l32-32a6%206%200%201%201%208.48%208.48L40.49%2064l27.75%2027.76a6%206%200%201%201-8.48%208.48m40%200a6%206%200%200%200%208.48%200l32-32a6%206%200%200%200%200-8.48l-32-32a6%206%200%201%200-8.48%208.48L127.51%2064L99.76%2091.76a6%206%200%200%200%200%208.48M200%2042h-24a6%206%200%200%200%200%2012h24a2%202%200%200%201%202%202v144a2%202%200%200%201-2%202H56a2%202%200%200%201-2-2v-64a6%206%200%200%200-12%200v64a14%2014%200%200%200%2014%2014h144a14%2014%200%200%200%2014-14V56a14%2014%200%200%200-14-14%22%2F%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m59.76%20100.24l-32-32a6%206%200%200%201%200-8.48l32-32a6%206%200%201%201%208.48%208.48L40.49%2064l27.75%2027.76a6%206%200%201%201-8.48%208.48m40%200a6%206%200%200%200%208.48%200l32-32a6%206%200%200%200%200-8.48l-32-32a6%206%200%201%200-8.48%208.48L127.51%2064L99.76%2091.76a6%206%200%200%200%200%208.48M200%2042h-24a6%206%200%200%200%200%2012h24a2%202%200%200%201%202%202v144a2%202%200%200%201-2%202H56a2%202%200%200%201-2-2v-64a6%206%200%200%200-12%200v64a14%2014%200%200%200%2014%2014h144a14%2014%200%200%200%2014-14V56a14%2014%200%200%200-14-14%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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