gentleface

Gentleface › Design › highlighter

highlighter icon

Highlighter: highlight, highlighter, text highlight, highlight color. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12 5L12 1.5C12 1.359 12.048 1.241 12.144 1.144C12.241 1.048 12.359 1 12.5 1C12.641 1 12.759 1.048 12.856 1.144C12.952 1.241 13 1.359 13 1.5L13 8.5C13 8.641 12.952 8.759 12.856 8.856C12.759 8.952 12.641 9 12.5 9L11 9L11 11.191C11 11.38 10.95 11.556 10.851 11.717C10.751 11.878 10.617 12.001 10.447 12.085L5.447 14.585C5.303 14.657 5.151 14.693 4.99 14.691C4.804 14.689 4.632 14.639 4.474 14.542C4.316 14.444 4.195 14.312 4.11 14.147C4.037 14.004 4 13.852 4 13.691L4 9L3.5 9C3.359 9 3.241 8.952 3.144 8.856C3.048 8.759 3 8.641 3 8.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1C3.641 1 3.759 1.048 3.856 1.144C3.952 1.241 4 1.359 4 1.5L4 5L12 5ZM12 8L12 6L4 6L4 8L12 8ZM10 11.191L10 9L5 9L5 13.691L10 11.191Z"/></svg>
React
// Gentleface "highlighter" (line-round), MIT. https://gentleface.com/icons/highlighter
import type { SVGProps } from 'react';

export function HighlighterIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M12 5L12 1.5C12 1.359 12.048 1.241 12.144 1.144C12.241 1.048 12.359 1 12.5 1C12.641 1 12.759 1.048 12.856 1.144C12.952 1.241 13 1.359 13 1.5L13 8.5C13 8.641 12.952 8.759 12.856 8.856C12.759 8.952 12.641 9 12.5 9L11 9L11 11.191C11 11.38 10.95 11.556 10.851 11.717C10.751 11.878 10.617 12.001 10.447 12.085L5.447 14.585C5.303 14.657 5.151 14.693 4.99 14.691C4.804 14.689 4.632 14.639 4.474 14.542C4.316 14.444 4.195 14.312 4.11 14.147C4.037 14.004 4 13.852 4 13.691L4 9L3.5 9C3.359 9 3.241 8.952 3.144 8.856C3.048 8.759 3 8.641 3 8.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1C3.641 1 3.759 1.048 3.856 1.144C3.952 1.241 4 1.359 4 1.5L4 5L12 5ZM12 8L12 6L4 6L4 8L12 8ZM10 11.191L10 9L5 9L5 13.691L10 11.191Z" />
    </svg>
  );
}
Vue
Vue: see /icons/highlighter.md
Svelte
Svelte: see /icons/highlighter.md
HTML img
HTML img: see /icons/highlighter.md
CSS
CSS: see /icons/highlighter.md
Data URL
Data URL: see /icons/highlighter.md
Sprite
Sprite: see /icons/highlighter.md
SwiftUI
SwiftUI: see /icons/highlighter.md
Compose
Compose: see /icons/highlighter.md
Android XML
Android XML: see /icons/highlighter.md
Flutter
Flutter: see /icons/highlighter.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
highlight, highlighter, text highlight, highlight color
Don’t confuse with
  • text-color: changes the color of the letters, not the background behind them
Also fits
  • fill: the highlight color behind text
  • text color: the background highlight behind the text (highlight)
Tags
highlighter, highlight, marker, text, emphasize
Category
Design
Component name
HighlighterIcon
History
  • added

Family 1

highlighter-diagonal

More design icons

align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three angle animation animation-off bezier-curve boolean-exclude boolean-intersect boolean-union bounding-box · all design icons

For agents

Metadata: /icons/highlighter.json · Markdown: /icons/highlighter.md · SVG: https://gentleface.com/svg/{style}/16/highlighter.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/highlighter.png

Feedback