cursor logo
cursor from Devicon by konpa · Original · MIT Free for personal and commercial use.
- Name
- cursor
- Set
- Devicon
- Style
- Original
- Viewbox
- 128×128
- License
- MIT
1 other variant in Devicon
The same logo in other sets
Use the cursor logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="url(#SVG2pKMedUq)" d="m64 128l55.6-32L64 64L8.4 96Z"/><path fill="url(#SVGA2bnqcPY)" d="M119.6 96V32L64 0v64Z"/><path fill="url(#SVGPbrgK0dR)" d="M64 0L8.4 32v64L64 64Z"/><path fill="#555" d="M119.6 32L64 128V64Z"/><path d="M119.6 32L64 64L8.4 32Z"/><defs><linearGradient id="SVG2pKMedUq" x1="11.925" x2="11.925" y1="12" y2="24" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-opacity=".39"/><stop offset=".658" stop-opacity=".8"/></linearGradient><linearGradient id="SVGA2bnqcPY" x1="22.35" x2="11.925" y1="6.037" y2="12.15" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop offset=".182" stop-opacity=".31"/><stop offset=".715" stop-opacity="0"/></linearGradient><linearGradient id="SVGPbrgK0dR" x1="11.925" x2="1.5" y1="0" y2="18" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop stop-opacity=".6"/><stop offset=".667" stop-opacity=".22"/></linearGradient></defs></svg>
React
import type { SVGProps } from "react";
export function DeviconCursor(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="url(#SVG2pKMedUq)" d="m64 128l55.6-32L64 64L8.4 96Z"/><path fill="url(#SVGA2bnqcPY)" d="M119.6 96V32L64 0v64Z"/><path fill="url(#SVGPbrgK0dR)" d="M64 0L8.4 32v64L64 64Z"/><path fill="#555" d="M119.6 32L64 128V64Z"/><path d="M119.6 32L64 64L8.4 32Z"/><defs><linearGradient id="SVG2pKMedUq" x1="11.925" x2="11.925" y1="12" y2="24" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop offset=".16" stopOpacity=".39"/><stop offset=".658" stopOpacity=".8"/></linearGradient><linearGradient id="SVGA2bnqcPY" x1="22.35" x2="11.925" y1="6.037" y2="12.15" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop offset=".182" stopOpacity=".31"/><stop offset=".715" stopOpacity="0"/></linearGradient><linearGradient id="SVGPbrgK0dR" x1="11.925" x2="1.5" y1="0" y2="18" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop stopOpacity=".6"/><stop offset=".667" stopOpacity=".22"/></linearGradient></defs></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="url(#SVG2pKMedUq)" d="m64 128l55.6-32L64 64L8.4 96Z"/><path fill="url(#SVGA2bnqcPY)" d="M119.6 96V32L64 0v64Z"/><path fill="url(#SVGPbrgK0dR)" d="M64 0L8.4 32v64L64 64Z"/><path fill="#555" d="M119.6 32L64 128V64Z"/><path d="M119.6 32L64 64L8.4 32Z"/><defs><linearGradient id="SVG2pKMedUq" x1="11.925" x2="11.925" y1="12" y2="24" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-opacity=".39"/><stop offset=".658" stop-opacity=".8"/></linearGradient><linearGradient id="SVGA2bnqcPY" x1="22.35" x2="11.925" y1="6.037" y2="12.15" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop offset=".182" stop-opacity=".31"/><stop offset=".715" stop-opacity="0"/></linearGradient><linearGradient id="SVGPbrgK0dR" x1="11.925" x2="1.5" y1="0" y2="18" gradientTransform="translate(.4)scale(5.33333)" gradientUnits="userSpaceOnUse"><stop stop-opacity=".6"/><stop offset=".667" stop-opacity=".22"/></linearGradient></defs></svg> </template>
CSS
.icon-cursor {
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%20128%20128%22%3E%3Cpath%20fill%3D%22url(%23SVG2pKMedUq)%22%20d%3D%22m64%20128l55.6-32L64%2064L8.4%2096Z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGA2bnqcPY)%22%20d%3D%22M119.6%2096V32L64%200v64Z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGPbrgK0dR)%22%20d%3D%22M64%200L8.4%2032v64L64%2064Z%22%2F%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M119.6%2032L64%20128V64Z%22%2F%3E%3Cpath%20d%3D%22M119.6%2032L64%2064L8.4%2032Z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG2pKMedUq%22%20x1%3D%2211.925%22%20x2%3D%2211.925%22%20y1%3D%2212%22%20y2%3D%2224%22%20gradientTransform%3D%22translate(.4)scale(5.33333)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.16%22%20stop-opacity%3D%22.39%22%2F%3E%3Cstop%20offset%3D%22.658%22%20stop-opacity%3D%22.8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGA2bnqcPY%22%20x1%3D%2222.35%22%20x2%3D%2211.925%22%20y1%3D%226.037%22%20y2%3D%2212.15%22%20gradientTransform%3D%22translate(.4)scale(5.33333)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.182%22%20stop-opacity%3D%22.31%22%2F%3E%3Cstop%20offset%3D%22.715%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGPbrgK0dR%22%20x1%3D%2211.925%22%20x2%3D%221.5%22%20y1%3D%220%22%20y2%3D%2218%22%20gradientTransform%3D%22translate(.4)scale(5.33333)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-opacity%3D%22.6%22%2F%3E%3Cstop%20offset%3D%22.667%22%20stop-opacity%3D%22.22%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%20128%20128%22%3E%3Cpath%20fill%3D%22url(%23SVG2pKMedUq)%22%20d%3D%22m64%20128l55.6-32L64%2064L8.4%2096Z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGA2bnqcPY)%22%20d%3D%22M119.6%2096V32L64%200v64Z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGPbrgK0dR)%22%20d%3D%22M64%200L8.4%2032v64L64%2064Z%22%2F%3E%3Cpath%20fill%3D%22%23555%22%20d%3D%22M119.6%2032L64%20128V64Z%22%2F%3E%3Cpath%20d%3D%22M119.6%2032L64%2064L8.4%2032Z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG2pKMedUq%22%20x1%3D%2211.925%22%20x2%3D%2211.925%22%20y1%3D%2212%22%20y2%3D%2224%22%20gradientTransform%3D%22translate(.4)scale(5.33333)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.16%22%20stop-opacity%3D%22.39%22%2F%3E%3Cstop%20offset%3D%22.658%22%20stop-opacity%3D%22.8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGA2bnqcPY%22%20x1%3D%2222.35%22%20x2%3D%2211.925%22%20y1%3D%226.037%22%20y2%3D%2212.15%22%20gradientTransform%3D%22translate(.4)scale(5.33333)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.182%22%20stop-opacity%3D%22.31%22%2F%3E%3Cstop%20offset%3D%22.715%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGPbrgK0dR%22%20x1%3D%2211.925%22%20x2%3D%221.5%22%20y1%3D%220%22%20y2%3D%2218%22%20gradientTransform%3D%22translate(.4)scale(5.33333)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-opacity%3D%22.6%22%2F%3E%3Cstop%20offset%3D%22.667%22%20stop-opacity%3D%22.22%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/cursor.svg?color=%231a73e8&size=48
