mouse icon
mouse from Material Symbols by Google · Regular · Hardware · Apache-2.0 Free for personal and commercial use.
- Name
- mouse
- Set
- Material Symbols
- Style
- Regular
- Category
- Hardware
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- mouse-rounded, mouse-sharp
1 other variant in Material Symbols
The same icon in other sets
mouseBootstrap IconsmouseBoxIcons v2mouseBoxIcons v2 SolidmouseEmoji One (Colored)mouseElement PlusmouseFont Awesome SolidmouseFluent EmojimouseFluent Emoji FlatmouseFluent Emoji High ContrastmouseFirefox OS Emojimousecss.ggmouseIconParkmouseIconPark OutlinemouseIconPark SolidmouseIconPark TwoTonemouseIonIconsmouseLine AwesomemouseLucidemouseMage IconsmouseMajesticonsmouseMaterial Symbols LightmouseMaterial Design Iconsmouse-fillMingCute IconmouseNoto Emoji
More hardware icons from Material Symbols
add-diamondadf-scanneraod-tabletaod-watcharrows-left-right-circlearrows-up-down-circleassistant-deviceaudio-video-receiverb-circlebalancebrowser-updatedcamera-videocastcast-connectedcast-for-educationcast-pausecast-warningchromecast-devicecircle-circlecomputercomputer-arrow-upcomputer-cancelcomputer-soundconnected-tv
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="M12 22q-2.925 0-4.962-2.037T5 15v-4h14v4q0 2.925-2.037 4.963T12 22M5 9q0-2.625 1.7-4.587T11 2.074V9zm8 0V2.075q2.6.375 4.3 2.338T19 9z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsMouse(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="M12 22q-2.925 0-4.962-2.037T5 15v-4h14v4q0 2.925-2.037 4.963T12 22M5 9q0-2.625 1.7-4.587T11 2.074V9zm8 0V2.075q2.6.375 4.3 2.338T19 9z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-2.925 0-4.962-2.037T5 15v-4h14v4q0 2.925-2.037 4.963T12 22M5 9q0-2.625 1.7-4.587T11 2.074V9zm8 0V2.075q2.6.375 4.3 2.338T19 9z"/></svg> </template>
CSS
.icon-mouse {
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%22M12%2022q-2.925%200-4.962-2.037T5%2015v-4h14v4q0%202.925-2.037%204.963T12%2022M5%209q0-2.625%201.7-4.587T11%202.074V9zm8%200V2.075q2.6.375%204.3%202.338T19%209z%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%22M12%2022q-2.925%200-4.962-2.037T5%2015v-4h14v4q0%202.925-2.037%204.963T12%2022M5%209q0-2.625%201.7-4.587T11%202.074V9zm8%200V2.075q2.6.375%204.3%202.338T19%209z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/mouse.svg?color=%231a73e8&size=48
