How To Set Image In Cursor Using Html CSS

In this article, you’ll learn the How to set image in cursor using  Html and Css.

Here, we use SVG, PNG and ICON as custom cursor.

Step-1: Create Html Code in the index.html file.

<div class="App">
      <div class='svg'><p>SVG</p></div>
      <div class='png'><p>PNG</p></div>
      <div class='icon'><p>Icon</p></div>
</div>

Step-2: Add CSS Code in the <style>…</style> on index.html file.

.App {
  text-align: center;
  display: flex;
  margin: 50px;
}

.svg {
  text-align: center;
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg"),
    auto;
  border: 1px solid black;
  border-radius: 5px;
  height: 200px;
  width: 200px;
}

.png {
  text-align: center;
  cursor: url("https://i.stack.imgur.com/wu8CP.png"), auto;
  border: 1px solid black;
  border-radius: 5px;
  height: 200px;
  width: 200px;
}

.icon {
  text-align: center;
  cursor: url("https://davidwalsh.name/demo/css-custom-cursor.ico"), auto;
  border: 1px solid black;
  border-radius: 5px;
  height: 200px;
  width: 200px;
}

Output :