Gentleface › Design › highlighter-diagonal

highlighter-diagonal icon

Highlighter diagonal. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M7.043 4.664C7.116 4.686 7.189 4.712 7.26 4.743C7.484 4.84 7.681 4.974 7.854 5.146L9.854 7.146C10.026 7.319 10.16 7.516 10.257 7.74C10.288 7.811 10.314 7.884 10.336 7.957C10.345 7.967 10.353 7.978 10.361 7.99C10.384 7.929 10.419 7.874 10.465 7.828L13.146 5.146C13.246 5.047 13.364 4.997 13.5 4.997C13.636 4.997 13.754 5.047 13.854 5.146C13.951 5.244 14 5.362 14 5.5C14 5.638 13.951 5.756 13.854 5.854L11.172 8.535C10.996 8.711 10.711 8.711 10.535 8.535L10.465 8.465C10.446 8.446 10.43 8.427 10.415 8.405C10.414 8.408 10.413 8.41 10.412 8.412C10.414 8.441 10.414 8.471 10.414 8.5C10.414 8.764 10.362 9.018 10.257 9.26C10.16 9.484 10.026 9.681 9.854 9.854L9.354 10.354C9.245 10.462 9.12 10.547 8.979 10.608C8.826 10.674 8.667 10.707 8.5 10.707C8.333 10.707 8.174 10.674 8.021 10.608C7.88 10.547 7.755 10.462 7.646 10.354L7.5 10.207L6.561 11.146C6.287 11.42 5.972 11.63 5.615 11.778C5.258 11.926 4.886 12 4.5 12L1.5 12C1.359 12 1.241 11.952 1.144 11.856C1.048 11.759 1 11.641 1 11.5C1 11.362 1.049 11.244 1.146 11.146L4.793 7.5L4.646 7.354C4.538 7.245 4.453 7.12 4.392 6.979C4.326 6.826 4.293 6.667 4.293 6.5C4.293 6.333 4.326 6.174 4.392 6.021C4.453 5.88 4.538 5.755 4.646 5.646L5.146 5.146C5.319 4.974 5.516 4.84 5.74 4.743C5.982 4.638 6.236 4.586 6.5 4.586C6.529 4.586 6.559 4.586 6.588 4.588C6.59 4.587 6.592 4.586 6.595 4.585C6.573 4.57 6.554 4.554 6.535 4.535L6.465 4.465C6.289 4.289 6.289 4.004 6.465 3.828L9.146 1.146C9.246 1.047 9.364 0.997 9.5 0.997C9.636 0.997 9.754 1.047 9.854 1.146C9.951 1.244 10 1.362 10 1.5C10 1.638 9.951 1.756 9.854 1.854L7.172 4.535C7.126 4.581 7.071 4.616 7.01 4.639C7.022 4.647 7.033 4.655 7.043 4.664ZM5.293 6.5C5.293 6.557 5.313 6.606 5.354 6.646L5.5 6.793C5.631 6.924 5.718 7.072 5.761 7.239C5.88 7.239 5.994 7.287 6.078 7.371L7.629 8.922C7.713 9.006 7.761 9.12 7.761 9.239C7.928 9.282 8.076 9.369 8.207 9.5L8.354 9.646C8.394 9.687 8.443 9.707 8.5 9.707C8.557 9.707 8.606 9.687 8.646 9.646L9.146 9.146C9.325 8.968 9.414 8.752 9.414 8.5C9.414 8.248 9.325 8.032 9.146 7.854L7.146 5.854C6.968 5.675 6.752 5.586 6.5 5.586C6.248 5.586 6.032 5.675 5.854 5.854L5.354 6.354C5.313 6.394 5.293 6.443 5.293 6.5ZM5.233 10.854C5.467 10.757 5.674 10.619 5.854 10.439L6.793 9.5L5.5 8.207L2.707 11L4.5 11C4.754 11 4.998 10.951 5.233 10.854Z"/></svg>

React

// Gentleface "highlighter-diagonal" (line-round), MIT. https://gentleface.com/icons/highlighter-diagonal
import type { SVGProps } from 'react';

