Crosshairs icon
glyphs-poly:crosshairs
The Crosshairs icon (glyphs-poly:crosshairs) is a free SVG icon from the Glyphs Poly set by Goran Spasojevic. It is drawn on a 80 × 80 grid. Glyphs Poly icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Glyphs Poly
- Author
- Goran Spasojevic
- License
- MIT
- Size
- 80 × 80
- Tags
- crosshair
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><g fill="none"><path fill="#f2c94c" stroke="#f2994a" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M31.161 18.661A23.097 23.097 0 1 1 48.84 61.34a23.097 23.097 0 0 1-17.68-42.68"/><path fill="#eb5757" d="m40 12l2-.001a2 2 0 0 0-4 0zm.008 11.37l-.001 2a2 2 0 0 0 2.001-2.001zm-.016 0l-2-.001a2 2 0 0 0 2.001 2.001zM56.63 39.992l.001-2a2 2 0 0 0-2.001 2zm0 .016h-2a2 2 0 0 0 2.001 2zM68 40l.001 2a2 2 0 0 0 0-4zM40.008 56.63l2 .001a2 2 0 0 0-2-2.001zm-.016 0v-2a2 2 0 0 0-2 2.001zM40 68l-2 .001a2 2 0 0 0 4 0zM23.37 40.008l-.001 2a2 2 0 0 0 2.001-2.001zm0-.016l2 .001a2 2 0 0 0-2.001-2.001zM12 40l-.001-2a2 2 0 0 0 0 4zm26-27.999l.008 11.37l4-.002L42 11.999zm3.992 11.37L42 12.002L38 12l-.008 11.37zm-1.999 2h.014l.002-4h-.018zm14.637 14.62v.016h4v-.016zM67.999 38l-11.37.008l.002 4L68.001 42zm-11.37 3.992l11.37.008l.002-4l-11.37-.008zM40.007 54.63h-.016v4h.016zM42 67.999l-.008-11.37l-4 .002l.008 11.37zm-3.992-11.37L38 67.998L42 68l.008-11.37zM25.37 40.006v-.014l-4-.002v.018zM12.001 42l11.37-.008l-.002-4l-11.37.008zm11.37-3.992L12.002 38L12 42l11.37.008z"/><path fill="#eb5757" stroke="#eb5757" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M36.465 31.465a9.238 9.238 0 1 1 7.07 17.07a9.238 9.238 0 0 1-7.07-17.07"/></g></svg>
How to use the Crosshairs icon
React
import { Icon } from "@iconify/react";
<Icon icon="glyphs-poly:crosshairs" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="glyphs-poly:crosshairs" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="glyphs-poly:crosshairs" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[glyphs-poly--crosshairs]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/glyphs-poly -->
<div class="i-glyphs-poly:crosshairs"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="glyphs-poly:crosshairs"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/glyphs-poly/crosshairs.svg" alt="Crosshairs icon" width="24" height="24">
Related icons in Glyphs Poly
Crosshairs icon in other icon sets
Crosshairs icon FAQ
Is the Crosshairs icon free for commercial use?
Yes. Glyphs Poly icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Crosshairs icon in React?
Install @iconify/react and render <Icon icon="glyphs-poly:crosshairs" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Crosshairs icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/glyphs-poly/crosshairs.svg" alt="Crosshairs icon">, or paste the SVG code inline to style it with CSS.
Browse all Glyphs Poly icons →
ICONYZ
