crosshair icon

Crosshair: crosshair, aim, current location, locate. 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="M13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L11.973 8C11.929 8.395 11.833 8.781 11.684 9.156C11.455 9.734 11.121 10.243 10.682 10.682C10.243 11.121 9.734 11.455 9.156 11.684C8.781 11.833 8.395 11.929 8 11.973L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.359 14 7.241 13.952 7.144 13.856C7.048 13.759 7 13.641 7 13.5L7 11.973C6.605 11.929 6.219 11.833 5.844 11.684C5.266 11.455 4.757 11.121 4.318 10.682C3.879 10.243 3.545 9.734 3.316 9.156C3.167 8.781 3.071 8.395 3.027 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L3.027 7C3.071 6.605 3.167 6.219 3.316 5.844C3.545 5.266 3.879 4.757 4.318 4.318C4.757 3.879 5.266 3.545 5.844 3.316C6.219 3.167 6.605 3.071 7 3.027L7 1.5C7 1.359 7.048 1.241 7.144 1.144C7.241 1.048 7.359 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 3.027C8.395 3.071 8.781 3.167 9.156 3.316C9.734 3.545 10.243 3.879 10.682 4.318C11.121 4.757 11.455 5.266 11.684 5.844C11.833 6.219 11.929 6.605 11.973 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144ZM4.856 7.144C4.952 7.241 5 7.359 5 7.5C5 7.641 4.952 7.759 4.856 7.856C4.759 7.952 4.641 8 4.5 8L4.035 8C4.074 8.269 4.144 8.532 4.246 8.788C4.424 9.238 4.683 9.633 5.025 9.975C5.367 10.317 5.762 10.576 6.212 10.754C6.468 10.856 6.731 10.926 7 10.965L7 10.5C7 10.359 7.048 10.241 7.144 10.144C7.241 10.048 7.359 10 7.5 10C7.641 10 7.759 10.048 7.856 10.144C7.952 10.241 8 10.359 8 10.5L8 10.965C8.269 10.926 8.532 10.856 8.788 10.754C9.238 10.576 9.633 10.317 9.975 9.975C10.317 9.633 10.576 9.238 10.754 8.788C10.856 8.532 10.926 8.269 10.965 8L10.5 8C10.359 8 10.241 7.952 10.144 7.856C10.048 7.759 10 7.641 10 7.5C10 7.359 10.048 7.241 10.144 7.144C10.241 7.048 10.359 7 10.5 7L10.965 7C10.926 6.731 10.856 6.468 10.754 6.212C10.576 5.762 10.317 5.367 9.975 5.025C9.633 4.683 9.238 4.424 8.788 4.246C8.532 4.144 8.269 4.074 8 4.035L8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5C7.359 5 7.241 4.952 7.144 4.856C7.048 4.759 7 4.641 7 4.5L7 4.035C6.731 4.074 6.468 4.144 6.212 4.246C5.762 4.424 5.367 4.683 5.025 5.025C4.683 5.367 4.424 5.762 4.246 6.212C4.144 6.468 4.074 6.731 4.035 7L4.5 7C4.641 7 4.759 7.048 4.856 7.144ZM6.439 6.439C6.732 6.146 7.086 6 7.5 6C7.914 6 8.268 6.146 8.561 6.439C8.854 6.732 9 7.086 9 7.5C9 7.914 8.854 8.268 8.561 8.561C8.268 8.854 7.914 9 7.5 9C7.086 9 6.732 8.854 6.439 8.561C6.146 8.268 6 7.914 6 7.5C6 7.086 6.146 6.732 6.439 6.439Z"/></svg>

React

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

