mouse icon

mouse-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.

Name
mouse-fill
Set
MingCute Icon
Style
Fill
Viewbox
24×24
License
Apache 2.0

1 other variant in MingCute Icon

mouse-line

The same icon in other sets

All mouse icons →
mouseBootstrap IconsmouseBoxIcons v2mouseBoxIcons v2 SolidmouseEmoji One (Colored)mouseElement PlusmouseFont Awesome SolidmouseFluent EmojimouseFluent Emoji FlatmouseFluent Emoji High ContrastmouseFirefox OS Emojimousecss.ggmouseIconParkmouseIconPark OutlinemouseIconPark SolidmouseIconPark TwoTonemouseIonIconsmouseKeyline IconsmouseLine AwesomemouseLucidemouseMage IconsmouseMajesticonsmouseMaterial SymbolsmouseMaterial Symbols LightmouseMaterial Design Icons

Use the mouse icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 2a6 6 0 0 0-6 6v8a6 6 0 0 0 6 6h2a6 6 0 0 0 6-6V8a6 6 0 0 0-6-6zm1 4a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteMouseFill(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="M11 2a6 6 0 0 0-6 6v8a6 6 0 0 0 6 6h2a6 6 0 0 0 6-6V8a6 6 0 0 0-6-6zm1 4a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 2a6 6 0 0 0-6 6v8a6 6 0 0 0 6 6h2a6 6 0 0 0 6-6V8a6 6 0 0 0-6-6zm1 4a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1"/></svg>
</template>

CSS

.icon-mouse-fill {
  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%22M11%202a6%206%200%200%200-6%206v8a6%206%200%200%200%206%206h2a6%206%200%200%200%206-6V8a6%206%200%200%200-6-6zm1%204a1%201%200%200%201%201%201v4a1%201%200%201%201-2%200V7a1%201%200%200%201%201-1%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%22M11%202a6%206%200%200%200-6%206v8a6%206%200%200%200%206%206h2a6%206%200%200%200%206-6V8a6%206%200%200%200-6-6zm1%204a1%201%200%200%201%201%201v4a1%201%200%201%201-2%200V7a1%201%200%200%201%201-1%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/mouse-fill.svg?color=%231a73e8&size=48