Gentleface › Development › square-dashed-cursor

square-dashed-cursor icon

Square dashed cursor: inspect element, element picker, select element, pick element. 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="M2.123 3.106C2.212 2.881 2.342 2.683 2.513 2.513C2.683 2.342 2.881 2.212 3.106 2.123C3.313 2.041 3.527 2 3.75 2L4.5 2C4.641 2 4.759 2.048 4.856 2.144C4.952 2.241 5 2.359 5 2.5C5 2.641 4.952 2.759 4.856 2.856C4.759 2.952 4.641 3 4.5 3L3.75 3C3.543 3 3.366 3.073 3.22 3.22C3.073 3.366 3 3.543 3 3.75L3 4.5C3 4.641 2.952 4.759 2.856 4.856C2.759 4.952 2.641 5 2.5 5C2.359 5 2.241 4.952 2.144 4.856C2.048 4.759 2 4.641 2 4.5L2 3.75C2 3.527 2.041 3.313 2.123 3.106ZM6.144 2.856C6.048 2.759 6 2.641 6 2.5C6 2.359 6.048 2.241 6.144 2.144C6.241 2.048 6.359 2 6.5 2L9.5 2C9.641 2 9.759 2.048 9.856 2.144C9.952 2.241 10 2.359 10 2.5C10 2.641 9.952 2.759 9.856 2.856C9.759 2.952 9.641 3 9.5 3L6.5 3C6.359 3 6.241 2.952 6.144 2.856ZM13.856 4.856C13.759 4.952 13.641 5 13.5 5C13.359 5 13.241 4.952 13.144 4.856C13.048 4.759 13 4.641 13 4.5L13 3.75C13 3.543 12.927 3.366 12.78 3.22C12.634 3.073 12.457 3 12.25 3L11.5 3C11.359 3 11.241 2.952 11.144 2.856C11.048 2.759 11 2.641 11 2.5C11 2.359 11.048 2.241 11.144 2.144C11.241 2.048 11.359 2 11.5 2L12.25 2C12.473 2 12.687 2.041 12.894 2.123C13.119 2.212 13.317 2.342 13.487 2.513C13.658 2.683 13.788 2.881 13.877 3.106C13.959 3.313 14 3.527 14 3.75L14 4.5C14 4.641 13.952 4.759 13.856 4.856ZM2.144 6.144C2.241 6.048 2.359 6 2.5 6C2.641 6 2.759 6.048 2.856 6.144C2.952 6.241 3 6.359 3 6.5L3 9.5C3 9.641 2.952 9.759 2.856 9.856C2.759 9.952 2.641 10 2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5L2 6.5C2 6.359 2.048 6.241 2.144 6.144ZM13.144 6.144C13.241 6.048 13.359 6 13.5 6C13.641 6 13.759 6.048 13.856 6.144C13.952 6.241 14 6.359 14 6.5L14 9.5C14 9.641 13.952 9.759 13.856 9.856C13.759 9.952 13.641 10 13.5 10C13.359 10 13.241 9.952 13.144 9.856C13.048 9.759 13 9.641 13 9.5L13 6.5C13 6.359 13.048 6.241 13.144 6.144ZM11.374 11.098C11.257 11.163 11.163 11.253 11.093 11.366C11.022 11.48 10.984 11.604 10.978 11.738C10.972 11.872 10.999 11.998 11.059 12.118L12.053 14.106C12.102 14.203 12.124 14.305 12.119 14.41C12.114 14.515 12.083 14.614 12.026 14.707C11.968 14.8 11.894 14.872 11.802 14.923C11.71 14.974 11.609 15 11.5 15C11.194 15 10.91 14.919 10.649 14.758C10.389 14.597 10.19 14.38 10.053 14.106L9.632 13.265C9.559 13.118 9.457 12.997 9.325 12.9C9.193 12.802 9.046 12.741 8.884 12.715C8.722 12.688 8.564 12.7 8.408 12.751C8.252 12.801 8.116 12.884 8 13L7.768 13.232C7.684 13.316 7.569 13.364 7.45 13.364C7.201 13.364 7 13.162 7 12.914L7 7.934C7 7.841 7.024 7.756 7.071 7.677C7.118 7.598 7.182 7.537 7.264 7.493C7.346 7.45 7.433 7.43 7.524 7.434C7.616 7.439 7.7 7.467 7.777 7.518L11.79 10.193C11.893 10.262 11.963 10.37 11.984 10.491C12.026 10.736 11.861 10.969 11.616 11.011C11.532 11.026 11.452 11.054 11.374 11.098ZM2.144 11.144C2.241 11.048 2.359 11 2.5 11C2.641 11 2.759 11.048 2.856 11.144C2.952 11.241 3 11.359 3 11.5L3 12.25C3 12.457 3.073 12.634 3.22 12.78C3.366 12.927 3.543 13 3.75 13L4.5 13C4.641 13 4.759 13.048 4.856 13.144C4.952 13.241 5 13.359 5 13.5C5 13.641 4.952 13.759 4.856 13.856C4.759 13.952 4.641 14 4.5 14L3.75 14C3.527 14 3.313 13.959 3.106 13.877C2.881 13.788 2.683 13.658 2.513 13.487C2.342 13.317 2.212 13.119 2.123 12.894C2.041 12.687 2 12.473 2 12.25L2 11.5C2 11.359 2.048 11.241 2.144 11.144Z"/></svg>

