target arrow icon

target-arrow-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.

Name: target-arrow-24-filled
Set: Fluent UI System Icons
Style: 24 Filled
Viewbox: 24×24
License: MIT

5 other variants in Fluent UI System Icons

target-arrow-16-filled target-arrow-16-regular target-arrow-20-filled target-arrow-20-regular target-arrow-24-regular

The same icon in other sets

target-arrowLucide Lab target-arrowTabler Icons

Related icons in Fluent UI System Icons

target-add-20-filled target-dismiss-20-filled target-edit-16-filled target-sparkle-16-filled

Use the target arrow icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.78 6.78a.75.75 0 0 0-.53-1.28H18.5V2.75a.75.75 0 0 0-1.28-.53l-2.5 2.5a.75.75 0 0 0-.22.53v2.836l-1.982 1.982A2.003 2.003 0 0 0 10 12a2 2 0 1 0 3.932-.518L15.914 9.5h2.836a.75.75 0 0 0 .53-.22zM12 2a10 10 0 0 1 3.424.601l-1.412 1.412q-.094.094-.171.2a8 8 0 1 0 5.947 5.947q.105-.078.2-.172l1.41-1.412A10 10 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4q.779.002 1.5.19v1.482l-.414.414l-.049.05A4.005 4.005 0 0 0 8 12a4 4 0 1 0 7.864-1.037l.05-.049l.414-.414h1.483A6 6 0 1 1 12 6"/></svg>

React

import type { SVGProps } from "react";

export function FluentTargetArrow24Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.78 6.78a.75.75 0 0 0-.53-1.28H18.5V2.75a.75.75 0 0 0-1.28-.53l-2.5 2.5a.75.75 0 0 0-.22.53v2.836l-1.982 1.982A2.003 2.003 0 0 0 10 12a2 2 0 1 0 3.932-.518L15.914 9.5h2.836a.75.75 0 0 0 .53-.22zM12 2a10 10 0 0 1 3.424.601l-1.412 1.412q-.094.094-.171.2a8 8 0 1 0 5.947 5.947q.105-.078.2-.172l1.41-1.412A10 10 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4q.779.002 1.5.19v1.482l-.414.414l-.049.05A4.005 4.005 0 0 0 8 12a4 4 0 1 0 7.864-1.037l.05-.049l.414-.414h1.483A6 6 0 1 1 12 6"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.78 6.78a.75.75 0 0 0-.53-1.28H18.5V2.75a.75.75 0 0 0-1.28-.53l-2.5 2.5a.75.75 0 0 0-.22.53v2.836l-1.982 1.982A2.003 2.003 0 0 0 10 12a2 2 0 1 0 3.932-.518L15.914 9.5h2.836a.75.75 0 0 0 .53-.22zM12 2a10 10 0 0 1 3.424.601l-1.412 1.412q-.094.094-.171.2a8 8 0 1 0 5.947 5.947q.105-.078.2-.172l1.41-1.412A10 10 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 4q.779.002 1.5.19v1.482l-.414.414l-.049.05A4.005 4.005 0 0 0 8 12a4 4 0 1 0 7.864-1.037l.05-.049l.414-.414h1.483A6 6 0 1 1 12 6"/></svg>
</template>

CSS

.icon-target-arrow-24-filled {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.78%206.78a.75.75%200%200%200-.53-1.28H18.5V2.75a.75.75%200%200%200-1.28-.53l-2.5%202.5a.75.75%200%200%200-.22.53v2.836l-1.982%201.982A2.003%202.003%200%200%200%2010%2012a2%202%200%201%200%203.932-.518L15.914%209.5h2.836a.75.75%200%200%200%20.53-.22zM12%202a10%2010%200%200%201%203.424.601l-1.412%201.412q-.094.094-.171.2a8%208%200%201%200%205.947%205.947q.105-.078.2-.172l1.41-1.412A10%2010%200%200%201%2022%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012S6.477%202%2012%202m0%204q.779.002%201.5.19v1.482l-.414.414l-.049.05A4.005%204.005%200%200%200%208%2012a4%204%200%201%200%207.864-1.037l.05-.049l.414-.414h1.483A6%206%200%201%201%2012%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.78%206.78a.75.75%200%200%200-.53-1.28H18.5V2.75a.75.75%200%200%200-1.28-.53l-2.5%202.5a.75.75%200%200%200-.22.53v2.836l-1.982%201.982A2.003%202.003%200%200%200%2010%2012a2%202%200%201%200%203.932-.518L15.914%209.5h2.836a.75.75%200%200%200%20.53-.22zM12%202a10%2010%200%200%201%203.424.601l-1.412%201.412q-.094.094-.171.2a8%208%200%201%200%205.947%205.947q.105-.078.2-.172l1.41-1.412A10%2010%200%200%201%2022%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012S6.477%202%2012%202m0%204q.779.002%201.5.19v1.482l-.414.414l-.049.05A4.005%204.005%200%200%200%208%2012a4%204%200%201%200%207.864-1.037l.05-.049l.414-.414h1.483A6%206%200%201%201%2012%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/target-arrow-24-filled.svg?color=%231a73e8&size=48