highlighter icon

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

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

5 other variants in Phosphor

highlighter highlighter-bold highlighter-duotone highlighter-fill highlighter-thin

The same icon in other sets

highlighterBootstrap Icons highlighterFont Awesome 6 Solid highlighterFont Awesome Solid highlighterHuge Icons highlighterJam Icons highlighterLine Awesome highlighterLucide

Related icons in Phosphor

highlighter-circle

Use the highlighter icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M252.24 107.76a6 6 0 0 0-8.48 0l-50.35 50.34a2 2 0 0 1-2.82 0L105.9 73.41a2 2 0 0 1 0-2.82l50.34-50.35a6 6 0 0 0-8.48-8.48L97.41 62.1a14 14 0 0 0-1.71 17.71L73.41 102.1a14 14 0 0 0 0 19.8l6.1 6.1l-59.75 59.76a6 6 0 0 0 2.34 9.93l72 24a6 6 0 0 0 6.14-1.45L136 184.49l6.1 6.1a14 14 0 0 0 19.8 0l22.28-22.29a14 14 0 0 0 17.72-1.71l50.34-50.35a6 6 0 0 0 0-8.48M94.38 209.14l-59.27-19.76L88 136.49L127.51 176Zm59-27a2 2 0 0 1-2.82 0l-10.35-10.34l-48-48l-10.31-10.39a2 2 0 0 1 0-2.82l22.1-22.1L175.51 160Z"/></svg>

React

import type { SVGProps } from "react";

export function PhHighlighterLight(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="M252.24 107.76a6 6 0 0 0-8.48 0l-50.35 50.34a2 2 0 0 1-2.82 0L105.9 73.41a2 2 0 0 1 0-2.82l50.34-50.35a6 6 0 0 0-8.48-8.48L97.41 62.1a14 14 0 0 0-1.71 17.71L73.41 102.1a14 14 0 0 0 0 19.8l6.1 6.1l-59.75 59.76a6 6 0 0 0 2.34 9.93l72 24a6 6 0 0 0 6.14-1.45L136 184.49l6.1 6.1a14 14 0 0 0 19.8 0l22.28-22.29a14 14 0 0 0 17.72-1.71l50.34-50.35a6 6 0 0 0 0-8.48M94.38 209.14l-59.27-19.76L88 136.49L127.51 176Zm59-27a2 2 0 0 1-2.82 0l-10.35-10.34l-48-48l-10.31-10.39a2 2 0 0 1 0-2.82l22.1-22.1L175.51 160Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M252.24 107.76a6 6 0 0 0-8.48 0l-50.35 50.34a2 2 0 0 1-2.82 0L105.9 73.41a2 2 0 0 1 0-2.82l50.34-50.35a6 6 0 0 0-8.48-8.48L97.41 62.1a14 14 0 0 0-1.71 17.71L73.41 102.1a14 14 0 0 0 0 19.8l6.1 6.1l-59.75 59.76a6 6 0 0 0 2.34 9.93l72 24a6 6 0 0 0 6.14-1.45L136 184.49l6.1 6.1a14 14 0 0 0 19.8 0l22.28-22.29a14 14 0 0 0 17.72-1.71l50.34-50.35a6 6 0 0 0 0-8.48M94.38 209.14l-59.27-19.76L88 136.49L127.51 176Zm59-27a2 2 0 0 1-2.82 0l-10.35-10.34l-48-48l-10.31-10.39a2 2 0 0 1 0-2.82l22.1-22.1L175.51 160Z"/></svg>
</template>

CSS

.icon-highlighter-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%22M252.24%20107.76a6%206%200%200%200-8.48%200l-50.35%2050.34a2%202%200%200%201-2.82%200L105.9%2073.41a2%202%200%200%201%200-2.82l50.34-50.35a6%206%200%200%200-8.48-8.48L97.41%2062.1a14%2014%200%200%200-1.71%2017.71L73.41%20102.1a14%2014%200%200%200%200%2019.8l6.1%206.1l-59.75%2059.76a6%206%200%200%200%202.34%209.93l72%2024a6%206%200%200%200%206.14-1.45L136%20184.49l6.1%206.1a14%2014%200%200%200%2019.8%200l22.28-22.29a14%2014%200%200%200%2017.72-1.71l50.34-50.35a6%206%200%200%200%200-8.48M94.38%20209.14l-59.27-19.76L88%20136.49L127.51%20176Zm59-27a2%202%200%200%201-2.82%200l-10.35-10.34l-48-48l-10.31-10.39a2%202%200%200%201%200-2.82l22.1-22.1L175.51%20160Z%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%22M252.24%20107.76a6%206%200%200%200-8.48%200l-50.35%2050.34a2%202%200%200%201-2.82%200L105.9%2073.41a2%202%200%200%201%200-2.82l50.34-50.35a6%206%200%200%200-8.48-8.48L97.41%2062.1a14%2014%200%200%200-1.71%2017.71L73.41%20102.1a14%2014%200%200%200%200%2019.8l6.1%206.1l-59.75%2059.76a6%206%200%200%200%202.34%209.93l72%2024a6%206%200%200%200%206.14-1.45L136%20184.49l6.1%206.1a14%2014%200%200%200%2019.8%200l22.28-22.29a14%2014%200%200%200%2017.72-1.71l50.34-50.35a6%206%200%200%200%200-8.48M94.38%20209.14l-59.27-19.76L88%20136.49L127.51%20176Zm59-27a2%202%200%200%201-2.82%200l-10.35-10.34l-48-48l-10.31-10.39a2%202%200%200%201%200-2.82l22.1-22.1L175.51%20160Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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