export function HighlighterDiagonalIcon(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="M7.043 4.664C7.116 4.686 7.189 4.712 7.26 4.743C7.484 4.84 7.681 4.974 7.854 5.146L9.854 7.146C10.026 7.319 10.16 7.516 10.257 7.74C10.288 7.811 10.314 7.884 10.336 7.957C10.345 7.967 10.353 7.978 10.361 7.99C10.384 7.929 10.419 7.874 10.465 7.828L13.146 5.146C13.246 5.047 13.364 4.997 13.5 4.997C13.636 4.997 13.754 5.047 13.854 5.146C13.951 5.244 14 5.362 14 5.5C14 5.638 13.951 5.756 13.854 5.854L11.172 8.535C10.996 8.711 10.711 8.711 10.535 8.535L10.465 8.465C10.446 8.446 10.43 8.427 10.415 8.405C10.414 8.408 10.413 8.41 10.412 8.412C10.414 8.441 10.414 8.471 10.414 8.5C10.414 8.764 10.362 9.018 10.257 9.26C10.16 9.484 10.026 9.681 9.854 9.854L9.354 10.354C9.245 10.462 9.12 10.547 8.979 10.608C8.826 10.674 8.667 10.707 8.5 10.707C8.333 10.707 8.174 10.674 8.021 10.608C7.88 10.547 7.755 10.462 7.646 10.354L7.5 10.207L6.561 11.146C6.287 11.42 5.972 11.63 5.615 11.778C5.258 11.926 4.886 12 4.5 12L1.5 12C1.359 12 1.241 11.952 1.144 11.856C1.048 11.759 1 11.641 1 11.5C1 11.362 1.049 11.244 1.146 11.146L4.793 7.5L4.646 7.354C4.538 7.245 4.453 7.12 4.392 6.979C4.326 6.826 4.293 6.667 4.293 6.5C4.293 6.333 4.326 6.174 4.392 6.021C4.453 5.88 4.538 5.755 4.646 5.646L5.146 5.146C5.319 4.974 5.516 4.84 5.74 4.743C5.982 4.638 6.236 4.586 6.5 4.586C6.529 4.586 6.559 4.586 6.588 4.588C6.59 4.587 6.592 4.586 6.595 4.585C6.573 4.57 6.554 4.554 6.535 4.535L6.465 4.465C6.289 4.289 6.289 4.004 6.465 3.828L9.146 1.146C9.246 1.047 9.364 0.997 9.5 0.997C9.636 0.997 9.754 1.047 9.854 1.146C9.951 1.244 10 1.362 10 1.5C10 1.638 9.951 1.756 9.854 1.854L7.172 4.535C7.126 4.581 7.071 4.616 7.01 4.639C7.022 4.647 7.033 4.655 7.043 4.664ZM5.293 6.5C5.293 6.557 5.313 6.606 5.354 6.646L5.5 6.793C5.631 6.924 5.718 7.072 5.761 7.239C5.88 7.239 5.994 7.287 6.078 7.371L7.629 8.922C7.713 9.006 7.761 9.12 7.761 9.239C7.928 9.282 8.076 9.369 8.207 9.5L8.354 9.646C8.394 9.687 8.443 9.707 8.5 9.707C8.557 9.707 8.606 9.687 8.646 9.646L9.146 9.146C9.325 8.968 9.414 8.752 9.414 8.5C9.414 8.248 9.325 8.032 9.146 7.854L7.146 5.854C6.968 5.675 6.752 5.586 6.5 5.586C6.248 5.586 6.032 5.675 5.854 5.854L5.354 6.354C5.313 6.394 5.293 6.443 5.293 6.5ZM5.233 10.854C5.467 10.757 5.674 10.619 5.854 10.439L6.793 9.5L5.5 8.207L2.707 11L4.5 11C4.754 11 4.998 10.951 5.233 10.854Z" />
    </svg>
  );
}

Vue

Vue: see /icons/highlighter-diagonal.md

Svelte

Svelte: see /icons/highlighter-diagonal.md

HTML img

HTML img: see /icons/highlighter-diagonal.md

CSS

CSS: see /icons/highlighter-diagonal.md

Data URL

Data URL: see /icons/highlighter-diagonal.md

Sprite

Sprite: see /icons/highlighter-diagonal.md

SwiftUI

SwiftUI: see /icons/highlighter-diagonal.md

Compose

Compose: see /icons/highlighter-diagonal.md

Android XML

Android XML: see /icons/highlighter-diagonal.md

Flutter

Flutter: see /icons/highlighter-diagonal.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

Built from

variant of highlighter

Tags

highlighter, highlight, marker, text, diagonal

Category

Design

Component name

HighlighterDiagonalIcon

History

2026-10-14 added

Family 1

highlighter

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-diagonal.json · Markdown: /icons/highlighter-diagonal.md · SVG: https://gentleface.com/svg/{style}/16/highlighter-diagonal.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/highlighter-diagonal.png

highlighter-diagonal icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp