cursor arrow rays icon

cursor-arrow-rays-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.

Name: cursor-arrow-rays-solid
Set: HeroIcons
Style: Solid 24x24
Viewbox: 24×24
License: MIT

3 other variants in HeroIcons

cursor-arrow-rays cursor-arrow-rays-16-solid cursor-arrow-rays-20-solid

Related icons in HeroIcons

Use the cursor arrow rays icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 1.5a.75.75 0 0 1 .75.75V4.5a.75.75 0 0 1-1.5 0V2.25A.75.75 0 0 1 12 1.5M5.636 4.136a.75.75 0 0 1 1.06 0l1.592 1.591a.75.75 0 0 1-1.061 1.06l-1.591-1.59a.75.75 0 0 1 0-1.061m12.728 0a.75.75 0 0 1 0 1.06l-1.591 1.592a.75.75 0 0 1-1.06-1.061l1.59-1.591a.75.75 0 0 1 1.061 0m-6.816 4.496a.75.75 0 0 1 .82.311l5.228 7.917a.75.75 0 0 1-.777 1.148l-2.097-.43l1.045 3.9a.75.75 0 0 1-1.45.388l-1.044-3.899l-1.601 1.42a.75.75 0 0 1-1.247-.606l.569-9.47a.75.75 0 0 1 .554-.68M3 10.5a.75.75 0 0 1 .75-.75H6a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 10.5m14.25 0a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5H18a.75.75 0 0 1-.75-.75m-8.962 3.712a.75.75 0 0 1 0 1.061l-1.591 1.591a.75.75 0 1 1-1.061-1.06l1.591-1.592a.75.75 0 0 1 1.06 0" clip-rule="evenodd"/></svg>

React

import type { SVGProps } from "react";