export function CrosshairIcon(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="M13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L11.973 8C11.929 8.395 11.833 8.781 11.684 9.156C11.455 9.734 11.121 10.243 10.682 10.682C10.243 11.121 9.734 11.455 9.156 11.684C8.781 11.833 8.395 11.929 8 11.973L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.359 14 7.241 13.952 7.144 13.856C7.048 13.759 7 13.641 7 13.5L7 11.973C6.605 11.929 6.219 11.833 5.844 11.684C5.266 11.455 4.757 11.121 4.318 10.682C3.879 10.243 3.545 9.734 3.316 9.156C3.167 8.781 3.071 8.395 3.027 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L3.027 7C3.071 6.605 3.167 6.219 3.316 5.844C3.545 5.266 3.879 4.757 4.318 4.318C4.757 3.879 5.266 3.545 5.844 3.316C6.219 3.167 6.605 3.071 7 3.027L7 1.5C7 1.359 7.048 1.241 7.144 1.144C7.241 1.048 7.359 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 3.027C8.395 3.071 8.781 3.167 9.156 3.316C9.734 3.545 10.243 3.879 10.682 4.318C11.121 4.757 11.455 5.266 11.684 5.844C11.833 6.219 11.929 6.605 11.973 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144ZM4.856 7.144C4.952 7.241 5 7.359 5 7.5C5 7.641 4.952 7.759 4.856 7.856C4.759 7.952 4.641 8 4.5 8L4.035 8C4.074 8.269 4.144 8.532 4.246 8.788C4.424 9.238 4.683 9.633 5.025 9.975C5.367 10.317 5.762 10.576 6.212 10.754C6.468 10.856 6.731 10.926 7 10.965L7 10.5C7 10.359 7.048 10.241 7.144 10.144C7.241 10.048 7.359 10 7.5 10C7.641 10 7.759 10.048 7.856 10.144C7.952 10.241 8 10.359 8 10.5L8 10.965C8.269 10.926 8.532 10.856 8.788 10.754C9.238 10.576 9.633 10.317 9.975 9.975C10.317 9.633 10.576 9.238 10.754 8.788C10.856 8.532 10.926 8.269 10.965 8L10.5 8C10.359 8 10.241 7.952 10.144 7.856C10.048 7.759 10 7.641 10 7.5C10 7.359 10.048 7.241 10.144 7.144C10.241 7.048 10.359 7 10.5 7L10.965 7C10.926 6.731 10.856 6.468 10.754 6.212C10.576 5.762 10.317 5.367 9.975 5.025C9.633 4.683 9.238 4.424 8.788 4.246C8.532 4.144 8.269 4.074 8 4.035L8 4.5C8 4.641 7.952 4.759 7.856 4.856C7.759 4.952 7.641 5 7.5 5C7.359 5 7.241 4.952 7.144 4.856C7.048 4.759 7 4.641 7 4.5L7 4.035C6.731 4.074 6.468 4.144 6.212 4.246C5.762 4.424 5.367 4.683 5.025 5.025C4.683 5.367 4.424 5.762 4.246 6.212C4.144 6.468 4.074 6.731 4.035 7L4.5 7C4.641 7 4.759 7.048 4.856 7.144ZM6.439 6.439C6.732 6.146 7.086 6 7.5 6C7.914 6 8.268 6.146 8.561 6.439C8.854 6.732 9 7.086 9 7.5C9 7.914 8.854 8.268 8.561 8.561C8.268 8.854 7.914 9 7.5 9C7.086 9 6.732 8.854 6.439 8.561C6.146 8.268 6 7.914 6 7.5C6 7.086 6.146 6.732 6.439 6.439Z" />
    </svg>
  );
}

Vue

Vue: see /icons/crosshair.md

Svelte

Svelte: see /icons/crosshair.md

HTML img

HTML img: see /icons/crosshair.md

CSS

CSS: see /icons/crosshair.md

Data URL

Data URL: see /icons/crosshair.md

Sprite

Sprite: see /icons/crosshair.md

SwiftUI

SwiftUI: see /icons/crosshair.md

Compose

Compose: see /icons/crosshair.md

Android XML

Android XML: see /icons/crosshair.md

Flutter

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

crosshair, aim, current location, locate, reticle, targeting, my location, locate me, find my location

Alternatives

target: goal or objective
focus: camera focus or focus mode
navigation: the location-arrow convention (iOS, Font Awesome) or heading
map-pin-user: a person's location on a map

Don’t confuse with

map-pin: a place or address, not 'where am I'

Also fits

find my device: your current location on a map (current-location)
location: your current location
user location: the current-location control
navigation: the current-location control

Not for

target (use target): crosshair means aim or current location

Tags

crosshair, aim, reticle, gps, locate, my-location, current-location, center, focus-point

Category

Maps & places

Component name

CrosshairIcon

History

2026-10-14 added

More maps & places icons

binoculars bridge compass flag flag-check flag-clock flag-off flag-plus flag-swallowtail footprints globe globe-arrow-up globe-check globe-gear globe-lock globe-off · all maps & places icons

For agents

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

crosshair icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More maps & places icons

For agents

crosshair icon