React

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

export function SquareDashedCursorIcon(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="M2.123 3.106C2.212 2.881 2.342 2.683 2.513 2.513C2.683 2.342 2.881 2.212 3.106 2.123C3.313 2.041 3.527 2 3.75 2L4.5 2C4.641 2 4.759 2.048 4.856 2.144C4.952 2.241 5 2.359 5 2.5C5 2.641 4.952 2.759 4.856 2.856C4.759 2.952 4.641 3 4.5 3L3.75 3C3.543 3 3.366 3.073 3.22 3.22C3.073 3.366 3 3.543 3 3.75L3 4.5C3 4.641 2.952 4.759 2.856 4.856C2.759 4.952 2.641 5 2.5 5C2.359 5 2.241 4.952 2.144 4.856C2.048 4.759 2 4.641 2 4.5L2 3.75C2 3.527 2.041 3.313 2.123 3.106ZM6.144 2.856C6.048 2.759 6 2.641 6 2.5C6 2.359 6.048 2.241 6.144 2.144C6.241 2.048 6.359 2 6.5 2L9.5 2C9.641 2 9.759 2.048 9.856 2.144C9.952 2.241 10 2.359 10 2.5C10 2.641 9.952 2.759 9.856 2.856C9.759 2.952 9.641 3 9.5 3L6.5 3C6.359 3 6.241 2.952 6.144 2.856ZM13.856 4.856C13.759 4.952 13.641 5 13.5 5C13.359 5 13.241 4.952 13.144 4.856C13.048 4.759 13 4.641 13 4.5L13 3.75C13 3.543 12.927 3.366 12.78 3.22C12.634 3.073 12.457 3 12.25 3L11.5 3C11.359 3 11.241 2.952 11.144 2.856C11.048 2.759 11 2.641 11 2.5C11 2.359 11.048 2.241 11.144 2.144C11.241 2.048 11.359 2 11.5 2L12.25 2C12.473 2 12.687 2.041 12.894 2.123C13.119 2.212 13.317 2.342 13.487 2.513C13.658 2.683 13.788 2.881 13.877 3.106C13.959 3.313 14 3.527 14 3.75L14 4.5C14 4.641 13.952 4.759 13.856 4.856ZM2.144 6.144C2.241 6.048 2.359 6 2.5 6C2.641 6 2.759 6.048 2.856 6.144C2.952 6.241 3 6.359 3 6.5L3 9.5C3 9.641 2.952 9.759 2.856 9.856C2.759 9.952 2.641 10 2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5L2 6.5C2 6.359 2.048 6.241 2.144 6.144ZM13.144 6.144C13.241 6.048 13.359 6 13.5 6C13.641 6 13.759 6.048 13.856 6.144C13.952 6.241 14 6.359 14 6.5L14 9.5C14 9.641 13.952 9.759 13.856 9.856C13.759 9.952 13.641 10 13.5 10C13.359 10 13.241 9.952 13.144 9.856C13.048 9.759 13 9.641 13 9.5L13 6.5C13 6.359 13.048 6.241 13.144 6.144ZM11.374 11.098C11.257 11.163 11.163 11.253 11.093 11.366C11.022 11.48 10.984 11.604 10.978 11.738C10.972 11.872 10.999 11.998 11.059 12.118L12.053 14.106C12.102 14.203 12.124 14.305 12.119 14.41C12.114 14.515 12.083 14.614 12.026 14.707C11.968 14.8 11.894 14.872 11.802 14.923C11.71 14.974 11.609 15 11.5 15C11.194 15 10.91 14.919 10.649 14.758C10.389 14.597 10.19 14.38 10.053 14.106L9.632 13.265C9.559 13.118 9.457 12.997 9.325 12.9C9.193 12.802 9.046 12.741 8.884 12.715C8.722 12.688 8.564 12.7 8.408 12.751C8.252 12.801 8.116 12.884 8 13L7.768 13.232C7.684 13.316 7.569 13.364 7.45 13.364C7.201 13.364 7 13.162 7 12.914L7 7.934C7 7.841 7.024 7.756 7.071 7.677C7.118 7.598 7.182 7.537 7.264 7.493C7.346 7.45 7.433 7.43 7.524 7.434C7.616 7.439 7.7 7.467 7.777 7.518L11.79 10.193C11.893 10.262 11.963 10.37 11.984 10.491C12.026 10.736 11.861 10.969 11.616 11.011C11.532 11.026 11.452 11.054 11.374 11.098ZM2.144 11.144C2.241 11.048 2.359 11 2.5 11C2.641 11 2.759 11.048 2.856 11.144C2.952 11.241 3 11.359 3 11.5L3 12.25C3 12.457 3.073 12.634 3.22 12.78C3.366 12.927 3.543 13 3.75 13L4.5 13C4.641 13 4.759 13.048 4.856 13.144C4.952 13.241 5 13.359 5 13.5C5 13.641 4.952 13.759 4.856 13.856C4.759 13.952 4.641 14 4.5 14L3.75 14C3.527 14 3.313 13.959 3.106 13.877C2.881 13.788 2.683 13.658 2.513 13.487C2.342 13.317 2.212 13.119 2.123 12.894C2.041 12.687 2 12.473 2 12.25L2 11.5C2 11.359 2.048 11.241 2.144 11.144Z" />
    </svg>
  );
}