export function HeroiconsCursorArrowRaysSolid(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" fillRule="evenodd" d="M12 1.5a.75.75 0 0 1 .75.75V4.5a.75.75 0 0 1-1.5 0V2.25A.75.75 0 0 1 12 1.5M5.636 4.136a.75.75 0 0 1 1.06 0l1.592 1.591a.75.75 0 0 1-1.061 1.06l-1.591-1.59a.75.75 0 0 1 0-1.061m12.728 0a.75.75 0 0 1 0 1.06l-1.591 1.592a.75.75 0 0 1-1.06-1.061l1.59-1.591a.75.75 0 0 1 1.061 0m-6.816 4.496a.75.75 0 0 1 .82.311l5.228 7.917a.75.75 0 0 1-.777 1.148l-2.097-.43l1.045 3.9a.75.75 0 0 1-1.45.388l-1.044-3.899l-1.601 1.42a.75.75 0 0 1-1.247-.606l.569-9.47a.75.75 0 0 1 .554-.68M3 10.5a.75.75 0 0 1 .75-.75H6a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 10.5m14.25 0a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5H18a.75.75 0 0 1-.75-.75m-8.962 3.712a.75.75 0 0 1 0 1.061l-1.591 1.591a.75.75 0 1 1-1.061-1.06l1.591-1.592a.75.75 0 0 1 1.06 0" clipRule="evenodd"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 1.5a.75.75 0 0 1 .75.75V4.5a.75.75 0 0 1-1.5 0V2.25A.75.75 0 0 1 12 1.5M5.636 4.136a.75.75 0 0 1 1.06 0l1.592 1.591a.75.75 0 0 1-1.061 1.06l-1.591-1.59a.75.75 0 0 1 0-1.061m12.728 0a.75.75 0 0 1 0 1.06l-1.591 1.592a.75.75 0 0 1-1.06-1.061l1.59-1.591a.75.75 0 0 1 1.061 0m-6.816 4.496a.75.75 0 0 1 .82.311l5.228 7.917a.75.75 0 0 1-.777 1.148l-2.097-.43l1.045 3.9a.75.75 0 0 1-1.45.388l-1.044-3.899l-1.601 1.42a.75.75 0 0 1-1.247-.606l.569-9.47a.75.75 0 0 1 .554-.68M3 10.5a.75.75 0 0 1 .75-.75H6a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 10.5m14.25 0a.75.75 0 0 1 .75-.75h2.25a.75.75 0 0 1 0 1.5H18a.75.75 0 0 1-.75-.75m-8.962 3.712a.75.75 0 0 1 0 1.061l-1.591 1.591a.75.75 0 1 1-1.061-1.06l1.591-1.592a.75.75 0 0 1 1.06 0" clip-rule="evenodd"/></svg>
</template>

CSS

.icon-cursor-arrow-rays-solid {
  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%20fill-rule%3D%22evenodd%22%20d%3D%22M12%201.5a.75.75%200%200%201%20.75.75V4.5a.75.75%200%200%201-1.5%200V2.25A.75.75%200%200%201%2012%201.5M5.636%204.136a.75.75%200%200%201%201.06%200l1.592%201.591a.75.75%200%200%201-1.061%201.06l-1.591-1.59a.75.75%200%200%201%200-1.061m12.728%200a.75.75%200%200%201%200%201.06l-1.591%201.592a.75.75%200%200%201-1.06-1.061l1.59-1.591a.75.75%200%200%201%201.061%200m-6.816%204.496a.75.75%200%200%201%20.82.311l5.228%207.917a.75.75%200%200%201-.777%201.148l-2.097-.43l1.045%203.9a.75.75%200%200%201-1.45.388l-1.044-3.899l-1.601%201.42a.75.75%200%200%201-1.247-.606l.569-9.47a.75.75%200%200%201%20.554-.68M3%2010.5a.75.75%200%200%201%20.75-.75H6a.75.75%200%200%201%200%201.5H3.75A.75.75%200%200%201%203%2010.5m14.25%200a.75.75%200%200%201%20.75-.75h2.25a.75.75%200%200%201%200%201.5H18a.75.75%200%200%201-.75-.75m-8.962%203.712a.75.75%200%200%201%200%201.061l-1.591%201.591a.75.75%200%201%201-1.061-1.06l1.591-1.592a.75.75%200%200%201%201.06%200%22%20clip-rule%3D%22evenodd%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%20fill-rule%3D%22evenodd%22%20d%3D%22M12%201.5a.75.75%200%200%201%20.75.75V4.5a.75.75%200%200%201-1.5%200V2.25A.75.75%200%200%201%2012%201.5M5.636%204.136a.75.75%200%200%201%201.06%200l1.592%201.591a.75.75%200%200%201-1.061%201.06l-1.591-1.59a.75.75%200%200%201%200-1.061m12.728%200a.75.75%200%200%201%200%201.06l-1.591%201.592a.75.75%200%200%201-1.06-1.061l1.59-1.591a.75.75%200%200%201%201.061%200m-6.816%204.496a.75.75%200%200%201%20.82.311l5.228%207.917a.75.75%200%200%201-.777%201.148l-2.097-.43l1.045%203.9a.75.75%200%200%201-1.45.388l-1.044-3.899l-1.601%201.42a.75.75%200%200%201-1.247-.606l.569-9.47a.75.75%200%200%201%20.554-.68M3%2010.5a.75.75%200%200%201%20.75-.75H6a.75.75%200%200%201%200%201.5H3.75A.75.75%200%200%201%203%2010.5m14.25%200a.75.75%200%200%201%20.75-.75h2.25a.75.75%200%200%201%200%201.5H18a.75.75%200%200%201-.75-.75m-8.962%203.712a.75.75%200%200%201%200%201.061l-1.591%201.591a.75.75%200%201%201-1.061-1.06l1.591-1.592a.75.75%200%200%201%201.06%200%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/cursor-arrow-rays-solid.svg?color=%231a73e8&size=48