highlight mouse cursor icon

highlight-mouse-cursor-rounded from Material Symbols Light by Google · Rounded · UI Actions · Apache-2.0 Free for personal and commercial use.

Name: highlight-mouse-cursor-rounded
Set: Material Symbols Light
Style: Rounded
Category: UI Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: highlight-mouse-cursor-outline-rounded

1 other variant in Material Symbols Light

highlight-mouse-cursor

The same icon in other sets

highlight-mouse-cursorMaterial Symbols

More ui actions icons from Material Symbols Light

Use the highlight mouse cursor icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.242 20.27l-4.28-4.295l-.52 1.583q-.105.292-.398.29q-.292-.004-.378-.296l-1.449-4.825q-.061-.217.116-.394t.394-.116l4.825 1.449q.292.086.295.378t-.29.398l-1.582.52l4.3 4.28q.214.214.214.514t-.214.513t-.516.214t-.517-.214M12 4Q8.65 4 6.325 6.325T4 12q0 3.342 2.248 5.63q2.248 2.29 5.546 2.359q.214.011.363.163t.143.365t-.149.364t-.357.144q-1.873-.029-3.474-.783q-1.6-.754-2.786-1.991t-1.86-2.856T3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q3.56 0 6.251 2.512t2.774 6.263q.012.208-.132.36q-.143.154-.356.16t-.378-.15t-.176-.37q-.087-3.154-2.42-5.465Q15.229 4 12 4"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightHighlightMouseCursorRounded(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="m19.242 20.27l-4.28-4.295l-.52 1.583q-.105.292-.398.29q-.292-.004-.378-.296l-1.449-4.825q-.061-.217.116-.394t.394-.116l4.825 1.449q.292.086.295.378t-.29.398l-1.582.52l4.3 4.28q.214.214.214.514t-.214.513t-.516.214t-.517-.214M12 4Q8.65 4 6.325 6.325T4 12q0 3.342 2.248 5.63q2.248 2.29 5.546 2.359q.214.011.363.163t.143.365t-.149.364t-.357.144q-1.873-.029-3.474-.783q-1.6-.754-2.786-1.991t-1.86-2.856T3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q3.56 0 6.251 2.512t2.774 6.263q.012.208-.132.36q-.143.154-.356.16t-.378-.15t-.176-.37q-.087-3.154-2.42-5.465Q15.229 4 12 4"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.242 20.27l-4.28-4.295l-.52 1.583q-.105.292-.398.29q-.292-.004-.378-.296l-1.449-4.825q-.061-.217.116-.394t.394-.116l4.825 1.449q.292.086.295.378t-.29.398l-1.582.52l4.3 4.28q.214.214.214.514t-.214.513t-.516.214t-.517-.214M12 4Q8.65 4 6.325 6.325T4 12q0 3.342 2.248 5.63q2.248 2.29 5.546 2.359q.214.011.363.163t.143.365t-.149.364t-.357.144q-1.873-.029-3.474-.783q-1.6-.754-2.786-1.991t-1.86-2.856T3 12q0-1.864.71-3.506q.711-1.642 1.927-2.857Q6.852 4.42 8.494 3.71T12 3q3.56 0 6.251 2.512t2.774 6.263q.012.208-.132.36q-.143.154-.356.16t-.378-.15t-.176-.37q-.087-3.154-2.42-5.465Q15.229 4 12 4"/></svg>
</template>

CSS

.icon-highlight-mouse-cursor-rounded {
  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%22m19.242%2020.27l-4.28-4.295l-.52%201.583q-.105.292-.398.29q-.292-.004-.378-.296l-1.449-4.825q-.061-.217.116-.394t.394-.116l4.825%201.449q.292.086.295.378t-.29.398l-1.582.52l4.3%204.28q.214.214.214.514t-.214.513t-.516.214t-.517-.214M12%204Q8.65%204%206.325%206.325T4%2012q0%203.342%202.248%205.63q2.248%202.29%205.546%202.359q.214.011.363.163t.143.365t-.149.364t-.357.144q-1.873-.029-3.474-.783q-1.6-.754-2.786-1.991t-1.86-2.856T3%2012q0-1.864.71-3.506q.711-1.642%201.927-2.857Q6.852%204.42%208.494%203.71T12%203q3.56%200%206.251%202.512t2.774%206.263q.012.208-.132.36q-.143.154-.356.16t-.378-.15t-.176-.37q-.087-3.154-2.42-5.465Q15.229%204%2012%204%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%22m19.242%2020.27l-4.28-4.295l-.52%201.583q-.105.292-.398.29q-.292-.004-.378-.296l-1.449-4.825q-.061-.217.116-.394t.394-.116l4.825%201.449q.292.086.295.378t-.29.398l-1.582.52l4.3%204.28q.214.214.214.514t-.214.513t-.516.214t-.517-.214M12%204Q8.65%204%206.325%206.325T4%2012q0%203.342%202.248%205.63q2.248%202.29%205.546%202.359q.214.011.363.163t.143.365t-.149.364t-.357.144q-1.873-.029-3.474-.783q-1.6-.754-2.786-1.991t-1.86-2.856T3%2012q0-1.864.71-3.506q.711-1.642%201.927-2.857Q6.852%204.42%208.494%203.71T12%203q3.56%200%206.251%202.512t2.774%206.263q.012.208-.132.36q-.143.154-.356.16t-.378-.15t-.176-.37q-.087-3.154-2.42-5.465Q15.229%204%2012%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/highlight-mouse-cursor-rounded.svg?color=%231a73e8&size=48