Vue

Vue: see /icons/square-dashed-cursor.md

Svelte

Svelte: see /icons/square-dashed-cursor.md

HTML img

HTML img: see /icons/square-dashed-cursor.md

CSS

CSS: see /icons/square-dashed-cursor.md

Data URL

Data URL: see /icons/square-dashed-cursor.md

Sprite

Sprite: see /icons/square-dashed-cursor.md

SwiftUI

SwiftUI: see /icons/square-dashed-cursor.md

Compose

Compose: see /icons/square-dashed-cursor.md

Android XML

Android XML: see /icons/square-dashed-cursor.md

Flutter

Flutter: see /icons/square-dashed-cursor.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

inspect element, element picker, select element, pick element

Alternatives

code-eye: view the page source (view-source)

Also fits

view source: inspect one element in devtools (inspect-element)

Tags

inspect, inspect-element, element-picker, select-element, pick-element, devtools, cursor, pointer, dashed, selection, click

Category

Development

Component name

SquareDashedCursorIcon

History

2026-10-19 added

Family 5

select-all square-dashed square-dashed-minus square-dashed-plus square-dashed-x

More development icons

binary braces brackets bug bug-off bug-play code code-alert code-block code-eye code-off code-pencil code-play code-search code-sparkle container · all development icons

For agents

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

square-dashed-cursor icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp